Hexo 搭建个人博客

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

本文内容

1. 在 Windows 10 上使用 Hexo 搭建个人博客的过程

2. 通过 Github 将 Hexo 搭建的个人博客发布到网络上

3. 本博客的配置记录

在 Windows 10 上使用 Hexo 搭建个人博客

Hexo 是一个是一个快速、简洁且高效的博客框架，类似于 JekyII 和 Octorpress。但是 Hexo 的实现是基于 Node.js，而 JekyII 和 Octorpress 是基于 Ruby。他们共同的特点都是通过 Markdown 渲染引擎（也可能使用了其它渲染引擎，目前我只知道 Markdown），来解析你用 Markdown 语法所写的博文，并将其生成渲染后的静态网页；同时在解析博文的过程中，会根据你的博文的属性设置，如分类，标签，日期等，在生成的静态网页中嵌入相应的组织结构信息，这些结构信息通过超链接来实现，最终形成通常意义上的博客网站。

安装 Hexo

安装 Git

直接从 Git 官网 下载 Windows 安装文件。下载后，双击运行安装，安装过程中所有选项都使用默认值。安装完成后，在 Windows命令行 输入 git --version 进行测试。如果正确安装，会显示相应的版本号。我当前安装的 Git 的版本号为：git version 2.10.0.windows.1。

安装 Node.js

直接从 Node.js官网 下载 Windows 安装文件。下载后，双击运行安装，安装过程中所有选项都使用默认值。安装完成后，在 Windows 命令行输入 node -v 和 npm -v 进行测试。如果正确安装，会显示相应的版本号。我当前安装的 node 的版本号为 v4.6.0，npm 的版本号为 2.15.9。

安装 Hexo

安装完 Git 和 Node.js 后，直接使用 npm 安装 Hexo，在 Windows 命令行中输入 npm install -g hexo-cli 进行安装。安装开始会出现了一个警告：npm WARN optional dep failed, continuing fsevents@1.0.14
查了一下，fsevents 是只能用于 OSX 系统的 API，并且这里是可选依赖，所以忽略之。安装完成后，在 Windows 命令行输入：hexo -v 进行测试。如果正确安装，会显示相应的版本号。下面是我的 hexo -v 的输出，其中 hexo-cli 标识的是 Hexo 的版本号。

1
2
3
4
5
6
7
8
9
10
11
hexo-cli: 1.0.2
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 4.6.0
v8: 4.5.103.37
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2j

使用 Hexo 在本地搭建个人博客

新建一个目录用于存放博客，如 d:\blog；从 Windows 命令行进入该目录，执行命令 hexo init。该命令执行最后会显示：INFO Start blogging with Hexo!。 如果你看到这一行，说名命令已经执行成功了。然后执行命令 npm install 来安装 Hexo 需要的 npm 包。

在我安装过程中，该命令并没有任何输出，说明并没有安装新的 npm 包。可能在 hexo init 阶段已经安装了目前 Hexo 博客所需要的所有 npm 包。如果后面手动修改配置依赖包（pakage.json 中定义）时，需要重新执行该命令。

实际上，此时基本的博客框架已经完成了。在命令行执行 hexo s，即可在浏览器里通过 http://localhost:4000 来访问初始的博客了。

【注意】

如果看到了 INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop. 但是在浏览器里输入 http://localhost:4000/ 超过一秒没反应，说明 4000 端口被占用了。通常是福熙阅读器的保护进程 FoxitProtect.exe 在占用，也可能是其它进程，可以在 Windows 命令行通过 netstat -ano 命令来查看端口的占用情况。查到相应的进程后，你可以直接结束该进程，再通过 http://localhost:4000/ 来查看博客效果。当然你也可以通过 Hexo server 参数来修改默认的端口，如在命令行输入 hexo s -p 4004，即将服务启动在 4004 端口；然后通过 http://localhost:4004 来查看博客。后文默认服务启动在 4000 端口。

博客文件夹下的目录和文件的含义可已在 Hexo 的官网上查看，上面有详细解释。我们要关注的是 themes 目录和source 目录 以及 source 目录下的 _posts 目录：

  • themes 目录是我们博客的主题目录，里面存放我们博客使用的主题；
  • source 目录是我们博客的内容目录，里面存放博文目录和页面目录（例如关于页面目录）；
  • _posts 目录为博文目录，里面存放的是我们用 markdown 语法书写的博文。

修改博客主题

themes 目录下默认存放的只有经典的 Landscape 主题，上面创建的博客使用的也是该主题。当然，Hexo 有非常多的主题，可参见官方主题网站。下面将博客主题更换为非常流行的 NexT 主题，我当前使用的 NexT 主题版本为 5.0.1。

通过命令行进入博客目录，如 d:\blog；在命令行使用 Git 命令下载 NexT 主题：git clone https://github.com/iissnan/hexo-theme-next themes/next，下载完成后，可以看到 themes 文件夹下多了一个文件夹 next。

在博客目录下，打开 _config.yml 文件进行编辑，找到 theme: landscape 这一行，将 landscape 修改为 next。

通过命令行进入博客目录，首先执行命令 hexo clean，然后执行 hexo s，然后在浏览器里输入 http://localhost:4000 就可以看到 NexT 主题的博客了。

NexT 主题的所有配置可以参见官网说明，后文会详细说明本博客主题的配置信息，这里先把主题的语言配置为中文。

通常主题里面带有博客模板中关键词语（如主页，分类，归档等）的语言配置包，位于主题文件夹下面的 languages 文件夹里面。NexT 主题对应的中文简体文件是 zh-Hans，所以在博客配置文件中（博客目录下的 _config.yml ），修改 #site 下的 language 配置项为：language: zh-Hans，就可以将博客模板中默认的英文关键字改为中文。

添加关于页

通过命令行进入博客目录，执行命令 hexo new page about。该命令执行完成后，在 source 目录下会多一个 about 目录，about 目录 下有一个 index.md 的文件，该文件的内容将显示在关于页面上。在该文件中输入测试语句：关于页面测试。

