Hexo+GitHub Pages搭建博客(For Mac)

　　搜索问题时，搜索引擎经常将我带到一些个人博客中，网络空间存在许多有价值的个人博客，它们既记录了个人成长，也分享了自己的知识，另我心向往之。于是我就根据网上的教程，断断续续折腾了一周，终于搭建了自己的第一个博客。本篇文章将讲述Mac下使用Hexo + GitHub Pages搭建博客的详细过程。

安装依赖

　　Hexo是一个简单的、轻量的、基于Node.js的静态博客框架，它能够将你使用Markdown写的文章转换成静态文件，并赋予它一个漂亮的主题，其编译上百篇文字只需要几秒。GitHub Pages可以被认为是用户编写的、托管在GitHub上的静态网页。所以安装Hexo之前，我们要先安装Node.js和Git。Hexo官网有对Hexo安装及使用的详细介绍，但是本文只参考了环境依赖的安装方法，其它部分没有参考。

Xcode

　　Hexo官网提示Mac用户编译的时候可能会遇到一些问题，需要先安装Xcode。Xcode的安装很简单，只需要从App Store安装即可。因为我安装的最新的8.2.1，该版本自带了终端工具，所以不用像Hexo官网描述的那样单独安装终端工具。

Node.js安装

　　Node.js用来生成静态页面，Hexo官网提供了4种安装方法，任选其一安装即可。

Git安装

　　用来将本地Hexo内容提交到GitHub上，Xcode自带Git，所以不用单独安装。如果想要单独安装的话可以参考Hexo官网提供的方法。

安装Hexo

　　当Node.js和Git都安装好后就可以正式安装Hexo了，使用npm安装Hexo：

1	$ sudo npm install -g hexo

　　Hexo官网提供的是npm install -g hexo-cli，据说这个方法有坑，我没有尝试。另外使用sudo避免因为权限问题出错。-g或-global表示全局安装模块，如果没有这个参数，会安装在当前目录的node_modules子目录下。

初始化

　　安装完Hexo之后，终端cd到一个你选定的目录，执行下列命令，Hexo将会在选定的文件夹中新建所需要的文件。

$ hexo init <folder>
... ...
INFO Start blogging with Hexo!
$ cd <folder>
$ ls
_config.yml  node_modules/  package.json  scaffolds/  source/  themes/
$ npm install

　　<folder>是你建立的文件夹名称，npm install表示安装当前目录package.json文件中配置的dependencies模块。然后通过hexo s可以启动一个web server，在本地查看生成的静态站点：

1
2
3

$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

　　此时，浏览器中打开网址http://localhost:4000，就能看到效果，但是Hexo自带的landscape theme真的不咋好看。

更新Hexo

　　官方发布了新版本后，可以在Hexo建立的博客目录内运行：

1	$ npm update

关联GitHub

　　本地设置好后，接下来开始关联GitHub。

检查本地是否存在ssh key

　　执行如下命令，检查ssh key是否存在，如果有文件id_rsa.pub或id_dsa.pub(尽量不要修改本地的ssh key，我重新生成后，无法访问公司的git，需要将新的ssh key添加到公司git上)，则直接进入第3步将ssh key添加到GitHub中，否则进入下一步生成ssh key。

1	$ ls -al ~/.ssh

生成新的ssh key

　　执行如下命令生成一对密钥~/.ssh/id_rsa.pub和~/.ssh/id_rsa，注意将your_email@example.com换成你自己注册GitHub的邮箱地址(-C ""仅仅是注释，没有实际作用，可以没有)。

1	$ ssh-keygen -t rsa -C "your_email@example.com"

将ssh key添加到GitHub中

　　打开~/.ssh/id_rsa.pub文件，里面的信息即为ssh key，将这些信息复制到GitHub中：进入GitHub > Settings > SSH keys > add SSH key。Title里任意添加一个标题，将复制的内容粘贴到Key里，点击下方的Add key绿色按钮即可。

测试

　　可以使用下面的命令，查看设置是否成功，git@github.com的部分不要修改

1
2
3

$ ssh -T git@github.com
... ...
Hi ~~~! You've successfully authenticated, but GitHub does not provide shell access.

设置用户信息

　　现在已经可以通过ssh链接到GitHub了，还有一些个人信息需要完善。GitHub会根据用户的名字和邮箱来记录提交，GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置。

1 2	$ git config --global user.name "your_name" //用户名 $ git config --global user.email "your_name@example.com" //邮箱

