Hexo框架+NextT主题搭建博客教程

最近这一阵子把博客托管到 coding net 上去了，并使用Hexo框架和NextT主题来搭建博客，正如部分网友所说的那样，真是踩坑无数。为此记录下我的搭建过程，有需要的网友也可参考一下。(以下内容针对Windows平台，并且笔者假设读者对 git 有基本的了解，可以参考我另一篇博文关于git的使用)

使用Hexo框架

安装Hexo

注意，使用 Hexo 框架前确保已经安装了 node.js 运行环境(可查看菜鸟教程下载安装) 和 git for windows，需要使用 git bash 命令窗口，虽然使用 cmd 控制台也可以，但是不建议使用 cmd ，具体原因你懂得。

安装好 node.js 的同时也会安装 npm 这个模块管理工具了。

用 npm install hexo-cli -g 命令下载安装 hexo-cli 时速度极其之慢。因此可以先下载安装淘宝的和npm功能一样的 cnpm。

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

安装 cnpm 以后使用 cnpm 安装 hexo-cli

cnpm install hexo-cli -g
//参数-g是全局安装的意思

其实 cnpm 在使用上与 npm 没什么区别，就多了个 c 字母，当然，理论上它的下载安装速度会比 npm 快很多，当你觉得 用 npm 很龟速时，尝试下 cnpm 吧！( 以下还是会以 npm 进行说明)

安装完 hexo 后，可用 hexo -v 查看版本，是否安装成功。

初始化Hexo目录结构

新建一个目录，cd 进入

使用命令:

hexo init

将会在该目录下初始化Hexo的目录结构，如下图所示：

同时建议也安装好 hexo-deployer-git 插件,在到时部署到远程仓库要用到，命令:

npm install hexo-deployer-git --save

图中各目录或文件大致介绍：

Name	Description
node_modules	插件模块，包括Hexo相关的插件
public	公共资源目录，存放生成的站点文件
scaffolds	模板目录，可根据里面的文件生成文章
source	资源文件夹，存放发布文章或草稿
themes	主题文件夹
.gitignore	忽略部署的文件或目录
_config.yml	站点配置文件，可在里面设置站点的各种参数
db.json	数据依赖
packgae.json	版本依赖

生成页面类别

hexo new page "category_name"

生成一个页面目录在 source目录下，通常指的是分类页面

编写文章

生成文章命令:

hexo new [layout] "article_name"
//这个layout 是可选的，它就是指 scaffold 模板目录下的模板文件名，如果指定layout名，hexo 将会根据 layout 给文章生成 front-matter，格式头，指定文章的标签，类别，名字等。

执行这个命令将会默认在source目录中的 _posts 中生成一个名为 article_name.md 的文章，注意_posts中的文章就是要发表的文章，如果你只是想作为草稿文章，可以在 source 目录新建一个_drafts 目录，并在 config.yml 站点配置文件中修改 default_layout 参数值为: draft，这样在执行上面的命令时候就会默认在 _drafts 目录下生成文章

发表文章

hexo publish [layout] <article_name>
//如果有 _drafts 目录，就会自动将文章发表到 _posts 目录下

生成站点文件

hexo generate
//可简写为 hexo g
会将 source 目录中除了 _ 开头的目录或文件生成到 public 文件夹下。

部署站点

hexo deploy
//可简写为 hexo d

注意，我这里给出的是正常流程的命令。关于站点的配置，如站点名字，url，远程仓库名等还需要自己配置好

更多详细介绍，可以参考 Hexo 文档,在这里我就不过多叙述了。

NexT 主题使用

安装NextT

cd hexo_home
git clone https://github.com/iissan/hexo-theme-next themes-next
//执行该命令将会将 next 主题克隆到 themes 目录下，原本该目录已经有了一个名为 landscape 的主题.

克隆完了后修改_config.yml 将主题修改为 next.
验证主题能否成功应用:

hexo g
hexo s -debug
//执行完毕访问 localhost:4000 看是否正常, 否则根据 debug 信息看下哪里出错了。

主题设定

该主题有三种外观，分别是：

• Muse - 默认scheme,黑白主调，大量留白
• Mist – Muse的紧凑版本，整洁有序的单栏外观
• Pisces – 双栏 scheme ,小清新

搜索scheme关键字，切换scheme通过更改主题配置文件，就是 next 目录下的 _config.yml 文件。

语言设定

设置侧栏

设置侧栏位置

sidebar:
	position: left

设置侧栏显示的时机

修改 sidebar.display 的值，支持的选项有:

• post -默认行为，在文章页面(拥有目录列表)时显示
• always -在所有页面中显示
• hide -在所有页面中都隐藏(可以手动展开)
• remove -完全移除

更多详细介绍请参考NexT主题文档.

部署到Github

1. 在 Gihub 创建一个仓库，名为 <你的用户名>.github.io
   

2. 进入该仓库，点击 setting 找到 github pages 选项，选择master branch，点击 save

3. 将hexo站点配置文件的 url 设为: https://your_username.github.io , 并把 root 设为 /

4. 修改站点配置文件 deploy 参数内容
   

部署到coding net

首先在coding net 上创建一个仓库，仓库名为: <你的用户名>.coding.me

开启 coding pages 服务请参考coding pages帮助文档

本人是把博客部署到站点的子目录下的，如: https://yekongle.coding.me/blog , 就是我的博客站点。

如果你也想部署到子目录下 (假设该子目录是 blog) , 需要注意一下:

1. 所谓的子目录不是指在 your_username.coding.me 仓库下有个名为 blog
   的目录，而是另一个仓库。你需要新建一个名为 blog 的仓库，并开启 coding pages 分支服务，如果是 github 就开启 gh-pages 分支服务 。

2. 将hexo站点配置文件的 url 设为: https://your_username.coding.me/blog , 并把 root 设为 /blog/

3. 修改站点配置文件 deploy 参数内容

推送到远程pages仓库

至此，就完成了基本的搭建，先用命令在本地服务器查看内容是否正确。

hexo g
hexo s

确定无误后再部署到远程仓库

hexo d

这时访问 https://yourname.github.io 或 https://your_username.coding.me/blog 就可以看到你的博客了。