注：
hexo new 命令可以参考 Hexo 的官方文档说明，上面有详细说明。这里简单说明下：page 为创建内容的类型，about 为创建内容的名字。

修改 NexT 主题的配置文件来显示关于菜单。进入 themes/next 目录下，打开 _config.yml 文件，找到 Menu Settings 段，将注释的 about 打开（删除前面的 # 号），保存。

通过命令行进入博客目录，首先执行命令 hexo clean，然后执行 hexo s，然后在浏览器里输入 http://localhost:4000 就可以看到 about 菜单 了，点击 about 菜单，可以看到 关于页面测试 这几个字。

添加博文

通过命令行进入博客目录，执行命令 hexo new post "My first blog"，注意这里的双引号（含有空格的标题需要用双引号）。该命令执行完成后，在 source/_posts 目录下会新出现一个文件 My-first-blog.md，编辑 My-first-blog.md 文件，将头部 tags 后面添加标签列表为：tags: [self-blog,test]；并且在 tags 上面添加一行 categories: blog 类别说明。正文输入：测试博文。

注：
因为这里添加了类别说明，我们需要在 NexT 主题的配置文件中打开分类菜单：进入 themes/next 目录下，打开 _config.yml 文件，找到 Menu Settings，将注释的 categories 打开（删除前面的 #号），保存。

通过命令行进入博客目录，首先执行命令 hexo clean，然后执行 hexo s，然后在浏览器里输入 http://localhost:4000 就可以看到分类菜单、标签菜单和新发表的博文了。

【注意】
此时点击分类菜单和标签菜单，会看到 Cannot GET /categories/ 和 Cannot GET /tags/，NexT 主题需要自己配置分类页和标签页，下文说明。

添加分类页和标签页

在这里先说明一下，使用 NexT 主题时，遇到的各种问题或者想添加的一些功能，都可以先到 NexT 主题的 Git Wiki 页去查找一下，通常都会有的。如果没有，再尝试自己解决，当然，解决后，能把问题和解决方法放到 Git Wiki 页面 最好。

Hexo 命令都需要在博客目录执行，如果未注明，默认为已通过命令行进入博客目录。

添加分类页

参考 NexT 主题的 Git Wiki 页———创建分类页，为了便于理解，增加了一些解释。由于上文中已经打开了分类菜单，所以这里的第三步是不需要的。

  1. 新建一个页面，命名为 categories
    执行命令 hexo new page categories，该命令执行完成后，在 source 目录 下会多一个 categories 目录，categories 目录 下有一个 index.md 的文件。

  2. 编辑刚新建的位于 categories 目录 下的页面 index.md，将页面的类型设置为 categories，主题将自动为这个页面显示所有分类。

    1
    2
    3
    4
    5
    ---
    title: categories
    date: [这里为创建日期，自动生成]
    type: "categories"
    ---

    注意：如果启用了多说或者 Disqus 评论功能，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

    1
    2
    3
    4
    5
    6
    ---
    title: categories
    date: [这里为创建日期，自动生成]
    type: "categories"
    comments: false
    ---

  3. 在菜单中添加分类链接。编辑主题的 _config.yml，将 menu 中的 categories: /categories 注释（# 号）去掉，如下:

    1
    2
    3
    4
    5
    6
    menu:
        home: /
        categories: /categories
        archives: /archives
        tags: /tags
        about: /about
添加标签页

参考 NexT 主题的 Git Wiki 页———创建标签云页面，为了便于理解，增加了一些解释。由于上文已经打开了标签菜单，所以这里第三步是不需要的。

  1. 新建一个页面，命名为 tags
    执行命令 hexo new page tags，该命令执行完成后，在 source 目录 下会多一个 tags 目录，tags 目录下有一个 index.md 的文件

  2. 编辑刚新建的位于 tags 目录下的页面 index.md，将页面的类型设置为 tags，主题将自动为这个页面显示标签云。

    1
    2
    3
    4
    5
    ---
    title: tags
    date: [这里为创建日期，自动生成]
    type: "tags"
    ---

    注意：如果启用了多说或者 Disqus 评论功能，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

    1
    2
    3
    4
    5
    6
    ---
    title: tags
    date: [这里为创建日期，自动生成]
    type: "tags"
    comments: false
    ---

  3. 在菜单中添加标签链接（默认已添加）。编辑主题的 _config.yml，确认 menu 中的 tags: /tags 未被注释掉，如下:

    1
    2
    3
    4
    5
    6
    menu:
        home: /
        categories: /categories
        archives: /archives
        tags: /tags
        about: /about

博客个性化配置

所有的 NexT 主题配置都可以到 主题官网 和 Git Wiki 里查找设置。这里只列举使用到的个性化配置。

修改博客标题、子标题、描述和作者

进入博客目录，修改博客配置文件 _config.yml，将 #Site 项下的 title 修改为你要设置的博客标题，subtitle 修改为你要设置的博客子标题，description 修改为你要设置的描述，author 修改为你要设置的作者名称。

设置侧边栏头像

进入博客目录，修改博客配置文件 _config.yml，在 #Site 项下新增字段 avatar， 值设置成头像的链接地址。头像链接地址可以为：

1.完整的互联网 URL，例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460
2.站点内的地址，下面两种都可以：
(1) /uploads/avatar.jpg：需要将你的头像图片放置在站点的 source/uploads/（可能需要新建 uploads 目录）；
(2) /images/avatar.jpg：需要将你的头像图片放置在主题的 source/images/ 目录下。

修改 Menu 顺序

博客中菜单的顺序和主题配置文件中 menu 项下的子项顺序一致。所以，如果要修改博客菜单的顺序，直接修改主题配置文件 menu 项下的子项顺序即可。

博文中添加阅读全文链接

在博文中需要设置全文链接的地方，插入 <!--more--> 即可。

设置 Creative Commons 协议

