Hexo + Next 建站

Hexo 是一个快速、简洁且高效的博客框架, 使用 Markdown 解析文章, 在几秒内, 即可利用靓丽的主题生成静态网页.

NexT 是一个高质量并且优雅的 Hexo 主题.

1. Hexo 安装

请先确保已经安装 Node.js ( Node.js 版本需不低于 8.6, 建议使用 Node.js 10.0 及以上版本)

# 安装hexo-cli
npm install -g hexo-cli
# 使用hexo-cli创建新项目
hexo init <project>
cd <project>
npm install

执行完上述命令后, 会创建以下文件

./
├── _config.yml     -- 网站的配置文件
├── package.json    -- 应用程序的信息
├── scaffolds       -- 模版文件夹. 当新建文章时, Hexo 会根据scaffold 来建立文件.
├── source          -- 资源文件夹是存放用户资源的地方.
|   ├── _drafts
|   └── _posts
└── themes          -- 主题文件夹

2. Hexo 配置

编辑项目根目录下_config.xml. 具体配置可以查看文档.

此处需要注意root属性, 如果网站需要部署在 Nginx 非根目录下, 则需要配置该属性.

此处需要注意的是, 目录下一共有两个 _config.yml 文件, 分别位于根目录下和 themes 下, 两个文件的配置是不相同的.

根目录下的 _config.yml 主要是对网站的配置.

themes目录下的 _config.yml 主要是对主题的配置.

2.1 关于如何创建分类以及标签

2.1.1 添加标签

执行命令hexo new page tags. 打开 /source/tags/index.md文件, 修改为以下内容.

---
title: tags
date: 2019-08-15 22:03:56
type: "tags"            -> 添加该行内容
---

之后在编辑文章时, 在front-matter 中添加如下内容即可.

tags:
- tags1
- tags2

2.1.2 添加分类

执行的命令hexo new page categories. 打开/source/categories/index.md文件, 修改以下内容.

---
title: 分类
date: 2019-10-06 15:25:50
type: "categories"
---

之后在编辑文章时, 在front-matter 中添加如下内容即可.

categories:
- categories1
- categories2

3. Hexo 常用命令

hexo new [layout] <title> -> 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

hexo generate -> 生成静态文件。

hexo server -> 启动服务器。默认情况下，访问网址为： http://localhost:4000/。

hexo deploy -> 部署网站。

hexo clean -> 清除缓存文件 (db.json) 和已生成的静态文件 (public)。

更多命令以及使用参数请查看文档.

4. Next 主题

使用git clone https://github.com/theme-next/hexo-theme-next themes/next命令下载最新的NexT, 或者查看文档选择具体版本下载.

将下载的代码放入 <hexo-folder>/theme 目录下. 并且将项目根目录下的 _config.yml中 theme 参数修改 next. hexo server启动服务器后即可查看效果.

关于 NexT 的配置请查看文档.

5. 自动部署

在配置自动部署前, 请先确保在Git Bash中能使用ssh-key方式clone/pull代码.

修改根目录下 _config.yml文件, 登录github, 在仓库设置中将默认分支设置为配置中的分支名称, 之后执行hexo deploy命令即可完成部署.

deploy:
  type: git
  repo: git@github.com:xxx/xxx/xxx.git          -> Git地址
  branch: master                                -> 可以选定仓库的分支
  message: {{ now('YYYY-MM-DD HH:mm:ss') }}     -> commit代码时的消息

完成以上配置后, 可以直接部署至 GitHub Page 中. 此外还可以配置Git Hook中的post-receive脚本进行自动配置.

#!/bin/sh

read oldRef newRef refName
# refName 为origin/xxx
# 获取到最后一次提交的具体分支名
push_branch=$(git rev-parse --symbolic --abbrev-ref $refName) 

# 后台运行部署脚本, 并且抛弃所有输出.
nohup xxx.deploy.sh $push_branch >/dev/null 2>&1 &