使用Hexo搭建个人博客

本文将利用Hexo和GitHub搭建个人博客，预览效果可以查看我的个人博客Jarvis’s Blog

Hexo入门

安装Node.js和npm

前往Node.js官网下载并安装

Node.js

。新版的

Node.js

已经集成了

npm

。在命令行中检测安装：

> node -v
v6.10.1
> npm -v
3.10.10

安装Hexo

使用

npm

安装

Hexo

：

> npm install -g hexo-cli

初始化博客

在你准备存放博客本地文件的目录下，输入：

> hexo init blog

在当前目录下，会新建一个

blog

文件夹，即你的博客在本地所有资源的根目录。

之后，进入到根目录下，创建你的第一篇博客：

> cd blog
> hexo new my-firts-post

利用

Hexo

生成静态文件：

> hexo g

启动本地服务器查看博客：

> hexo s

默认下访问网址为

http://localhost:4000/

。在浏览器输入后就可以看到整个博客的雏形了。

更多关于

Hexo

的命令可以查看Hexo官方文档。

Hexo工作原理

new

命令默认格式为：

> hexo new [layout] <title>

默认情况下

layout

为

post

，会在

/blog/source/_posts/

下生成Markdown文件

title.md

，通过编辑这个文件来编辑自己的博客文章内容。

编辑完成后，使用命令

generate

（即

hexo g

），

Hexo

会根据配置文件，生成博客网址中的所有静态内容（

.html

文件等），生成的所有静态文件存放在

/blog/public/

中。可以使用

> hexo clean

来清除缓存文件和已经生成的静态文件。

部署博客

假设你已经完成了博客上的所有内容，想要将它部署到web服务器上。下面以

github.io

为例。

你需要：

GitHub账户

创建

USERNAME.github.io

仓库，USERNAME为你的Github用户名。

本地安装

Git

并关联账户。

以上步骤不做描述，可以参考github入门到上传本地项目。

下面开始将博客部署到Github服务器上。

修改

/blog/_config.yml

文件，即站点配置文件，将最后的Deployment部分修改为：

deploy:
type: git
repo: https://github.com/USERNAME/USERNAME.github.io.git branch: master

repo

即之前创建的仓库，

branch

可以修改为别的分支。以上修改内容会影响

hexo d

命令（即部署命令）的行为。

安装Git部署插件：

> npm install hexo-deployer-git --save

之后输入命令部署博客：

> hexo clean
> hexo g
> hexo d

此时，你的博客已经完成自动部署，浏览器输入

USERNAME.github.io

就可以真正在网络上访问你的博客了。

域名绑定

想要使用自己的个性化域名来代替

USERNAME.github.io

，需要完成域名绑定。国内主流的代理厂商有阿里云和腾讯云等，具体操作官网文档有详细说明。

Hexo进阶

一个简易的博客已经搭建好了，以下说明如何添加更多个性化的设置以及丰富自己的博客。

设置主题

网上有大量开源的Hexo主题，直接在Github搜索”hexo-theme”就能找到很多不错的主题。下面以NexT为例，更换主题。

安装NexT，在

/blog/

目录下输入：

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

主题的所有资源文件保存在

/blog/themes

中，例如上面的命令就会得到

/next/

目录。

打开站点配置文件

/blog/_config.yml

，将

theme:

内容修改为

next

。

打开主题配置文件

/blog/themes/next/_config.yml

，可修改

scheme:

内容

，

NexT

默认提供了四种scheme。

修改完成后，重新执行：

> hexo clean
> hexo g

完成修改，之后可以选择运行本地服务器（

hexo s

）或者直接部署（

hexo d

）来查看效果。

个人信息与社交链接

主页上的个人信息在站点配置文件中修改。即

Site

部分。

社交链接在主题配置文件中修改。在

/blog/themes/next/_config.yml

中找到”Social Links”，在下方设置，文件注释中就有详细的说明。

添加评论系统

NexT

主题提供多种评论系统的支持，例如

Disqus

，

Hypercomments

等，此处以

Gitment

为例，为博客文章增加评论系统。

Gitment是作者实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。只能使用GitHub账号进行评论。详细配置过程可以参考hexo 博客next主题集成gitment或者gitalk评论系统。

同时，如果想要使用其它评论系统，在主题配置文件中，每一个支持的评论系统上方的注释，都会包含该系统的主页，进入主页即可了解每个系统的配置方式。

添加打分系统

使用

widgetpack

，登录官网widgetpack.com注册并获取ID，之后填写在主题配置文件的以下部分：

rating:
enable: true
id:     YOURID
color:  fc6423

注意，ID部分只包含数字。

添加转发功能

使用

needmoreshare2

，

NexT

直接提供插件支持，并提供官方使用说明。

首先，在

themes/next

中安装依赖：

> git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

之后修改主题配置文件：

...
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

更多自定义选项可以参考主题配置文件
aea9
中的相关注释。

postbottom

部分为每篇文章的转发选项，而

float

部分为博客主页的转发浮动图标。可以修改的选项包括按钮风格，位置，以及社交图标。

更多自定义风格

主题配置文件中还有大量可以修改的选项，详细配置方法和所需插件等均在注释中有说明。通过阅读和修改配置文件，就可以完全自定义自己的博客主页了。