进入博客目录，修改博客配置文件 _config.yml，在 #Site 项下新增字段 creative_commons， 值设置成以下的一种：

Creative Commons 值 含义
by 署名
by-nc 署名-非商业性使用
by-nc-nd 署名-非商业性使用-禁止演绎（即不能修改原作品，不能再创作）
by-nc-sa 署名-非商业性使用-相同方式共享
by-nd 署名-禁止演绎（即不能修改原作品，不能再创作）
by-sa 署名-相同方式共享
zero 无任何限制

通常使用的值为：by-nc-sa，_config.yml 中的配置为：

1
creative_commons: by-nc-sa

设置站点建立时间

如果不设置站点建立时间，默认网站底部显示Copyright为当前年份：如@2016，如果设置了站点建立时间，则会显示为建站年份-当前年份，如：@2013-2016。

编辑主题配置文件，查找since字段，将字段前面的#号去掉，如：

1
#since: 2015  --->  since: 2015

设置网站 favicon

将 favicon.ico 直接放到博客目录的 source 文件夹下即可。如果浏览器没有显示，首先检查是否主题配置文件已经设置了 favicon 字段，并且该字段的值是正确的。如果还不能显示，可以使用 hexo clean 清除数据库，使用 hexo s 重新启动服务。此时，如果还是没看到 favicon，则有可能是浏览器的缓存问题，清除浏览器数据，关闭浏览器，然后重新打开，就可以看到了。

更换主题 scheme

NexT 主题有三种 scheme（通俗的说，就时有三种外观布局），详细信息请参见主题选择官方文档，这里给出简单的描述。

NexT 主题可以通过修改主题配置文件中 scheme 字段来切换外观。在主题配置文件中搜索 Scheme Settings，可以看到已经写好的三个外观配置，默认的 scheme 为 Muse。根据个人爱好，可以选择相应的外观。本博客使用的是默认主题。

添加第三方服务，如评论，统计和站内搜索等

使用第三方服务通常需要你有实际的站点，即在互联网上可以访问的站点，本地运行的博客基本不可以添加第三方服务。需要使用相应的第三方服务时，请参考 NexT 主题官网的第三方服务页

后面在将本地博客通过 Github 发布为实际站点后，将说明如何添加评论，统计和站内搜索功能。

通过 Github 将 Hexo 搭建的个人博客发布到网络上

注册 Github 账号，已经有了请忽略

注册时，最好将用户名设置为比较有意义的名称，如你的英文名，网名等等。注册过程中的选项全部默认即可。如果你对 GitHub 比较陌生，可以看看 stormzhang 的从0开始学习 GitHub 系列

新建一个 Repository 来存放博客

因为是用来做博客，所以仓库名字（Repository name）有固定格式，必须为： [usename].github.io。例如，我的用户名为 fogmoon，这里的仓库名字就必须为 fogmoon.github.io，其它选项默认即可。

将本地博客提交到 GitHub 博客目录里

安装提交需要的 npm 包

hexo-deployer-git

通过Windows命令行进入博客目录，执行如下命令：

1
npm install hexo-deployer-git –save

编辑博客目录配置文件的deploy字段

进入博客目录，编辑 _conifg.yml 文件，找到 #Deployment 段，设置 deploy 字段下的内容如下所示：

1
2
3
type: git
repo: git@github.com:[username]/[username].github.io.git
branch: master

其中 type 设置为 git，repo为上面刚创建的 repo 的 SSH地址(替换username为你的用户名)。注意这里一定是 SSH地址，不是默认显示的 HTTPS地址。branch 设置为 master.

更多部署配置参考hexo部署指导

配置 SSH 密钥

将本地的博客提交到 git repo 的 SSH 地址，需要设置一下 SSH Key。

SSH Key 可以实现无密码的安全登录，实际上 SSH Key 本身就是通信密钥，包含一个公开密钥和一个私有密钥。密钥都是通过 rsa 加密算法得到的，所以他们的形式为：id_rsa.pub 和 id_rsa。公开密钥放在服务器端，私有密钥放在客户端，就可以实现免密码的安全登录。更多信息可以参考SSH原理与运用。这里简单描述下 SSH Key 的生成和设置过程。

生成 SSH 密钥对

在任意目录右键点击，在弹出的右键才当中，点击 Git Bash Here 菜单（该菜单由上面安装的Git提供）。该菜单会弹出来一个由 MINGW 模拟 Linux shell 的命令窗口。在该窗口中输入如下命令，并按回车：

1
cd ~/.ssh

注：该命令实际对应于 Windows 命令行 cd C:Users/[你的Windows用户名]/.ssh，~ 表示用户目录。

如果显示：

1
bash: cd: /c/Users/[你的Windows用户名]/.ssh: No such file or directory

说明之前没有配置过 SSH key（如果已经配置过，可以跳过下面的生成密钥过程），则输入如下命令，并按回车来生成密钥：

1
ssh-keygen -t rsa -C "[注释内容，一般为邮件地址，会显示在公钥的末尾，用作标识]"

如：

1
ssh-keygen -t rsa -C username@github.io

【注意】：命令执行过程需要按三次回车完成交互，都为默认值

#1：询问密钥的存放位置，直接回车，默认位置即可
Enter file in which to save the key (/c/Users/[name]/.ssh/id_rsa)

#2：询问输入密语，为了实现自动登陆，当然不要密语，直接回车
Enter passphrase (empty for no passphrase):

#3：再次提示输入密语，再次直接回车
Enter same passphrase again:

最后会显示密钥存放位置信息标识密钥已经成功生成。
可以继续执行以下命令来校验：

1
2
$ cd ~/.ssh   #进入SSH目录
$ ls          #显示目录内容列表

这时可以看到 id_rsa 和 id_rsa.pub 两个文件。

或者直接通过 windows 文件资源管理器进入 C盘（系统盘，根据你的系统安装盘来定）:\用户\[你的用户名]\.ssh 来查看，
如我本机的为 C:\Users\Fogmoon\.ssh

