0 作者肺腑之言

程序员的强迫症真是可怕，一个hexo博客我硬是折腾了近一个月，但还是没有完全弄好，限于时间问题，只能就到此打住了，因为真的时间有限。这里对于这段时间折腾hexo个人博客的一个总结，包括很多坑吧，因为刚开始弄，有很多的坑都是自己一步一步踩出来的，然后又通过百度去填补，确实很费时间，这里整理一下，希望多个人博客感兴趣的可以少走一点弯路。让后人少走弯路，我想这就是前人存在的意义吧。

1 准备工作

因为hexo是基于node.js编写的一个静态网页生成工具，可以基于GitHub page进行部署，通过互联网访问，类似于B/S结构。但是底层逻辑有些不同。
你需要准备的环境：

因为安装都很简单，这里就不做赘述了，按照【下一步】方法操作安装完成之后，然后在继续下一步的操作。

2 开启GitHub page服务

2.1 创建repository

能完个人博客的人，应该都有一个GitHub账号了，这里就不讲述如何申请GitHub账号，应该很简单，对于大家来讲，如果实在不会的，可以参考这篇博客。我们要做的就是在GitHub创建自己的page，我们新建一个repository，该repository的命名规则如下：

yourgithubaccount.github.io
比如：下面是我的GitHub page的repository名：crazyjums.github.io。 后面的两个是固定的，前面的必须是你的GitHub用户名，如下：
your github account

2.2 配置GitHub page

创建完成之后，然后进入该repository，点击setting，往下翻，找到page服务，有自己个人域名的可以绑定到自己的个人域名，关于如何申请个人域名，可以参考这篇博客，没有个人域名的话，也没关系，我们可以使用类似该域名进行访问：https://crazyjums.github.io。
into repository
click setting
set github page

2.3 访问GitHub page

如果配置完成的话，我们可以使用自己的GitHub page地址进行访问，如：https://crazyjums.github.io

3 安装hexo

在第一步中，我们已经安装好了hexo需要的环境，node.js和git，我们现在开始安装hexo，这里针对Windows用户进行讲解，Windows用户到桌面然后右键用过git bash here进入到git终端界面，如下所示：
git bash
如果你是Mac或者Linux用户，那么直接在终端进行操作节课，因为这两个系统的终端就可以操作git命令。

3.1 安装hexo

使用下面的命令安装hexo客户端，详情可以查看 hexo 官网。

1
npm install hexo-cli -g

3.2 启动hexo

安装完之后，我们通过git终端随便进入一个目录，通过cd进入到相应的目录，然后使用hexo i/init your_blog_folder，比如：hexo i my_hexo_blog，如下所示：
my first hexo
创建完之后，我们使用命令hexo g/generate将Markdown文件生产静态网页，然后在使用hexo s/server/start命令启动服务，如下所示：
hexo start
启动完之后，我们就可以通过本地链接访问了，链接地址：http://localhost:4000/，如下所示：
hexo first demo

3.3 部署hexo到GitHub

上面讲完了如何在本地安装使用hexo，但是我们的终极目的就是通过互联网访问自己的个人博客，这里通过GitHub page作为“服务器”来使用，当然你也可以使用腾讯的 coding 来作为自己的“服务器”来配置coding page，但是我个人觉得，coding没有GitHub好用，个人觉得，大家可以尝试一下，然后在做选择。但是coding有一个好处，就是coding的服务器在国内，而GitHub的服务器在国外，所以GitHub有时候会卡一下，速度上没有coding快，你们决定吧。

安装git插件：

1
npm install hexo-deployer-git --save

这里将一下如何将自己的静态page部署到GitHub，当然你可以同时将page同时部署到GitHub和coding上，可以参考这篇 博客，这里只讲如何部署到GitHub，我们需要修改hexo根目录下的_config.yml文件，记住，是根目录下的_config.yml文件，不是themes下的_config.yml文件。

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git # 通过git方式提交
  repo: 
    github: git@github.com:crazyjums/crazyjums.github.io.git  # submit to github
  branch: master # 在GitHubrepository中的分支，一般为master

配置完成之后，我们使用hexo d/deploy命令进行部署，

4 hexo美化

4.1 创建其他页面

hexo默认就只有两个两面，一个是home，另一个是archives，如果我们想要创建其他的固定页面的话，我们需要使用命令hexo new page "your page"，记住和hexo new "post page"区分开。

