用 hexo + gitpage 搭建博客以及 gitpage 绑定自定义域名

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

本文章将帮助您基于 Gitpages快速搭建 Hexo 博客。如果您在使用过程中遇到问题，请在 GitHub、Google Group 上提问。

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown （或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

安装 Hexo 只需几分钟时间，若您在安装过程中遇到问题或无法找到解决方式，请提交问题，我会尽力解决您的问题。

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

如果您的电脑中已经安装上述必备程序，那么只需要使用 npm 即可完成 Hexo 的安装。

1
npm install -g hexo-cli

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

Mac 用户

在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows 用户

由于众所周知的原因，从下面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

安装 Git

  • Windows：下载并安装 git
  • Mac：使用 Homebrew, MacPorts, 或下载 安装程序安装
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm
cURL:

1
curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

1
wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

1
nvm install stable

或者您也可以下载 安装程序 来安装。

Windows 用户

对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。
另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1
npm install -g hexo-cli

初始化

打开 git-bash ，先新建一个目录用于保存博客程序：

1
2
3
mkdir /d/blog
cd /d/blog
hexo init

到此本地基本环境就搭建好了，使用

1
hexo server

运行博客，显示如下信息则说明安装没有问题，可以浏览器输入地址浏览。

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

当然， Hexo 默认主题是很丑的，下面开始讲如何使用 NexT 主题。

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

安装 NexT

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

下载主题

建议使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换。
在终端窗口下，定位到 Hexo 站点目录下。使用 Git clone 代码：

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

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

1
theme: next

主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme:

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置语言

编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文:

1
language: zh-Hans

设置 菜单

编辑 主题配置文件，设定菜单内容，对应的字段是 menu。

1
2
3
4
5
6
7
menu:
  home: / #主页
  archives: /archives #归档页
  #about: /about #关于页面
  #categories: /categories #分类页
  tags: /tags #标签页
  #commonweal: /404.html #404 页面

设置 头像

编辑 主题配置文件， 修改字段 avatar， 值设置成头像的链接地址:

将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在
配置为：avatar: /uploads/avatar.png
或者 放置在 source/images/ 目录下
配置为：avatar: /images/avatar.png

1
avatar: /images/avatar.png

第三部分 使用 Gitpage

新建 Repo

Repo 名必须为 username.github.io
比如我的 Github用户名 actpi，那么新建 Repo 名即为：actpi.github.io

访问测试

新建一个 index.html 文件，里面随便写点内容：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1> Welcome thinkalonely.github.io</h1>
<p> test </p>
</body>
</html>

在浏览器 输入 username.github.io 能正常访问则整个流程完毕。

第四部分 Gitpage 使用自定义域名，以及 Hexo 自动发布

首先要有一个自己的域名，这个不用多说了吧。

第一步

在 Repo 下面新建 CNAME 文件。内容则填自定义的域名：

1
echo blog.actpi.com > CNAME

第二步

在域名商那里，找到 DNS管理, 新建 CNAME 记录，如果打算用顶级域名，name 栏直接填 * ，数据栏 填写 thinkalonely.github.io.
如果和我一样是使用子域名 blog，那么在 name 栏填 blog，数据栏 还是一样填写 thinkalonely.github.io。等几分钟 DNS生效后就可以使用自定义域名访问 Gitpage所在的博客网站了。

第三部 验证

打开命令行窗口，使用以下命令查看 DNS 记录是否生效：

1
2
3
4
5
6
7
$ nslookup blog.actpi.com # 换成你自己的域名

名称:    sni.github.map.fastly.net
Addresses:  2a04:4e42:11::403
          151.101.73.147
Aliases:  blog.actpi.com
          thinkalonely.github.io # 此返回值表示已生效

至此，域名绑定完成。

Hexo 自动发布

编辑 Hexo 站点配置文件:

找到 deploy : type 填写 git ,repo 填写 之前新建的repo的完整路径，branch 填写 分支 默认为 master .如下：

1
2
3
4
5
deploy:
  type: git
  repo: [email protected]:actpi/actpi.github.io.git
  bran
  ch: master

发布

当在本地生成后，使用 hexo deploy 或者 hexo d即可发布到 Git！
如果嫌每次 生成 发布 命令多，可以写个脚本 一键处理！

完！若有疑问，欢迎留言！