基于github与hexo的博客搭建

发表于 分类于 阅读次数： 本文字数： 5.5k 阅读时长 ≈ 7 分钟

安装npm

进入这个网站（镜像），下载需要的最新的pkg：http://npm.taobao.org/mirrors/node/latest/。

然后将这个文件解压，放到一个位置。配置export PATH=$PATH:/Users/feiyu/node-v11.7.0-darwin-x64/bin。

创建github仓库

仓库的名字必须是我们自己的github用户名，这样github会识别当前仓库的某个分支来创建GitHub Pages，默认选用master分支。

然后我们需要在本地创建一个对应的的项目，并进入这个项目文件夹。

需要注意的是，上面默认选中了master分支作为基础创建GitHub Pages，那么本地的源代码就不能再直接git push到该分支，该分支只能用来发布博客页面。

安装hexo

首先，需要在我们的博客项目文件夹中。输入下面命令开始安装。

1
npm install hexo -g

安装完成后，则初始化博客项目。

1
hexo init

输入npm install，安装所需要的组件。

需要讲解几个重要的命令：

hexo new "" 创建源md文件；
hexo g 生成网页；
hexo s 本地起服务，然后浏览器输入http://localhost:4000 ，就可以访问本地博客项目；
hexo d 将生成的页面发送到github，github检测到master分支更新后会自动构建页面，这其中有一点延迟，需要稍微等一下。

在_config.yml中配置一下Site基础信息

1
2
3
4
5
6
7
8
title: feiybox
subtitle: do more
description: 小浊微清的博客
author: feiybox
language: zh-Hans
url: https://feiybox.github.io/
root: /
...

当然还有许多变量可以去配置。

在hexo生成后会默认有一个页面，因此可以尝试上面hexo g等命令查看该项目构建是否成功。

当hexo d发布后，就可以进入https://your_github_id.github.io/ ，就可以访问你的博客网页了，如果有构建错误或者异常等，github会通过邮件发送提醒。

文章源md

每个文章的源md文件都分为两个部分，文章部分就是常用的md语法，而头部分示例如下，主要有文章名、时间、标签、分类等。

1
2
3
4
5
6
title: HashMap 源码分析
date: 2017.04.03 20:08
tags: 
    - Java
    - map
categories: tech

这个部分许多都是直接在hexo new的时候就生成出来了，然后修改。当然也可以修改scaffolds/post.md文件就可以直接修改new生成出来的模版了。

增加图片支持

到目前为止，博客已经支持基础的发文操作了，接下来就是完善与优化了。

1
npm install hexo-asset-image --save

在当前文件夹下输入上诉命令，就可以支持markdown命令![logo](logo.jpg)来支持相对路径。并且使用hexo new命令时，会创建一个对应文章的文件夹，将图片放在这个文件夹中，然后在文章中使用相对路径就可以使用了。

next主题

为啥使用next主题？因为够简洁呀。还有一个原因，这个博客主题中支持了许多插件，因此不需要我们去修改模版页面了，只需要修改一个配置就行了。

如何安装呢，直接将next主题直接下载到themes文件夹下，然后将_config.yml中的theme修改为theme: next就可以了。使用git下载如下（前提在当前项目根目录下）

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

头像与网页缩略图

这是一个代表自己网页特异性的地方。

修改themes/next文件夹下的_config.yml文件中的配置如下。

1
2
3
4
5
6
7
favicon: # 缩略图
  small: /images/f.png
  medium: /images/f.png
  apple_touch_icon: /images/f.png
  safari_pinned_tab: /images/f.png
  ...
avatar: /images/head.png # 头像

所有的图片都是next/source为根文件夹，一般放在该文件夹的images文件夹下，后续构建时，会自动生成在对应的位置。

数据统计与页面阅读量展示

百度统计

数据统计部分，推荐使用百度统计，在百度统计上注册并新增了网站，获得一个百度统计的key，如下图位置。

百度统计key

然后将修改themes/next/_config.yml的baidu_analytics值为我们获得的key。

1
2
# Baidu Analytics ID
baidu_analytics:

然后项目构建后就可以进入百度统计查看网站的访问信息了。

