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 部署hexoGitHub

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

安装git插件:

1
npm install hexo-deployer-git --save

这里将一下如何将自己的静态page部署到GitHub,当然你可以同时将page同时部署到GitHubcoding上,可以参考这篇 博客,这里只讲如何部署到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 cleanhexo 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 shexo 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 IDclient 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】,让我们一起成长,谢谢。
微信公众号