将公开密钥添加到 GitHub 服务器

登录 GitHub，点击右上角个人小图像，在弹出菜单中点击 Settings 菜单项。在打开的 Personal settings 页左侧菜单列表中点击 SSH and GPG keys。

在右侧打开的页面中的 SSH keys 面板，点击 New SSH key；在显示的 SSH key 信息输入面板 中输入信息：

1
2
3
Title: 输入 SSH key 的标题，这里可以输入 Hexo-home-laptop 或者其它标题（建议输入能让自己明白是哪台电脑的标题，方便以后管理）

Key:   将上一步生成的公开密钥（id_rsa.pub）的内容复制粘贴到这里。

然后点击 Add SSH key 即可完成添加。

注意：id_rsa.pub 可以通过写字板打开，或者在生成 SSH key 密钥的 Git Bash 中通过命令 $ cat id_rsa.pub 显示内容，然后进行复制粘贴操作。

添加 github.com 为授信主机

在 Git Bash 命令行中输入如下命令：

1
$ ssh -T git@github.com

按回车，会显示如下询问信息：

1
2
The authenticity of host 'github.com (192.30.253.112)' can't be established.
RSA key fingerprint is SHA256:[ SHA 串].Are you sure you want to continue connecting (yes/no)?

输入 yes

此时会显示

1
Warning: Permanently added 'github.com,192.30.253.112' (RSA) to the list of known hosts.

github.com 将会被视为授信主机加入已知主机文件 known_hosts。该文件在 .ssh 目录下，和密钥文件在一起。

如果同时看到如下信息：

1
Hi [你的GitHub用户名]! You've successfully authenticated, but GitHub does not provide shell access.

则证明你已经成功配置好 GitHub SSH 访问密钥。如果没有看到，或者出现任何错误提示，请仔细检查你的操作步骤。

提交博客到 GitHub

提交博客到 GitHub 实质上使用的是 Git 命令。在使用 Git 命令进行提交前，需要首先配置你的提交用户名和邮箱，这两项信息用于标识你的提交。事实上 Git 会将你的用户名和邮箱永远嵌入到你的提交信息中。

可以在 windows命令行 或者 Git Bash 中执行以下命令来进行配置：

1
2
3
4
# 配置用户名（任意名字都可，用于提交，和GitHub无关，可以一致）
git config --global user.name "your name to submit"
# 配置邮箱（任意邮箱都可，用于提交）
git config --global user.email "your email to submit"

例如：

1
2
git config --global user.name "fogmoon"
git config --global user.email fogmoon@xxx.com

注意这里的 global 选项，该选项意味者你所有的 git 提交都会使用该名字和邮箱。如果你希望在特定的 Git 项目中使用特定的用户名，则通过命令行或者 Git Bash 进入该 Git项目目录，运行该命令但不要加 global选项。通常（也是好的习惯）我们 Git 提交都会使用相同的名字，如我们的昵称或者英文名等，所以直接用 global选项 即可。

配置完成后，可以在相同的命令行下通过 git config –list 命令查看新添加的设置。

配置完 Git 的提交用户名和邮箱后，就可以将博客提交到 GitHub 上了。通过 windows 命令行 或者 Git Bash 进入博客目录，执行如下命令：

1
2
hexo clean
hexo d		#deploy 简写为d

命令执行后，如果看到最后显示如下信息：

1
INFO  Deploy done: git

说明博客已经被提交到你的 GitHub 的 [username].github.io 仓库中。你可以登录到 GitHub 中查看该仓库，也可以在浏览器里输入 [username].github.io 来查看你的博客（可能需要等一会儿，视你的网速而定）。

之后，你无论添加文章还是删除文章，都可以通过 hexo d 来进行部署更新博客。如果出现格式错误或者不一致，先执行 hexo clean，再执行 hexo d 来部署。

到此，你的博客已经成功通过 GitHub 部署到网络上。

修改博客站点地址

将博客部署到网络上后，需要在博客配置文件中更新博客站点地址。

进入博客目录，修改博客配置文件 _config.yml，将 #URL 项下的 url 设置为你的站点地址。例如：

1
2
3
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://fogmoon.github.io

注意：该地址可能被你需要的第三方服务使用，如多说评论系统等，如果更新，可能导致相应的服务出现问题，如博文的评论等。

修改完配置文件后，需要重新部署，通过 windows 命令行 或者 Git Bash 进入博客目录，执行如下命令：

1
2
hexo clean
hexo d		#deploy 简写为d

配置个人域名

博客发布到 GitHub 后，可以通过 username.github.io 进行访问，如 fogmoon.github.io 就可以访问我的博客。那么，如何使用自己专属的域名进行访问呢？

首先你得购买一个域名，比如我购买的 fogmoon.com（目前我的博客可以通过 fogmoon.com 访问）。

购买域名

现在有N多的域名注册商，国外比较好的是 Godaddy，国内比较好的是万网（已经被阿里云收购，成为阿里云的一个产品）。

如果你英文比较好，可以尝试通过 Godaddy 购买域名，Godaddy 支持支付宝付款，购买也比较方便，偶尔还会有折扣活动，加上一些优惠码，可能会非常便宜，几十块钱就可以搞定。注意：续费通常没有折扣，会贵一点。

当然，如果你在国内，我建议你通过万网购买(我的域名 fogmoon.com 就是在万网购买的)。过程非常简单，注意，不要购买 CN 后缀的域名（需要备案才能使用），其它后缀根据你个人爱好都可以购买。注意，这里你仅仅是想购买一个域名用于访问部署在 GitHub 上博客，如果你想了解域名，备案和主机空间等的相关信息，可以自行 Google 之。

域名解析配置

【更新-2016-11-11】看完原文后，再看更新啊！！！

由于 GitHub 不推荐使用 CNAME 记录创建根域名（不带主机头的域名，如 fogmoon.com，主机记录为 @）,该记录会影响该域名上的其它服务，如邮箱服务（详细信息参考官网说明）；本文之前在万网上的解析解析记录已更新为：