不蒜子统计

直接修改themes/next/_config.yml的busuanzi_count的enable值为true。

1
2
3
4
5
6
7
8
9
10
11
busuanzi_count:
  enable: true
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

由于不蒜子的域名已经修改，官方有说明。因此需要修改不蒜子的域名，打开themes\next\layout_third-party\analytics\busuanzi-counter.swig文件，将dn-lbstatics.qbox.me替换成busuanzi.ibruce.info即可。

喜欢与评论

这个主要使用的是Gitment，其中评论主要是作为某个repo的issue存在，因此可以直接绑定自己的博客项目，也可以新建一个repo来存储评论。具体怎么做呢，按照接下来的步骤。

首先在项目根目录中安装Gitment。

1
npm i --save gitment

然后新建一个OAuth application。新建完成会生成一个Client ID与Client Secret。

![新建一个OAuth application](new OAuth application.png)

其中需要说明一下的是Homepage URL是指你的博客根目录地址，比如我的是https://feiybox.github.io/，然后是Authorization callback URL，这个是指用户在你的页面登录github账号后的回调链接，一般也是Homepage URL。（这儿我有一个疑问，这儿可以返回用户的登录页面吗？）

然后修改theme/next/_config.yml中的gitment配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:
  enable: true
  mint: true
  count: true 
  lazy: false 
  cleanly: true 
  language: 
  github_user: feiybox 
  github_repo: 
  client_id: 
  client_secret: 
  proxy_gateway: 
  redirect_protocol:

其中比较重要的有几个enable、github_user、github_repo、client_id、client_secret，这个几个都是必须填或修改的。需要注意的一点是github_repo是指评论的存储项目的项目名称，不是git仓库。

需要我们上线后，自己登录并对每篇文章开通评价（都在每篇文章的最后）。

然后上线并用自己账户开通评论时，可能会出现问题。

Error: Validation Failed

这个问题是因为issue的Label有长度限制，在中文博客中经常超过限制。因此可以将themes/next/layout/_third-party/comments/gitment.swig的window.location.pathname替换为'{{ page.date }}'。

这样每个issue都是基于文章的date构建的，因此需要保证没有同时发布文章，一般也不会出现这种情况。

注意:
国内可能出现”Object ProgressEvent”的报错，可以按照下面修改方法修改themes/next/layout/_third-party/comments/gitment.swig文件。

1
2
3
{% set CommentsClass = "Gitmint" %}
<link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css">
<script src="https://aimingoo.github.io/gitmint/dist/gitmint.browser.js"></script>

替换为

1
2
3
{% set CommentsClass = "Gitment" %}
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
<script src="https://jjeejj.github.io/js/gitment.js"></script>

特别需要注意需要将CommentsClass从Gitmint修改为Gitment。

分享支持

分享使用needmoreshare2

1
2
rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton

然后在themes/next/_config.yml中配置needmoreshare2。先将enable设置为true，然后可以配置分享按钮的样式等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
needmoreshare2:
  enable: true
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Wechat,Douban,QQZone,Weibo,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: vertical
      position: middleRight
      networks: Wechat,Douban,QQZone,Weibo,Twitter,Facebook

系统优化

搜索

将theme/next/_config.yml中的local_search的enable设置为true，就可以提供搜索了。

菜单

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  archives: /archives/ || archive
  categories: /categories/ || th
  tags: /tags/ || tags
  #about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

加上需要的菜单，然后新增对应的页面。如下，新增categories页面。

1
hexo n page categories

然后在source/categories/index.md中的type加上categories就好了。

首页文章缩略

themes/next/_config.yml文件中修改auto_excerpt。

1
2
3
auto_excerpt:
  enable: true
  length: 10

压缩静态资源

1
npm install hexo-neat --save

然后在_config.yml添加配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#静态资源压缩优化 hexo-neat
neat_enable: true # 启用neat

# html优化
neat_html:
  enable: true
  exclude:

# css优化
neat_css:
  enable: true
  exclude:
    - '*.min.css'

# js优化
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

参考

还有许多配置点，这位博主写得很好：hexo博客优化–Next主题