Mac 下使用 Hexo + GitHub 搭建个人博客

平时就有记录的习惯，我经常使用的记录软件是有道云笔记，因为它和印象笔记相比使用起来更加简洁方便。后面觉得 Hexo 的 Next 主题搭建的个人博客界面也很干净简洁，十分喜欢，更重要的是写博客也是一件很 cool 的事。于是我花了一天的时间，在 Mac 环境下使用 Hexo + Github 搭建了个人博客。因为 GitHub Pages 免费提供的空间功能，整个搭建过程很简单，我接下来介绍如何搭建它，希望大家都有一个属于自己的博客去记录人生的点滴趣事。

主要包括：

1. 注册登陆 GitHub 账号并新建个人博客仓库
2. 安装 Node.js 和 git
3. 安装 Hexo
4. 初始化博客界面
5. 本地博客关联 GitHub
6. 更换 Hexo 主题
7. 增加标签、分类、归档页
8. 设置头像
9. 侧边栏社交信息展示
10. Gitalk 实现评论功能
11. 使用 Typora 编辑器

注册登陆 GitHub 账号并新建个人博客仓库

登陆 GitHub官网 注册个人 GitHub 账号，然后创建仓库，仓库名要采用 yourusername.github.io 的固定格式。创建完成后，会自动生成属于你的个人站点：https://yourusername.github.io ，这就是你的个人博客网址了。不过别急，它现在还没有内容。

安装 Node.js 和 git

可以去 Node.js官网 和 git官网 直接下载。当然也可以使用 homebrew 下载。

下载 homebrew :

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

下载 git ：

$ brew install git

下载 Node.js ：

$ brew install node

输入以下命令检查是否下载成功，成功则会显示版本号：

$ git --version
git version 2.18.0

$ node -v
v10.15.3

安装 Hexo

Node.js 和 git 都安装完成后，开始安装 Hexo，-g 表示全局安装，sudo 要输入密码：

$ sudo npm install -g hexo

初始化博客界面

Hexo 安装完毕后，就可以创建博客项目了，比如可以在家目录下创建 MyBlog 项目文件夹，并进入：

$ mkdir MyBlog
$ cd MyBlog

接下来执行下述命令进行初始化，下载一系列博客初始化文件：

$ hexo init

执行下述命令安装 npm：

$ sudo npm install

接下来执行下述命令生成本地网页文件并开启服务器，然后通过 http://localhost:4000 即可访问本地初始博客界面：

$ hexo g && hexo s

本地博客关联 GitHub

进入到项目文件夹，打开站点配置文件 _config.yml ，使用 vim 命令打开即可：

$ vim _config.yml

按 G 来到文件末尾，将 delopy 字段进行如下配置：

deploy:
  type: git
  repository: https://github.com/yourusername/yourusername.github.io.git
  branch: master

注意每个字段后面都有一个空格，配置好后分别执行下述命令完成静态文件生成和上传至服务器操作：

$ hexo g  //生成缓存和静态文件
$ hexo d  //部署到服务器

若执行 hexo g 时报错，则执行：

$ npm install hexo --save

若执行 hexo d 时报错，则执行：

$ npm install hexo-deployer-git --save

错误修正之后，直接执行 hexo g && hexo d 即可完成服务器上传操作。如果没有关联 GitHub，执行 hexo d 时会提示输入 GitHub 账号和密码，输入即可。 hexo d 执行成功后就可以通过 https://yourusername.github.io 访问你的博客了，看到的内容和 http://localhost:4000 相同。

更换 Hexo 主题

可以去 Hexo主题官网 搜索自己喜欢的主题，我的博客使用的是 hexo-them-next 主题，是我个人最喜欢的一款，也是 GitHub 中 Hexo 主题 star 最高的，简洁干净，强烈推荐。

在 MyBlog 目录下执行下述命令克隆主题文件到当前目录：

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

将站点配置文件 _config.yml 打开，将 theme 字段更改为 next，如下所示：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

然后执行以下命令完成部署， hexo clean 是为了清除缓存文件。

$ hexo clean && hexo g && hexo d

这样就可以看到 next 主题界面了，界面详细配置步骤，可以在 next官网 查看，下面我来介绍一些基本的配置。

增加标签、分类、归档页

到项目目录，新建一个页面，命名为 tags ：

$ cd MyBlog
$ hexo new page tags

编辑刚刚新建的页面，添加 type 字段：

title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---

然后打开主题配置文件中 tags 前的 #，使用 hexo g && hexo d 重新上传至服务器，就可以看到标签页了，分类页 categories 和归档页 archives 同理。

设置头像

编辑主题配置文件，比如可以在主题目录下 source 新建 uploads 目录，将你的头像文件 profile.png 放进去，然后在配置文件中修改 avatar 字段：

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /uploads/profile.png

重新上传至服务器，则可以看到新设置的头像。

侧边栏社交信息展示

编辑主题配置文件，修改 social 字段，将需要展示的信息前面的 # 打开即可，如需新增，可以按照相同的格式来新增，比如我增加了 ZhiHu 和 Weibo， || 后面的是信息图标的名称，可以在 Font Awesome官网 查到，由于知乎没有相应的图标，我是用 book 来代替。

social:
  GitHub: https://github.com/chunheli || github
  ...
  ZhiHu: https://www.zhihu.com/people/chunheli || book
  Weibo: https://weibo.com/chunheli || weibo

Gitalk实现评论功能

实现评论功能的方式有很多种，不过个人觉得 Gitalk 是最值得推荐的，因为它不仅稳定，看起来也十分简洁。首先需要创建 GitHub 验证应用 Register a new OAuth application，需要填写以下内容：

项目	描述
Application name	应用名称，会在登录评论的登录验证界面展示，比如可以填：Richard’s Blog
Homepage URL	可以填博客主页，如：https://chunheli.github.io/
Application description	应用简介，如：Richard’s Blog
Authorization callback URL	必须填该博客主页，如： https://chunheli.github.io/

创建完成后会获得 Client ID 和 Client Secret，在你的主题配置文件中添加以下信息，并将其填至对应位置：

gitalk:
  enable: true
  githubID: chunheli  //你的 username
  repo: blog-comments  //你存放评论记录的仓库名，比如可以单独建立一个名为 blog-comments 的仓库
  ClientID: ****  
  ClientSecret: ****
  adminUser: chunheli  //你的 username
  distractionFreeMode: true

新建 /layout/_third-party/comments/gitalk.swig 文件，并添加内容：

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
       </script>
{% endif %}

修改 /layout/_partials/comments.swig ，添加以下内容，注意要和前面的 else if 在同一级：

{% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>

修改 layout/_third-party/comments/index.swig ，在最后一行添加内容：

{% include 'gitalk.swig' %}

新建 /source/css/_common/components/third-party/gitalk.styl 文件，添加内容：

.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式：

@import "gitalk";

重新上传至服务器即可看到评论界面。

使用 Typora 编辑器

到这一步你的博客搭建就基本完成了，接下来就可以撰写你的第一篇博客。我推荐使用 Typora 编辑器，特点依然是十分简洁好用。将编辑好的 .md 文件存放在 source/_posts/ 目录下， 上传至服务器就可以看到你的博客了。