使用 Hexo + Github Pages 搭建独立博客

Posted on | In | |

How to build a blog step by step.

手把手教你搭建独立博客。

初心

如今互联网上有很多现成的博客服务，比如博客园、CSDN、新浪博客，只需注册账号便可以在这些平台上拥有自己的博客了，如果图方便省事，那么利用现成的博客服务是个不错的选择。

但，这些博客服务都缺乏个性，界面不够美观，又或者是充斥着一些广告信息，作为一名程序员、设计师或者其他行业的人，拥有自己的独立博客或者个人网站总是一件很酷的事。

做网站是一件简单的事，同时又是一件麻烦的事。简单在于可以利用很多现成的框架来省时省力，麻烦在于定制自己理想的界面样式和内容是需要付出很多精力的。

因为兴趣，因为表达的欲望，因为记录生活的需求，因为分享技术的快乐，让我们开始搭建一个属于自己的独立博客吧！

本文介绍的搭建网站的方法基于 Hexo框架 和 Github Pages ，在我看来，这种方法是很值得选择的。因为首先它利用了Hexo这个自动生成静态博客的框架，所以不需要编程经验；其次网站托管在Github的服务器上，流量和空间都是免费的，稳定性很高，更新网站很方便，是一种省时省力的好选择。

注：

  • 本教程会提到所有搭建独立博客过程中的要素，但有些部分可能不会非常细节，比如hexo的安装和操作，因为这些内容官方文档里都有，我会给出链接。
  • 本教程适用于任何人，无需编程经验，同时适用于 MacOS, Linux 和 Windows 用户。

搭建流程

  1. 创建一个属于自己的 Github Pages
  2. 购买域名并绑定到自己的 Github Pages
  3. 配置 Hexo ，搭建网站

创建 Github Pages

Github Pages 本身就是 Github 为用户提供的一个介绍项目、发表技术文章的网站。

当你创建了它，这时可以认为你已经拥有了一个网站，只不过这个网站没有内容。

Github Pages 的网站内容和样式全部可以由用户自己定制，网站空间无限，流量免费，Github为你维护，安全又稳定，而且你可以很轻松的更新它。

Github Pages 实际上是一个 Github 仓库，这也就解释了为什么其很容易更新，因为网站的样式和内容都存储在该仓库中，当你更新仓库时，网站也自动更新了。

创建 Github Pages 分为2步：

  1. 首先需要注册一个 Github 账号。
  2. 然后创建一个仓库，仓库名为 username.github.io ，username 就是你的 Github 用户名。

githubio

Fig. 1: 用户名为 yanshengjia 的 Github Pages 仓库

这样一个属于你的 Github Pages 就创建好了。

我们的独立博客就存放在这个 Github 仓库中。也可以认为，我们的独立博客就是这个 Github Pages。

如果使用 Github 的 Automatic Page Generator 自动网页生成工具，那么此时一个网址为 username.github.io 的网站就自动生成好了，但它是没有内容的，样式也是 Github 提供的模板。

此时访问 username.github.io 就可以访问我们的独立博客了，但是它没有内容，样式也不够个性，同时这个网址也有点冗长。

如何定制自己喜爱的网站样式并添加网站内容呢？如何让我们的独立博客有一个个性化的域名呢？

域名绑定

域名绑定分为三步：

  1. 购买域名
  2. 设置DNS解析来将自己的域名与 Github Pages 绑定
  3. 在 Github Pages 仓库中添加 CNAME 文件

购买域名

域名通过向域名注册商购买获得，如今有很多域名注册商，比如万网和GoDaddy。

随便选一个域名注册商，搜索自己喜欢的域名，购买即可。

注：

  • 以 .cn 结尾的域名需要备案。
  • 域名的价格根据域名的长段和辨识度而不同，一般来说，越短的域名越贵，越好记的域名越贵。

我是通过 GoDaddy 购买的域名。

godaddy

Fig. 2: 一个代表我姓名的域名

OK，现在拥有了自己的域名，如何将我的域名和我的 Github Pages 绑定起来呢？

设置 DNS 解析

绑定的含义就是当你访问你的域名时，浏览器会自动跳转到刚才创建的 Github Pages (username.github.io)。

实现绑定的关键在于设置 DNS 解析。

在 GoDaddy 注册的域名，由于 GFW 的存在，需要使用第三方 DNS 服务来解析域名。

推荐使用鹅厂的 DNSPOD。鹅厂的服务可靠性高同时也不会被墙 ：）

为你的域名添加记录，最终添加完应该是这样的：

主机记录 记录类型 线路类型 记录值 权重 MX优先级 TTL
@ A 默认 192.30.252.153 - - 10
@ A 默认 192.30.252.154 - - 10
@ NS 默认 f1g1ns1.dnspod.net - - 86400
@ NS 默认 f1g1ns2.dnspod.net - - 86400
www CNAME 默认 username.github.io - - 10

Table 1: 域名的DNS记录

参数含义：

  • 主机记录
    • @：不通过任何前缀访问域名
    • www：通过www前缀访问域名
  • 记录类型
    • A：在记录值处写主机地址
    • NS：记录值是DNSPOD提供的Name Server地址
    • CNAME：记录值是域名的别名

由于域名是在 GoDaddy 上注册的，Godaddy 是该域名的托管商，因此需要到 Godaddy 的控制面板指定域名的NS服务器。