记录类型 主机记录 记录值 （其它项默认即可）
A @ 192.30.252.153
A @ 192.30.252.154
CNAME www fogoon.github.io

如果你的域名不需要配置自定义邮箱，如（`i@fogmoon.com`），也不提供其它服务，只是作个人博客，则可以不用修改。

现在假定你已经有了一个域名，如 fogmoon.com，不管是通过 Godaddy 还是万网购买的。接下来就是要让你的域名可以访问你的博客：即在浏览器里输入你的域名，就和输入 username.github.com 一样显示你的博客。该过程要涉及到域名解析的知识，想深入了解，请 Google 之，我在这里简单描述一下。

你部署在 GitHub 服务器上的博客是网络上的一个资源，我们如何通过浏览器来访问这个资源呢?

我们得知道这个资源的准确位置（网络上通常是IP地址）；
或者
我们知道这个资源的一个名字，这个名字已经知道了这个资源的准确位置； 比如 fogmoon.github.io 就是我的博客的一个名字，显然它是知道我的博客的准确位置的，因为已经可以访问了嘛。

比如，我们使用 地图APP 导航去天安门，我们可以直接输入天安门的经度纬度（当然没人会这么傻，最主要是太难记）来进行导航， 也可以直接输入天安门来进行导航（事实上，是地图应用在内部将名字作了到经纬度的转化）。

域名解析就是让我们申请的域名对应到我们的博客资源的准确位置；或者对应到我们博客资源的一个已知名字的过程。

其中资源的准确位置对应于域名解析的 A记录，A 是 Address（地址）的简写，对应于 IP地址，而资源的名字对应于域名解析中的 CNAME记录，C是 Canonical（规范的）简写，通常 CNAME 也被称为别名记录。

我们通过域名解析提供商，如 Godaddy，万网，DNSPod，对我们的域名进行解析，就需要录入相应的 A记录 和（或者）CNAME记录。

当然如何使我们的域名解析在整个网络中都是可知的，就涉及到 DNS服务 的知识，想深入了解的可以自行 Google 之。简单来说，域名解析提供商会将我们录入的 A记录 和 CNAME记录 存入域名节点服务器的数据库，供整个网络查找和缓存。

不同的域名解析提供商给域名添加解析记录的方式大同小异，如果实在不会，网上有具体的图文教程可以查到，下面给出我在万网上为 fogmoon.com 添加的解析记录：

记录类型 主机记录 记录值 （其它项默认即可）
CNAME @ fogmoon.github.io
CNAME www fogmoon.github.io

主机记录（英文缩写为 RR, Resource Record）填写为 @，表示对根域名解析（主机头为空的域名，主机头可以为 www，bbs, blog, mail 等），即对 fogmoon.com 的解析（如果你选用的域名解析服务提供商不支持 CNAME记录 来解析根域名，即 CNAME 的主机记录不能为 @，那么你只能使用 A记录 来解析根域名，看下文）。

主机记录填写为 www 表示对 www主机头 的解析，即对 www.fogmoon.com 的解析，这样通过 fogmoon.com 和 www.fogmoon.com 都可以访问我的博客。

我这里只添加了 CNAME别名记录，并没有添加 A记录，因为 A记录 对应于 GitHub的服务器IP地址，这个 IP 地址有时候会改（当然可能性比较小），导致解析失效。此外，CNAME别名记录 的解析过程是经过一次转换的，即 fogmoon.com 先解析为 fogmoon.github.io，接着从 fogmoon.github.io 解析返回 GitHub服务器的IP。所以可能会稍有延迟，但基本可忽略不计。

如果想添加 A记录，GitHub服务器的IP为192.30.252.153或者192.30.252.154，需要注意：

1.如果同时添加 A记录 和 CNAME记录，则 A记录 和 CNAME记录 不能有同名主机记录。即如下是 不合法的：

记录类型 主机记录 记录值
CNAME @ fogmoon.github.io
A @ 192.30.252.153

或者

记录类型 主机记录 记录值
CNAME www fogmoon.github.io
A www 192.30.252.153

实际上，域名解析服务提供商，也不会允许你填写相同主机头的 A记录 和 CNAME记录，另外，相同主机头的两个 CNAME记录 也是不允许的。这是由域名服务协议（DNS Protocol）规定的，想深入了解，可以参考 Quora 上的回答 或者 RFC1034 3.6.2节。

2.多个 A记录 允许存在相同的主机记录，即如下时合法的：

记录类型 主机记录 记录值
A @ 192.30.252.153
A @ 192.30.252.154

或者

记录类型 主机记录 记录值
A www 192.30.252.153
A www 192.30.252.154

多个 A记录 拥有相同的主机记录，说明对应的资源有多份拷贝，位于不同的服务器上，访问任何一个服务器（A记录记录值），都可以找到该资源。此时 DNS解析服务会使用 DNS轮询（Round-Robin）来确定使用哪条 A记录：DNS服务器 将解析请求按照 A记录的顺序，随机分配 到不同的 IP 上，这样可以完成简单的负载均衡。

简单总结下：

  • A记录 的作用是把一个域名解析到一个 IP地址，而 CNAME记录 是把域名解析到另外一个域名，这个域名通常称为别名。事实上，别名也要有 A记录，所以 CNAME记录 只是比 A记录 多一步到别名的解析而已。

  • CNAME记录 的好处是，可以方便的变更服务器 IP地址。如果一台服务器有10个网站，这10个网站的域名都通过 CNAME记录 解析到了同一个别名，那么，当服务器 IP变更 时，只需要变更别名的 A记录 就可以了。

如果你选用的域名解析服务提供商不支持 CNAME记录 来解析根域名，即 CNAME 的主机记录不能为 @，推荐的解析方法如下：

记录类型 主机记录 记录值 （其它项默认即可）
A @ 192.30.252.153
A @ 192.30.252.154
CNAME www [username].github.io

