使用 Hexo 和 Github Pages 搭建个人博客

发表于 | 分类于 | 阅读次数:

目录

1. 前言

常见的博客方案有以下几种:

  1. 在 CSDN, cnblogs, 简书等博客平台注册自己的博客主页。
    • 优点: 功能完备，无成本，技术门槛低，具有社交属性。
    • 缺点: 可定制性差，迁移成本高。
  2. 购买虚拟主机和域名， 利用 WordPress 等开源工具搭建博客。
    • 优点是自由度高
    • 缺点是技术门槛高，购买虚拟主机和域名长期来看也要不小开销。如果虚拟主机是在国内，还需要进行备案。
  3. 利用 Github Pages 结合 Hexo / Jekyll 等博客生成工具搭建。
    • 优点是没有虚拟主机和域名的开销，具备一定的可定制性，基于 Github 这个最大的程序员社交平台。
    • 缺点是博客地址在国外,访问速度较慢，这点可以通过CDN进行加速。

综合考虑，我选择第三种方案来搭建自己的技术博客。Github Pages 常用的博客生成工具有：

2. Github Pages 使用

2.1. 注册主页

请参考 Github Pages 官网 进行注册。

2.2. 分支管理

基于安全方面的考虑， Github 上只保留 master 分支用于发布。博客的源码和主题源码保存在 Gitlab 私有仓库和 群晖NAS 中的 Gitlab 仓库， 源码仓库分支为 hexo。

2.3. 自定义域名和HTTPS支持

请参考

  1. GitHub Pages自定义域名
  2. GitHub Pages 对自定义域名支持 HTTPS

2.4. CDN 加速

请参考 Github Pages + CDN全站加速

另外，可以使用 站长之家 - 网站测速工具 测试各省对你的博客的访问速度。

2.5. 集成百度统计

集成 百度统计 可以帮助我们统计访客的数量和来源，便于我们分析和维护博客。

请参考 NexT使用手册 - 百度统计

2.6. 让搜索引擎收录你的博客

博客发布之后，我们发现在 Google, Baidu 等搜索引擎中并不能检索到我们的博客，这是因为搜索引擎还没有收录我们的博客。以 Google 为例， 我们需要在 Google Search Console 中创建站点并提交 sitemap.xml。sitemap.xml 的生成方式可以参考下面的教程。

当然，在流行网站 (如知乎、豆瓣等) 添加你的博客地址，也是让搜索引擎快速收录网站的有效方法。

3. Hexo 框架使用

详细的 Hexo 教程请参考 Hexo 官方文档, 还可以通过执行 hexo help 了解常用的命令。

3.1. 安装 Hexo

1
$ npm install hexo-cli -g

3.2. 生成 Hexo 项目

1
2
$ hexo init [projectname]  # projectname 是你的项目名称
$ cd [projectname]

hexo init 命令会通过 git 从 github.com/hexojs/hexo-starter 下载文件初始化你创建的博客。

3.3. 启动项目

1
$ hexo server [-p port] [--debug] [--drafts]  # 默认端口 4000

打开浏览器登录 http://127.0.0.1:4000/ 即可看到生成的博客网站。如果是在本地，可以加上 --debug 参数，这样每次修改，只要刷新页面即可。

3.4. 创建新文章

1
$ hexo new [postname]  # postname 是你的文章名称

这时你会发现 source/_posts/ 目录下多了一个 [postname].md 文件， 这个文件就是编写文章内容的地方。

3.5. 生成静态文件

写完文章，发布之前，需要生成静态文件，发布命令会将生成的静态文件发布到线上。

1
$ hexo generate

3.6. 发布到 Github Pages

  1. 在 Github -> Settings -> SSH and GPG keys 中添加你的 ssh key 公钥

  2. 编辑 站点配置文件 _config.yml

1
2
3
4
deploy:
    type: git
    repo: git@github.com:[yourname]/[yourname].github.io.git
    branch: master
  1. 执行发布命令
1
$ hexo deploy

这时登录你的 Github Pages 主页看看博客是否发布成功了。

3.7. 创建、发布、撤销草稿

有时候我们新建了文章，但是文章还没有写完，不想立刻发布，这时可以使用草稿功能。

  1. 创建草稿
1
$ hexo new draft [postname]

这时会在 source/_drafts/ 目录下新建 [postname].md 文件， 除了 source/_posts， source 下其他以 _ 开头的目录下的资源在发布的时候都会被忽略。

  1. 发布草稿
