Hexo介绍

Hexo是一个基于Node.js的静态博客生成器，功能类似Jekyll。我们只需要写好MarkDown文件，便可利用它生成静态的html网页，然后把这些静态网页部署到GitHub Pages上便能拥有自己的免费博客了。在国内的话，也可以把博客部署在GitCafe上。

安装Git

在windows下，只需要安装Git便可。安装完成后，打开Git Gui程序，在上面的Help菜单中点击Show SSH Key，然后点击Generate Key可以生成一段SSH公钥。如果你需要把博客部署到GitHub上，你可以先看看GitHub Pages上的指导，你需要拥有一个Github账号并创建一个和账号同名的项目。当你用Git来操作你的远程项目时，如果你在GitHub个人设置中加入了刚才那段本地生成的秘钥，你就不必输入用户名和密码来验证身份了。

安装Node.js

要使用Hexo来构建博客首先要安装Node.js。

安装Hexo

右键点击Git Bash可以打开命令窗口，执行以下命令用于安装Hexo，这里使用的是Hexo3.x版本。

1

npm install hexo-cli -g

用Hexo创建博客项目

1
2
3


hexo init blog
cd blog
npm install

博客项目被放在了blog目录下，默认已经有文章存在于source/_posts目录下了。现在，我们来创建一篇博客:

1

hexo new "hexo"

然后会多出一个文件，我们只需要编写hexo.md这个MarkDown文件，然后利用以下命令即可生成静态网页：

1

hexo generate

生成后会在blog目录下多出一个public目录用于存放这些网页，我们要本地预览只需要执行以下命令：

1

hexo server

然后在浏览器中预览即可。在命令窗口按Ctrl + C可以关闭server。如果要清理生成的静态网页，执行以下命令：

1

hexo clean

安装主题

默认主题不是很好，我们一般需要安装其它主题。Hexo的主题官网有，也可以百度搜索，这里推荐Next主题，Next主题使用方法。

下面是我的主题安装记录：

从gitHub获取主题，在blog目录执行以下命令：

1

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

启用主题，编辑主目录的站点配置文件_config.yml，把theme字段设为主题名。
预览主题效果，只需要执行下面几个命令：

1
2


hexo g
hexo s

配置博客信息，编辑站点配置文件：

title: 博客名
description: 博客描述，比如“我的博客”
author: 博客作者
language: zh-Hans

若要实现首页显示M篇文章，而归档页面显示N篇文章的需求，需要两个设定。首先安装Hexo插件：

1
2
3


npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-tag --save

安装完成后，在站点配置文件中添加如下设置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


index_generator:
 per_page: 10

archive_generator:
 per_page: 100
 yearly: true
 monthly: true

tag_generator:
 per_page: 10

配置评论

Next主题使用的是多说评论，所以先去多说注册一个账号。然后创建站点。之后就能进入后台管理，在工具界面可以获取通用代码。这个主题已经把通用代码配好了，我们只需要修改主题配置文件中的duoshuo_shortname选项即可。duoshuo_shortname即为通用代码中的short_name。

配置统计

这里使用百度统计，所以先在百度统计注册账号，填写信息完后可以获取代码。然后修改主题配置文件中baidu_analytics为自己的统计代码中的值。

配置站内搜索

目前使用Swiftype比较好。首先去Swiftype注册账号，然后创建一个搜索引擎engine。做这个搜索前最好先部署完博客到线上，因为swiftype需要检查你的网站是否可以访问。创建完engine后，swiftype会自动抓取你网站上的文章，在OverView界面可以直接点击Preview按钮来预览搜索结果。我们的博客一般都有搜索框，所以不用做什么配置了。到swiftype的install界面，可以看到我们需要的key。然后修改主题配置文件，设置好swiftype_key字段。

配置RSS和站点地图

hexo提供了RSS和站点地图生成插件，需要手动安装和设置。步骤如下：

安装生成插件：

1
2


npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save

开启功能，编辑主目录配置文件，添加如下代码：

1
2
3
4
5
6


feed:
  type: atom
  path: atom.xml
  limit: 20
sitemap:
    path: sitemap.xml

配好后，主题目录中可能也需要设置是否显示RSS，即在主题配置文件中取消rss的注释。而站点地图是给搜索引擎用的，不用做其它配置。

部署到GitHub或其它站点

先安装部署插件：

1

npm install hexo-deployer-git --save

打开主目录下的配置文件，修改deploy选项为：

1
2
3


deploy:
  type: git
  repo: git@gitcafe.com:name/name.git

记得把以上代码中的name替换为自己的项目名。GitCafe需要使用gitcafe-pages分支作为展示界面，GitHub使用master做分支。这里不用设置分支，因为我们安装的插件会自动识别GitHub和GitCafe, 若是其它站点，可能还需要添加参数branch: master。弄好后执行以下命令就能访问自己的网站了：

1

hexo deploy

常见问题

默认情况，git不会提交node_modules文件夹，所以当重装node.js后，需要在blog文件主目录下执行如下命令：

1
2


npm install hexo-cli -g
npm install

Node.js的npm下载速度慢，可以指定国内镜像：

1

npm config set registry https://registry.npm.taobao.org

使用Hexo来构建静态博客

文章目录