注意，此时你使用域名访问你得博客时，会看到 GitHub 的 404页面，即提示你访问的页面不存在。事实上还需要一步配置，看下文。

博客配置

配置完域名解析后，我们并不能直接使用域名访问我们的博客；即使我们只使用了别名解析。为什么呢？

由于我们的博客只是寄存于 GitHub服务器，即使用了 GitHub 免费为我们提供的静态网站托管功能，官方称为 GitHub Pages。

如果只使用了 A记录 来解析域名，我们访问的是 GitHub的服务器，那么 GitHub服务器 如何知道我们要访问的是哪一个资源呢（如何访问我们的博客呢？），事实上，有成千上万的博客都托管在 GitHub 上。

为了识别我们的域名对应的博客资源，GitHub 需要我们在个人博客的最外层（根目录下）新建一个 CNAME 文件（注意：文件名为 CNAME，没有任何后缀），文件中写入你的域名：
如：fogmoon.com 或者 www.fogmoon.com

  • 如果使用 fogmoon.com，访问 www.fogmoon.com 会重定向为 fogmoon.com
  • 如果使用 www.fogmoon.com，访问 fogmoon.com 会重定向为 www.fogmoon.com

这是因为：GitHub Pages 服务器会自动实现根域名（apex domain）和子域名（subdomain）之间的跳转，前提是你在域名配置中同时配置了主机记录 @（对应 fogmoon.com）和 www（对应 www.fogmoon.com），详细信息可参考官网文档 和 stackoverflow。

这样，当我们通过域名访问 GitHub 服务器的时候，通过 HTTP请求头 中的域名记录，就可以找到我们的博客了。

那么，为什么只使用了 CNAME别名记录 进行域名解析，也不可以直接访问呢（同样要添加 CNAME 文件才能访问）?
明明 CNAME记录 填写的是可以直接访问的博客别名，如 fogmoon.github.io。

注意，在上一节配置个人域名中，已经说明了 CNAME记录 实际上最终得到的也是一个 IP地址。域名解析的最终结果都是 A记录对应的IP地址，所以，不管 CNAME 中填写的别名是什么，我们最终得到的其实还是 GitHub服务器的IP地址。所以，CNAME 文件当然也是需要的。

添加CNAME文件步骤：

进入博客目录下的 source目录 下，新建一个文件 CNAME，注意没有后缀名（如果你不确定有没有后缀名，Google 或者百度如何查看文件后缀名），写入你的域名，如：fogmoon.com，保存关闭。

通过 windows 命令行 或者 Git Bash 进入博客目录，执行如下命令：

1
2
hexo clean
hexo d		#deploy 简写为d

命令执行后，如果看到最后显示如下信息：

1
INFO  Deploy done: git

同时检查你在 GitHub 上的博客仓库，确认 CNAME 文件确实已经存在，内容也是你自己的域名。此时，你可以通过域名来访问你的博客了。

注意：配置完域名后，同样要修改博客站点地址，并重新进行部署。

进入博客目录，修改博客配置文件 _config.yml，将 #URL 项下的 url 设置为你的站点地址。例如：

1
2
3
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://fogmoon.com

再次强调：该地址可能被你需要的第三方服务使用，如多说评论系统等，如果更新，可能导致相应的服务出现问题，如博文的评论等。

修改完配置文件后，需要重新部署，通过 windows 命令行 或者 Git Bash 进入博客目录，执行如下命令：

1
2
hexo clean
hexo d		#deploy 简写为d

本博客的配置

使用第三方服务

NexT主题官网对如何使用第三方服务有专门的说明，这里记录以下我添加的第三方服务，包括评论，文章浏览数，站内搜索和打赏功能。

评论系统

【更新-2017-5-21】看完原文后，再看更新啊！！！

由于 多说于2017-06-01要关停服务，本博客的评论系统修改为 DISQUS（国内用户使用可能需要 VPN 或其他方法）：

1.注册DISQUS账号
2.进入个人账户页面，验证个人邮箱，并设置 Uername
3.进入网站管理创建页面，输入网站名字，点击 Create Site，进入 Install settings 页
4.在 Install settings 页，直接点击 Configure Disqus选项，在右侧 Website URL 输入你的 博客域名，需要添加 http，例如：http://yourblog.com/，其他选项根据自己的博客做相应设置，然后点击 Complete Setup
5.在 Setup Complete 页，点击 Configure your site's community settings，选择你的博客，进入设置页面 Configure Disqus for Your Site
6.在 Configure Disqus for Your Site 页面，可以设置评论头像（Default Commenter Avatar），可以设置 DISQUS 显示主题（Appearance），可以设置显示语言（Language）等等。但最重要的是这里不可设置的 Shortname，它唯一对应你的网站的 Disqus ID，也是博客评论系统配置需要的 ID
7.进入 themes/next 目录下，打开 _config.yml 文件，找到 # Duoshuo ShortName，将 duoshuo_shortname 注释掉（在前面添加 # 号）；找到 # Disqus，将 disqus_shortname 注释打开（去掉前面的 # 号），后面输入你的博客对应的唯一的 Disqus ID，上一步提到的不可设置的 Shortname；
8.通过 windows 命令行 或者 Git Bash 进入博客目录，使用 hexo clean 和 hexo d 命令进行部署
9.再次打开允许评论的博文，就可以看到最下面的 Disqus 评论框了，如果没有看到，可以多刷新几次

NexT 支持多说和 DISQUS 评论系统。而当你同时设置了 多说 和 DISQUS 时，NexT 主题优先选择多说。 同时，NexT 内置了一套多说的样式。

注意：多说是国内的评论系统，DISQUS 是国外的。两者的区别是使用的人群和加载的速度。如果你的博客面向的是中国的读者，建议选择多说；相反，如果你的博客面向的是海外用户，则优先选择 DISQUS。这并不是绝对的，评论系统的配置和切换都是很简单的，唯一会损失的是切换评论系统时，已有的评论会消失。所以，你可以自己尝试下两种评论系统，包括评论样式的美观度，加载速度的快慢等，之后再做选择。