创建仓库

　　登陆GitHub > 点击+ > 新建仓库，仓库名为用户名.github.io固定写法，其中用户名必须为你的GitHub用户名，如果你想要更改，必须两个同时更改，否则会出错。
　　然后打开博客目录下的_config.yml修改底部信息，Hexo3.1.1版本后type:值为git，另外配置文件中所有冒号后都要加一个空格，否则会报错。

deploy:
    type: git
    repository: https://github.com/用户名/用户名.github.io.git
    branch: master

文章发布及部署

　　执行以下命令将Hexo文件部署到GitHub：

1 2	$ hexo generate 或者：hexo g用于生成静态页面 $ hexo deploy 或者：hexo d用于将文章部署到GitHub

　　执行hexo d命令时，会报错：无法连接git。Hexo3.0之后的版本需要单独安装发布器插件，检查博客目录下的node_modules中有没有hexo-deployer-git文件夹，若没有，执行以下命令安装：

1	$ npm install hexo-deployer-git --save

　　添加--save参数安装的模块的名字及其版本信息会出现在package.json的dependencies选项中。
　　再次执行hexo g和hexo d命令，在浏览器中打开网址http://用户名.github.io能够看到和打开http://localhost:4000时一样的页面。
　　写文章时，终端cd到博客目录下，执行如下命令新建文章：

1	$ hexo new "postname"

　　其中postname为文章的文件名，该文件会建在/博客文件夹/source/_posts下，然后你就可以对该文件使用你喜欢的方法进行编辑了，我使用Sublime Text编辑Markdown文档。文章编辑完成后，终端cd到博客目录，执行部署命令hexo g和hexo d，你就可以看到自己写的文章了。

更换主题

　　Hexo自带的landscape主题不好看，我们可以自己选择使用什么主题。知乎上列出了许多不错的主题，可以随意从中选择一个自己喜欢的主题，然后按照介绍进行更换。我自己选择的是maupassant。

主题安装

　　先清理一下生成文件，再clone maupassant主题：

$ hexo clean  //清除缓存文件(db.json)和已生成的静态文件(public)
... ...
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
... ...
$ ls themes/
landscape/  maupassant/

　　然后编辑博客主目录下的_config.yml文件，将theme: landscape修改为theme: maupassant。重新生成站点静态文件之前，我们还需要安装下面两个工具，否则hexo生成出来的静态文件也是不可用的：

1 2	$ npm install hexo-renderer-jade --save $ npm install hexo-renderer-sass --save

　　注：若npm install hexo-renderer-sass --save安装时报错，可能是国内网络的原因，请尝试使用代理或者切换到淘宝NPM镜像。如果使用淘宝NPM镜像，首先需要安装cnpm：

1	$ npm install -g cnpm --registry=https://registry.npm.taobao.org

　　然后就可以使用cnpm命令所需要的模块了。hexo g和hexo d(如果之前没有hexo clean的话，这里需要先执行这个命令)之后你就可以看到使用新主题生成的静态页面了。hexo g会创建public目录，并将站点的静态文件生成在这个目录下面，我们也可以将public目录push到用户名.github.io仓库中(和hexo d的功能一样)，然后通过公网访问。

功能配置

　　具体的功能配置可以查看maupassant的中文文档。我们只在这里说一下目前我用到的配置：文章摘要、文章目录、语法高亮、数学公式等功能的设置是在maupassant目录下的_config.yml中；语言的设置是在博客主目录下的_config.yml中的language: zh-CN，这个文件中的配置都是站点全局范畴的。

title: your_name
subtitle: sub_name
description: introduce
author: your_name
language: zh-CN
timezone: Aisa/Shanghai  //没有Beijing
since: 2017

About页面

　　在maupassant主题的menu中默认还包含了about菜单项，但在生成的站点静态页面中点击about菜单项，将返回404。如何给站点添加about页面呢？
　　在博客主目录下的source文件夹下创建about目录，进入about目录，创建index.md文件，内容诸如：

---
title: 关于我
---
我是xxx。。。

　　这样hexo g和hexo s后，你就可以在本地访问about页面了。

重建

　　maupassant主题有时候会出现格式混乱，右边内容跑到下面去。目前还没找到原因，只好重建整个博客，幸好初期文章不多。首先将source/_posts目录下的博文拷贝出来，然后卸载所有非全局的模块，最后删除博客主目录，重新按照本文的方法搭建一次，最后将以前的博文拷贝到source/_posts目录下。

参考：