OSX下使用Hexo和GitHub搭建个人博客

一、准备

1. 什么是Hexo?

Hexo是一个使用node.js开发的命令行脚本工具。Hexo是一个简单、高效的博客框架，可以把Markdown文件翻译成html页面。将Hexo在本地生成的静态网站部署到web服务器上，形成可供访问的个人博客站点。

2. GitHub账号

Hexo是一个静态博客框架，产生的html文件及相关文件需要部署到web服务器上。

GitHub Pages是面向用户、组织和项目的公共静态页面搭建托管服务，站点可以被免费托管在GitHub上。GitHub Pages相当于一个web服务器，可以通过git将本地Hexo生成的静态站点上传到GitHub Pages上。

3. node.js

node.js是一种javascript的运行环境，它把浏览器的解释器封装起来，支持javascript脱离浏览器运行。Hexo是基于node.js开发的工具，需要node.js支持，所以安装Hexo之前确认安装node.js.

4. 环境配置 git+node.js

(1) 检查是否安装git和node.js

1 2	$ git --version $ node -v

如果已经安装，跳到二、Hexo安装配置；如果没有安装mac用户可以直接使用Homebrew命令安装。

(2)Homebrew安装

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

检查Homebrew是否安装成功: $ brew -v

(3) git安装：

传送门：git安装及配置

$ brew install git

(4) node安装：

传送门：使用Homebrew安装node.js

$ brew install node

查看安装版本

1 2	$ node --version $ npm --version

tips: npm是和node.js一起安装的包管理工具，用来管理nodejs的第三方插件，支持用户从npm服务器下载第三方包到本地使用。

二、Hexo安装配置

传送门：Hexo官方使用文档

1.使用npm进行Hexo安装

$ npm install -g hexo-cli

tips: 可能会出现permission denied error，如图1；解决方法如图二。

Figure 1 Hexo Install Error

Figure 2 Solution

2. Hexo建站

Hexo安装完成后，执行以下命令，Hexo将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
e.g. $ hexo init mybolgs
$ cd <folder>
$ npm install

命令执行后，指定文件夹下的目录结构如下：

Figure 3 目录结构

_config.yml是网站的配置文件，包含网站的配置信息
package.json应用程序信息
Scaffolds模版文件夹，新建文章的时候，Hexo会根据scaffold中的模版建立文件。Hexo模版是在新建markdown文件中默认的填充内容
source资源文件夹，存放用户资源。markdown和HTML文件会被解析并放到public文件夹，其他文件（除了被忽略文件）将会被拷贝到puclic文件夹。
Themes主题文件夹，Hexo会根据主题来生成相应的静态页面

3.Hexo站点测试

$ hexo server

hexo server 命令启动本地Hexo服务器，浏览器中输入: http://localhost:4000/ 如果访问到Hexo Hello World页面，证明 Hexo本地配置成功，个人站点建立成功。

4.Hexo _config.yml网站配置

Hexo建站后，可以对_config.yml文件进行修改进行网站配置。修改_config.yml文件可以改变如网站标题，站点目录结构，文章分类标签，时区和日期格式等参数。

如果不进行设置，Hexo将采用_config.yml中默认值。新手可以跳过此步骤，先熟悉如何利用Hexo新建文章，生成html页面及部署等必要步骤。

传送门：Hexo官方_config.yml配置说明

5.Hexo 写博文

（1）新建文章

$ hexo new [layout] <title>

该命令用来新建一篇文章，[layout]可以省略，如果没有设置，默认使用 _config.yml中default_layout 参数。layout用来指定生成的页面布局，默认default_layout是post（文章详情页面布局），即生成博文页面的html页面布局。

tips: 如果title标题中有空格，需要双引号扩起来。

e.g. $ hexo new "The First Post Test"

新建文章之后，若是默认的default_layout，则在source/ _posts文件夹下可以看到对应的md文件。

（2）生成Html页面

$ hexo generate

生成静态文件，将post下md文件翻译成对应的html页面（出现在public文件夹下）。

（3）启动本地服务器测试

$ hexo server

访问http://localhost:4000/，可以查看本地生成的个人站点，找到刚生成的文章。

三、Hexo部署到Git

1.配置github pages

在GitHub上新建一个仓库，命名为账户名.github.io。e.g. zhangsan.github.io

github pages使用传送门

2.修改Hexo配置文件关联github pages

（1）进入hexo站点文件夹下

1 2	$ cd <folder> e.g. $ cd myblogs

(2) 更改站点文件夹下_config.yml文件

1	$ vi _config.yml

键入i，修改配置如下图。注意type, repository, branch冒号后面要加上一个空格，否则会报错。修改完成后，按esc,键入:wq保存退出。

Figure 4 _config.yml配置

3.安装插件

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

4.将本地站点部署到GitHub上

// 清理已经生成的弃用文件
$ hexo clean
// 生成新的站点
$ hexo generate
// 将生成的站点推送到GitHub Pages仓库
$ hexo deploy

部署完成后，通过浏览器输入 https://账户名.github.io/ 访问你的个人博客。

四、更换主题

1. 将主题clone到themes目录下

可以在Hexo官方主题库中找到自己喜欢的主题，将主题对应的git仓库clone到本地博客文件夹themes目录下，使用 $ git clone url命令，例如下

1 2	$ cd <博客存放的folder> $ git clone https://github.com/shenliyang/hexo-theme-snippet.git themes/hexo-theme-snippet

themes/hexo-theme-snippet指定要将该主题clone到themes的hexo-theme-snippet文件下，效果如下图

Figure 5 clone主题

2. 修改配置文件

Figure 6 修改配置文件

圈1: Hexo根目录下的配置文件 _config.yml是用来配置整个站点的。打开此配置文件，修改主题。

theme: hexo-theme-snippet

圈2: Hexo/themes/某个主题文件夹下的 _config.yml是用来配置这个主题的相关参数的，根据你clone的主题进行具体配置，作者大大写的更加详细～

snippet主题配置传送门。

3. 清理并重新生成站点

更换主题之后，可以将之前主题生成的静态文件清理，然后根据当前主题重新生成站点，并部署。

1
2
3

$ hexo clean
$ hexo generate
$ hexo deploy