我的博客使用的是多说评论系统，下面是配置多说系统的过程。

进入多说官网，点击 我要安装 按钮，提示需要登录。多说本身不能注册，只等通过第三方社交账号关联登录（多说本来就是社会化评论系统）。

在弹出的社交应用面板中，选择你愿意关联为多说账号的社交应用。注意在选择的时候，看清楚关联后多说可以获取到的权限：如微博的分享评论到微博之类的。根据你的需要，进行选择。

我选择的是 QQ关联登录（这里需要你在电脑上登录了要关联的QQ），权限只选择了必要的一项：获取你的昵称，头像和性别。
点击QQ头像，授权后进入创建站点面板。

填写以下必填内容：

1
2
3
4
5
站点名称：你的站点的名称，如 Fogmoon’s Blog
站点地址：你的站点地址，如 http://fogmoon.com
多说域名：你的多说域名，填写的内容相当于你的多说用户名，是Hexo博客配置多说时，需要的多说用户名（duoshuo_shortname） ，如我填写的是fogmoon，整个多说域名是：http://fogmoon.duoshuo.com
电子邮箱：你的电子邮箱
QQ号和手机号是选填的，我没有填写，直接点击创建，会进入多说的后台，暂时不需要其它操作。

由于 NexT 主题本身是支持多说评论系统的，所以只需要在 NexT 主题的配置文件中，设置 多说的用户名（duoshuo_shortname）就可以了。

进入 themes/next 目录下，打开 _config.yml 文件，找到 # Duoshuo ShortName，将注释的 duoshuo_shortname 打开（删除前面的#号），后面输入你的多说用户名，例如：

1
2
# Duoshuo ShortName
duoshuo_shortname: fogmoon

注意冒号后有一个空格。

保存后，通过 windows 命令行 或者 Git Bash 进入博客目录，使用 hexo clean 和 hexo d 命令进行部署。部署成功后，你的博客就可以使用多说评论系统了。

对于你的博文头部（markdown 格式）加了 comments: true 的博文，在浏览器中就可以看到博文页面底部添加了多说评论框。如果没有看到，可以稍等一会儿，刷新浏览器就可以看到了（我等了大概2~3分钟）。

配置文章浏览数

NexT 支持多种第三方统计功能，在 NexT 主题的第三方服务集成页的数据统计与分析小节有详细说明。

配置文章浏览数通常使用 NexT 提供支持的 不蒜子统计 和 LeanCloud统计，但是不蒜子统计不支持首页显示阅读次数，所以这里选择使用 LeanCloud统计。

下面是我配置LeanCloud统计的过程，参考了 Doublemine的配置说明。

  1. 注册LeanCloud账号
  2. 注册成功后，点击【创建一款新的应用】或者 进入控制台，点击【创建一款新的应用】
  3. 输入新应用名称，例如：BlogStatistics，不要勾选复选框，点击【创建】
  4. 在应用框上点击最下侧的【存储】菜单
  5. 在存储页，点击左侧数据后面的【齿轮图标】，在弹出菜单中点击【创建class】
  6. Class 名字必须输入为 Counter，下面选项勾选最后一个【无限制】，其它项默认，点击【创建class】
  7. 创建完成后（左侧数据栏中显示 Counter），点击顶部组件后面的【设置】菜单
  8. 在设置界面，点击左侧分类菜单中的【应用Key】菜单，在右侧会显示 App ID 和 App Key

在NexT主题配置文件 themes/next/_config.yml 中，找到 leancloud_visitors 节，将 #<app_id> 和 #<app_key> 分别替换为上述 App ID 和 App Key，同时将 enable 的值修改为 true，例如：

1
2
3
4
leancloud_visitors:
   enable: true
   app_id: 你的 leancloud App ID
   app_key: 你的 leancloud APP Key

保存配置文件，通过 windows 命令行 或者 Git Bash 进入博客目录，使用 hexo clean 和 hexo d 命令进行部署。部署成功后，你的博客就可以使用文章阅读量统计的功能了。

注意：

  1. 记录文章访问量的唯一标识符是文章的发布日期以及文章的标题，因此请确保这两个数值组合的唯一性，如果你更改了这两个数值，会造成文章阅读数值的清零重计。
  2. 所有的文章阅读量统计信息都存储于之前新建的 Counter 表（上文称作 Class）中，可以点击 Counter 表进行查看，修改和删除。但建议不要轻易修改，除非你清晰的知道修改的意义。
  3. 上述配置会导致 App ID 和 App Key 暴露在外，容易被别有用心之人利用，为了确保 App ID 和 App Key 只应用于我们自己的博客，建议开启 Web安全选项。这样只能通过我们自己的域名才有权访问后台统计数据。

Web安全选项 配置过程：

  1. 进入应用，点击顶部组件后面的【设置】菜单
  2. 点击左侧【应用Key】菜单下面的【安全中心】菜单
  3. 在【安全中心】菜单页的Web安全域名中输入你的博客域名，例如：http://fogmoon.com，点击保存即可。

配置站内搜索

NexT 支持的搜索服务有 Swiftype、 微搜索、Local Search 和 Algolia。微搜索处于 TBD（To be done，待完成状态），相应的官网也无法打开，说支持，但目前无法使用。Swiftype 和 Algolia，和多说评论及 Leancloud 统计服务一样，都是依赖于第三方提供服务。所以需要注册，配置相应的访问插件（伟大的 Hook 插件模式）。

Swiftype 是 NexT 主题目前完全支持的（主题版本 5.0.1），Algolia 虽然要到 5.1.0 才可以正式支持（目前在 GitHub上的 5.1.0 的分支上），但是目前也可以配置使用，网上有相应的教程，可以参考教程 NexT主题集成Algolia搜索插件。但是目前 Swiftype 需要收费了，Algolia 貌似也要收费，并且配置起来比较麻烦。所以，这两个搜索服务就直接无视了。