区别：

  • hexo new page ""用来创建一个页面，他会在hexo的source目录下创建一个index.md，用来生产.html页面，
  • hexo new "your post"用来生产post页面，也就是我们需要发表的博客页，它会在 hexo/source/_post目录下生产一个 your-post.md文件，在 hexo g命令之后，会在 public/目录下生成一个 .md文件，用来放你写的博客。

举例：
使用hexo new "about"创建自己的简历页面，如下所示：
hexo new about
about page

配置页面：
打开 about文件夹下的 index.md文件，然后在台头上加上如下语句：
type about

还要对themes目录下的_config.yml文件进行配置，如下所示：

config menu

#表示注释的意思

推广：
我们配置完about页面之后，其他的页面我们可以按照这种方法进行配置。这里不多介绍。

4.2 配置搜索页面

hexo提供了本地搜索功能，搜索本地的静态网页，首先我们需要安装一个三方包：

1
npm install hexo-generator-searchdb --save

然后配置相应的配置文件，如下：
config local search

然后就是hexo clean和hexo g -s，然后就可以看到那个搜索按钮了，如下所示：
search button

4.3 配置百度站长

4.3.1 添加站点

百度搜索“百度站长”，如下： 百度站长
百度账号登录或者微信登录都可以，下图进入到站点管理界面：
站点管理
添加站点

4.3.2 验证站点

进入到相应的站点进行管理，点击验证，有三种验证方式，这里推荐使用文件下载验证，如下所示：
站点验证
安装步骤验证完之后，接着在来配置站点地图

4.3.3 配置站点地图

下载三个包： 

1
2
3
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-sitemap --save
npm install hexo-baidu-url-submit --save

配置：
进入到根目录下的_config.yml文件中，进行配置，加入下面的语句： sitemap 

1
2
3
4
5
6
7
8
#----------------------------------------------
# 添加百度网站地图
#----------------------------------------------
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

百度推送 

1
2
3
4
5
6
7
8
9
#----------------------------------------------
# 添加百度推送  让百度可以搜索到
#----------------------------------------------
baidu_url_submit:
  count: 100 # 提交最新的10链接 可以改成其他数字
  host: jums.club # 在百度站长平台中注册的域名
  token: yiOH4yHRf0eeVuko # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

配置deploy：
deploy config 

1
- type: baidu_url_submitter

上面三个配置都是在根目录下的_config.yml文件中进行配置的。

4.4 SEO优化

最后的网站就是我们只要点三次，就可以到达我们网站的任何网页，这样的话，我们的网站就可以更好的被百度爬虫爬取到，但是hexo的博客目录是year/month/day/blog_name进行排序的，这样严重影响了搜索的效率，下面我们一个插件，直接使用your_domain/blog_name的格式进行排序博客。

安装： 

1
npm install hexo-abbrlink --save

配置：
同样，也是在根目录下的_config.yml文件中进行配置，如下所示： config SEO optimal

1
2
3
abbrlink:
  alg: crc32 # 算法：crc16(default) and crc32
  rep: hex # 进制：dec(default) and hex

5 hexo插件

5.1 安装豆瓣插件

github地址

  • 安装

    1
    npm install hexo-douban --save

  • 配置

    在主配置文件_config.yml中配置以下参数：（不是主题配置文件）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    douban:
      user: mythsman   #这里填写你的豆瓣账号用户名
      builtin: false
      book:
        title: 'This is my book title'   # 这是页面的标题
        quote: 'This is my book quote'   # 这是页面中引用的一句话
      movie:
        title: 'This is my movie title'
        quote: 'This is my movie quote'
      game:
        title: 'This is my game title'
        quote: 'This is my game quote'
      timeout: 10000   #延迟时间
    • user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的URL大概是这样：”https://www.douban.com/people/xxxxxx/" ，其中的”xxxxxx”就是你的个人ID了。
    • builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true(1.x.x版本新增配置项)。
    • title: 该页面的标题.
    • quote: 写在页面开头的一段话,支持html语法.
    • timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

5.2 hexo支持流程图

  • 安装

    1
    npm install --save hexo-filter-flowchart

  • 使用说明

    操作模块 说明
    start 开始
    end 结束
    opration 普通操作块
    condition 判断块
    subroutine 子任务块
    inputoutput 输入输出块

  • 流程图案例