登陆 GoDaddy，进入域名管理器，点击管理DNS，设置域名服务器，添加2个外部域名服务器 (DNSPOD提供的域名服务器地址)。

nameserver

Fig. 3: 设置域名服务器

设置成功后，等待DNS解析成功。

这时，我们有了自己的域名，DNS设置完成，还差一步，就能完成域名绑定了。

推荐阅读：Blog绑定域名——GoDaddy+DNSPOD

添加 CNAME 文件

最后一步就是要在 Github Pages 仓库根目录下添加一个 CNAME 文件，内容是一行自己的域名 (e.g. yanshengjia.com)。

比如我的CNAME：

1
yanshengjia.com

这样是域名绑定就完成了。

此时，我们的独立博客拥有了自己的域名，并将其绑定到了 Github Pages。

那么如何让我们的独立博客拥有简洁美观的样式呢？如何在博客上发表文章呢？

对于熟练掌握网页编程技术的人来说，制作出一个拥有美观样式的网站并不难。

但对于不熟悉网页编程的人来说，去学习HTML语言或是UI设计，可能要花费数月时间。

那有没有什么”捷径”呢？

答案是：Yes!

通过 Hexo框架 ，无需网页编程经验，我们也能轻松地生成拥有美观样式的网站，同时让发表博文变得易如反掌。

配置 Hexo

Hexo 是一个高效、易于上手且强大的博客框架。

她生成网站速度快，支持 Markdown 语言，支持将站点部署到 Github Pages，拥有众多功能强大的插件。

安装她之前需要安装 Node.js 和 Git，具体请参考 Hexo官方文档。

然后在 终端/Shell 中输入如下命令：

1
$ npm install hexo-cli -g

这样 Hexo 就安装好了。

接下来要做的就是选择一个目标文件夹 \ 来初始化 Hexo 框架。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

初始化完成后，配置 Hexo 的各项设置，站点设置都在 _config.yml 文件中。

此时，我们已经可以用 Hexo 来生成一个博客网站了。

通过在 终端/Shell 中输入 Hexo 的各项命令，我们就能轻松的新建文章、发表文章和生成站点了。

一些常用命令总结：

命令 功能
hexo new [layout] title 新建文章。layout 是文章类型，title 是文章标题。
hexo g 生成本地站点文件
hexo d 部署站点到 Github Pages 或其他服务器
hexo s 在本地服务器 (http://localhost:4000/) 上预览博客
hexo clean 清空缓存文件 (db.json) 和已生成文件 (public)

Table 2: Hexo 常用命令

现在我们离大功告成还差2小步了：

  • 部署博客站点到 Github Pages
  • 选择一个漂亮的主题/网站样式

Hexo 还有很多有趣的功能和插件，想深入了解，还是推荐看她的官方文档。

部署站点

首先需要下载一个插件：hexo-deployer-git

然后在站点配置文件 _config.yml 中修改设置：

1
2
3
4
5
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

repo: Github 仓库URL。例如：git@github.com:username/username.github.io.git

branch: 分支名称。如果 Github Pages 仓库没有建分支，那 branch 就是 master。

message: 定制 commit message。message为空即为使用默认提交信息 (Site updated)

部署站点不管可以部署到 Github Pages 上，还能部署到很多别的服务器，比如 Heroku, Rsync, OpenShift, FTPSync。因为本文介绍的是将站点托管在 Github Pages 上，所以其他就不介绍了。

推荐阅读：Deployment

选择主题

Hexo 有很多漂亮的主题可以选择，利用这些主题，我们就能轻松地给我们的博客站点换上漂亮的衣服。

安装主题的方法很简单，只需要将主题文件拷贝至站点目录的 themes 目录下，然后修改配置文件即可。

我使用的主题是 NexT: Elegant Theme for Hexo，一个简约美观的主题。

启用 HTTPS

自 2018 年 5 月 1 日起，GitHub 支持自定义域名的 HTTPS 请求了。

详情见这。

配置也相当简单，只需要更新 DNS 配置里的 A 记录，将其指向以下4个 IP 地址中的至少一个。

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

HTTPS 让你的网站和网站访客更安全，并且 GitHub 提供的这些 IP 地址自动将你的站点加入了 CDN，提高了访问速度。

你还可以在 GiHub Pages 仓库的设置里勾选 ‘Enforce HTTPS’，这样所有访问你站点的请求都会走 HTTPS。

不得不说，GitHub 是真的良心。

大功告成

当完成了上述步骤，你的独立博客也就搭建完成了！恭喜你！

附几张我的网站截图：

overview

Fig. 4: 网站总览

上面一栏是网站菜单，浏览器中部是我的博文，每个博文都可以看到其 Category 以及评论。

sidebar

Fig. 5: 侧边栏

侧边栏包含我的头像，网站简介，博文统计，RSS订阅，社交链接。

archive

Fig. 6: 归档页面

网站的归档包含了我所有的文章，按时间顺序排列。

category

Fig. 7: 分类页面

分类页面显示了我所有文章的分类，而且分类是有层次关系的。

tags

Fig. 8: 标签页面

标签页面显示了所有文章的标签，用某一标签的文章数越大，该标签会越大。

search

Fig. 9: 站内搜索功能

资磁一下？