Local Search 名如其义，就是本地搜索，将博客文件作为数据源，生成相应的查找索引文件，用于搜索。我的博客中的搜索功能使用的就是该服务。下面是我参考 NexT主题文档配置Local Search 官方文档，配置我的博客搜索功能的过程：

  1. 安装 hexo-generator-searchdb
    通过 windows 命令行 或者 Git Bash 进入博客目录，执行如下命令：

    1
    npm install hexo-generator-searchdb --save

  2. 进入博客目录，修改博客配置文件 _config.yml，将下面内容添加到配置文件末尾（其它位置也可以）：

    1
    2
    3
    4
    5
    6
    7
    # Search
    ## Local search for NexT theme
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  3. 通过 windows 命令行 或者 Git Bash 进入博客目录，使用 hexo clean 和 hexo d 命令进行部署。部署成功后，你的博客就可以使用搜索功能了。

配置打赏功能

NexT 主题本身集成了打赏功能，直接在主题配置文件中进行配置就可以，参见 NexT主题开启打赏功能。

下面是我配置打赏功能的过程：

  1. 进入博客目录下的 source 文件夹
  2. 新建一个名字为 images 的文件夹
  3. 将你的微信收款二维码图片和支付宝二维码收款图片放到该文件夹下。如：ali_reward.jpg 和 wx_reward.jpg

  4. 进入 themes/next 目录，编辑主题配置文件：_config.yml，在合适的位置添加打赏配置信息，如我的配置添加在 Schemes 配置信息下面：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Schemes
    scheme: Muse
    # scheme: Mist
    # scheme: Pisces

    # reward
    reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
    # 你的微信打赏二维码图片名字
    wechatpay: /images/wx_reward.jpg
    # 你的支付宝打赏二维码图片名字
    alipay: /images/ali_reward.jpg

  5. 通过 windows 命令行 或者 Git Bash 进入博客目录，使用 hexo clean 和 hexo d 命令进行部署。部署成功后，在你的博文下部就可以看到打赏按钮了（可能有点延时，如果没看到，等上一分钟，然后多刷新几次），点击打开，就是你设置的微信和支付宝的收款图片。

博客样式定制

博客修改的样式记录：

网站标题的宽度修改

1
2
3
4
5
6
blog\themes\next\source\css\_common\components\header\ site-meta.styl
.brand {
    ...
    padding: 0 40px;  ---->   padding: 0 70px;
    ...
}

Local Search 搜索框的修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
blog\themes\next\source\css\_common\components\third-party\ localsearch.styl
.popup {
    ...
    padding: 3px 0 0 10px;   ----> 	  padding: 3px 10px 0 10px;
    ...
}
#local-search-input {
    margin-bottom: 10px;
    width: 50%;   ---->   width: 100%;
}

.popup-btn-close {
    ...
    right: 14px;   ---->   right: 0px;
    padding-right: 14px;
    padding-left: 10px;
    background-color: #fff;
    ...
}

多说评论显示博主信息，浏览器和操作系统信息

参考NexT主题官方文档中的多说UA配置，设置如下：

1
2
3
4
5
6
7
8
9
blog\themes\next\_config.yml:
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: 63397588391050XXXXX
  admin_nickname: 【博主】

其中 user_id 通过登录多说获取：
登录多说 — 点击最右侧你的用户名 — 点击弹出菜单中的个人资料 — 点击头像右侧（设置上方）的你的用户名 — 浏览器地址栏显示信息中的数字串就是你的 user_id，例如：http://duoshuo.com/profile/6339758839105022222/，其中 6339758839105022222 就是你的 user_id。

修改配置文件后，需要通过 windows 命令行 或者 Git Bash 进入博客目录，使用 hexo clean 和 hexo d 命令进行重新部署。

字体设置

参考 NexT主题官方文档中字体设置说明，设置如下：

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
blog\themes\next\_config.yml:
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
#     light, light italic, normal, normal intalic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  host:

  # Global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: Monda

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  # Fallback to `global` font settings.
  headings:
    external: true
    family: Roboto Slab

  # Font settings for posts
  # Fallback to `global` font settings.
  posts:
    external: true
    family:

  # Font settings for Logo
  # Fallback to `global` font settings.
  # The `size` option use `px` as unit
  logo:
    external: true
    family: Lobster Two
    size: 24

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: PT Mono

博文统一添加版权说明

blog\themes\next\layout\_macro\ post.swig 文件 189 行左右：

1
2
3
{% else %}
    {{ post.content }}
{% endif %}

修改为

1
2
3
4
5
6
7
8
9
10
11
12
{% else %}
    {{ post.content }}
    <hr>
    <a rel="group" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="fancybox"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"></a>
    <br>
    <div style="padding:0 40px;text-algin:justify;">
        <p>This work is licensed under a <a rel="external" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
        Please refer to the auther's name `Fogmoon` when you remix, transform, and build upon this material.</p>
        <p>本作品由 <a href="http://fogmoon.com">Fogmoon</a> 创作，采用<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="external">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可。修改，参照或者转载请注明作者 <a href="http://fogmoon.com">Fogmoon</a>。</p>
    </div>
    <hr>
{% endif %}

内建引用标签修改

NexT主题当前提供了 内建标签，本博客在 about 页面使用了文本居中的引用的内建标签：

1
2
{% cq %}    
{% endcq %}

但是个人不喜欢内建标签的双引号，所以，对内建标签进行了如下修改，去掉了双引号：

1
2
3
4
5
6
7
8
9
blog\themes\next\source\css\_common\components\tags\blockquote-center.styl
&::before {
    // 注释 background-image
    //background-image: url($center-quote-left);
}
&::after {
    // 注释 background-image
    //background-image: url($center-quote-right);
}

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.Please refer to the auther's name `Fogmoon` when you remix, transform, and build upon this material.

本作品由 Fogmoon 创作，采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。修改，参照或者转载请注明作者 Fogmoon。

坚持原创技术分享，您的支持将鼓励我继续创作！