5.3 hexo支持数学公式

  • 安装

    1
    npm install hexo-math --save

  • 配置

    在主题的配置文件中，修改一下参数：

    1
    2
    3
    # MathJax Support
    mathjax: 
      enable: true   # 将false改成true

  • 用法

    数学公式具体用法，参考这里

5.4 压缩静态资源

5.4.1 安装插件：
1
npm install gulp -g
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm install gulp,babel-core@6.26.3, gulp-minify-css,gulp-uglify,gulp-htmlmin,gulp-htmlclean,gulp-imagemin，gulp-babel@7.0.1,babel-preset-es2015@6.24.1 --save
## 拆分：
npm install gulp --save
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save  # 安装该模块时，需要管理员权限
# 解决【Gulp打包问题】 GulpUglifyError: unable to minify JavaScript
# 解决 gulp-uglify 压缩JavaScript 不兼容 es5 语法的问题
npm install babel-core@6.26.3 --save
npm install gulp-babel@7.0.1 --save
npm install babel-preset-es2015@6.24.1 --save
# gulp-babel 取消严格模式方法("use strict")
npm install babel-plugin-transform-remove-strict-mode --save
5.4.2 创建gulpfile.js文件

在 Hexo 站点下根目录下新建gulpfile.js文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var babel = require('gulp-babel');

// 压缩css文件
gulp.task('minify-css', function (done) {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
    done();
});

// 压缩html文件
gulp.task('minify-html', function (done) {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'));
    done();
});

// 压缩js文件
gulp.task('minify-js', function (done) {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({
            //将ES6代码转译为可执行的JS代码
            presets: ['es2015'] // es5检查机制
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
    done();
});

// 压缩 public/images 目录内图片(Version<3)
// gulp.task('minify-images', function () {
//     gulp.src('./public/images/**/*.*')
//         .pipe(imagemin({
//             optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
//             progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
//             interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
//             multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
//         }))
//         .pipe(gulp.dest('./public/images'));
// });

// 压缩 public/images 目录内图片(Version>3)
gulp.task('minify-images', function (done) {
    gulp.src('./public/images/**/*.*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/images'));
    done();
});

//4.0以前的写法 
//gulp.task('default', [
//  'minify-html', 'minify-css', 'minify-js', 'minify-images'
//]);
//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () {
    console.log("----------gulp Finished----------");
    // Do something after a, b, and c are finished.
});
5.4.3 修改主配置文件

将根目录下的配置文件_config.yaml做如下修改：

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://jums.club
root: /media/
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

修改：

将上述配置中的第5行进行修改，将改成这样：:title/，注意:和/，将前面的年月日删除。

5.4.4 静态资源压缩

只需要每次在执行 generate 命令后执行 gulp 就可以实现对静态资源的压缩

1
hexo gulp

5.5 配置gitalk评论

5.5.1 注册OAuth Apps

OAuth Apps注册地址

注册

注册完之后，可以查看对应的client ID和client Sercet：

5.5.2 在hexo中配置

打开主题的配置文件：_config.yaml，配置一下内容：

1
2
3
4
5
6
7
8
9
10
11
comment:
    type: gitalk
    owner: crazyjums         # 你的github用户名
    repo: media          # 你的位置对应的github仓库
    client_id:      # (required) OAuth application client id
    client_secret:  # (required) OAuth application client secret
    admin: crazyjums  ## 你的github用户名
    create_issue_manually: true
    distraction_free_mode: false
    has_hot_recommend: true # 是否有热门推荐
    has_latest_comment: true #是否有最新评论
5.5.3 配置github page

如果前面的OAuth Apps注册的是https的，那么在github page也需要设置https：

https

5.5.4 开始使用

当第一次使用时，可能会遇到如下的问题：

  1. gitalk提示Error Not Found
  2. 未找到相关的 Issues 进行评论，请联系xxx初始化创建

如果遇到这两个问题，可以做如下检查：

  1. 看看是否在github page中设置了https
  2. 看看OAuth Apps中的你的网站链接的末尾是否添加了一个/符号
  3. 你的配置文件中的信息是否填写正确，参见修改配置文件

写在最后

欢迎大家关注鄙人的公众号【麦田里的守望者zhg】，让我们一起成长，谢谢。
微信公众号