1
$ hexo publish draft [postname]
  1. 将发布的文章改为草稿， 只需将文件移到 _drafts 目录即可。
1
$ mv source/_posts/[postname].md source/_drafts/

3.8. 删除文章

1
2
$ rm source/_posts/[postname].md  # postname 是删除的文章对应的文件
$ hexo clean && hexo g  # 清理并重新生成静态文件

3.9. 创建 sitemap.xml

1
2
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

在 站点配置文件 _config.yml 中添加

1
2
3
4
5
6
7
8
9
# auto generate sitemap.xml
Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

baidusitemap:
    path: baidusitemap.xml
sitemap:
    path: sitemap.xml

执行 hexo clean && hexo g 就可以在 public 目录下看到生成的 sitemap.xml 和 baidusitemap.xml 文件。

注意： 如果在搜索引擎控制台中你使用的是自定义的域名，记得将 站点配置文件 _config.xml 中的 url 改成自定义的域名，否则在搜索引擎提交 sitemap.xml 是会报 URL not allowed 错误。

4. NexT 主题配置

详细的 NextT 主题配置请参考 NexT 使用文档， 这里不做过多描述。

4.1. 安装主题

  1. 安装主题
1
2
$ hexo clean
$ git submodule add https://github.com/iissnan/hexo-theme-next themes/next
  1. 切换主题

编辑 站点配置文件 _config.yml， 将主题修改为 next

1
2
# theme: landscape
theme: next
  1. 重新启动博客
1
$ hexo s --debug --drafts

4.2. 新建标签/分类页面

以新建 标签页面 为例， 分类页面 类似。

  1. 新建 tags 页面
1
$ hexo new page tags
  1. 编辑 tags 页面文件 source/tags/index.md
1
2
3
4
5
6
---
title: 所有标签
date: 2018-11-30 02:09:20
type: "tags"
comments: false
---
  1. 编辑 主题配置文件 theme/next/_config.yml, 添加 tags 到 mennu 中：
1
2
3
4
menu:
  home: /
  archives: /archives
  tags: /tags

注意： 如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

1
2
3
categories:
- Diary
- Life

会使分类 Life 成为 Diary 的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

4.3. 安装 RSS 插件

  1. 安装 hexo-generator-feed 插件
1
$ npm install hexo-generator-feed --save
  1. 编辑 主题配置文件 theme/next/_config.yml，添加下面内容
1
2
3
4
5
6
7
8
9
# RSS subscribe support
plugin:
- hexo-generator-feed

# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
  1. 执行 hexo clean && hexo g 后重新生成博客文件。

4.4. 安装 gitalk 评论系统

请参考 Hexo NexT主题中集成gitalk评论系统

4.5. 博客置顶

请参考 Hexo博客彻底解决置顶问题

4.6. 显示摘要

1
2
3
4
5
这是摘要

<!-- more -->

这是正文

4.7. 文章置顶

安装库

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

在需要置顶的文章的 Front-matter 中加上 top: true 即可。

1
2
3
4
5
---
title: 我的2018总结
date: 2018-12-31 11:45:59
top: true
---

打开：/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="green">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

5. 常见问题

5.1. debug.log 太大导致 deploy 失败

如果长时间执行 hexo s --debug, debug.log 文件中会产生大量日志。.gitignore 默认是没有添加 debug.log 的。但 debug.log 超过 100MB, hexo deploy 会失败，即使清理掉 debug.log， 重新执行 hexo g -d 仍然报同样的错误。

后来发现应该是 .deploy_git 目录下存在缓存

1
2
3
$ mv .deploy_git .deploy_git_bak
$ hexo g -d
$ rm -rf .deploy_git_bak   # 如果发布成功，可以删除备份文件

6. 站长工具

  1. 站长之家 - 网站测速工具: http://tool.chinaz.com/speedtest.aspx
  2. 自动生成网站sitemap.xml: https://www.xml-sitemaps.com/

7. 参考文档

  1. Hexo官方文档
  2. NexT主题主页
  3. Github Pages部署个人博客（Hexo篇）
  4. Hexo NexT主题中集成gitalk评论系统
  5. Configuring a publishing source for GitHub Pages
  6. Hexo博客彻底解决置顶问题
  7. GitHub Pages自定义域名
  8. GitHub Pages 对自定义域名支持 HTTPS
  9. Github Pages + CDN全站加速
  10. 站长之家 - 网站测速工具
坚持原创技术分享，您的支持将鼓励我继续创作！