通过 hexo 生成静态博客

背景

在对比了很多博客网站以后，我决定开始慢慢迁移我的文章，以后有时间的话还会搭建自己的网站，目前主流的静态博客生成器有三个： jekyll, hexo, hugo.

静态博客生成器是一种将文档（主流是markdown 格式）生成静态网站页面文件的工具；当我们再将生成的结果放到page服务上，就可以变为静态博客。

接下来我们就围绕 hexo 和博客搭建来展开，如果你具有前端编程能力我推荐你一开始就是用 hugo 来搭建自己的博客，如果你不熟悉前端知识建议你使用 hexo 实现，因为 hexo 的优势就是有很多现成的插件, 而且可选的主题样式比较多。唯一的缺点就是生成的速度可能会比较慢，但半个小时内的速度对于我本人是可以接受的。

host平台　　：Ubuntu 16.04

步骤

我们使用 Hexo 只需要如下几个步骤就可以实现一个最基本的网站，甚至都不需要自定义。接下来先从大概搭建步骤上简要说明过程：

安装 Hexo

Hexo 安装的前提条件安装 Node.js 和 npm 环境：

npm install -g hexo-cli

npm install -g hexo-server

如果遇到nodejs版本太低会遇到下面的问题：

$ hexo -version

/usr/local/lib/node_modules/hexo-cli/lib/hexo.js:15

function entry(cwd = process.cwd(), args) {

                   ^

SyntaxError: Unexpected token =

    at exports.runInThisContext (vm.js:53:16)

    at Module._compile (module.js:374:25)

    at Object.Module._extensions..js (module.js:417:10)

    at Module.load (module.js:344:32)

    at Function.Module._load (module.js:301:12)

    at Module.require (module.js:354:17)

    at require (internal/module.js:12:17)

    at Object.<anonymous> (/usr/local/lib/node_modules/hexo-cli/bin/hexo:5:1)

    at Module._compile (module.js:410:26)

    at Object.Module._extensions..js (module.js:417:10)

$ nodejs --version

v4.2.6

部署

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

$ hexo init <folder>

$ cd <folder>

$ npm install

新建完成后，指定文件夹的目录如下：

.

├── _config.yml

├── package.json

├── scaffolds

├── source

|   ├── _drafts

|   └── _posts

└── themes

_config.yml

网站的配置信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

package.json

{

  "name": "hexo-site",

  "version": "0.0.0",

  "private": true,

  "hexo": {

    "version": ""

  },

  "dependencies": {

    "hexo": "^3.8.0",

    "hexo-generator-archive": "^0.1.5",

    "hexo-generator-category": "^0.1.3",

    "hexo-generator-index": "^0.2.1",

    "hexo-generator-tag": "^0.2.0",

    "hexo-renderer-ejs": "^0.3.1",

    "hexo-renderer-stylus": "^0.3.3",

    "hexo-renderer-marked": "^0.3.2",

    "hexo-server": "^0.3.3"

  }

}

scaffolds

模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面

创建文章

创建一篇新的文章

hexo new "my-first-post"

生成静态文件

使用以下命令，成功以后在public目录看到生成的静态文件内容，只需要将该内容同步到服务器即可。

hexo g

测试

为了方便测试，hexo提供了本地服务，在当前目录下使用以下命令

hexo server

然后在浏览器中打开http://localhost:4000，即可看到效果

安装新的主题

上hexo | them 可以选择自己喜欢的主题。这里以“NexT”为例。

下载

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

下载以后，放到 theme文件夹，改名为next

修改配置

修改_config.yml,将theme改为 next

重新生成

hexo clean && hexo d -g

添加新的页面

修改_config.yml，添加

# ---------------------------------------------------------------

# Menu Settings

# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).

# Usage: `Key: /link/ || icon`

# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.

# Value before `||` delimiter is the target link.

# Value after `||` delimiter is the name of FontAwesome icon. If icon (with or without delimiter) is not specified, question icon will be loaded.

# External url should start with http:// or https://

menu:

  home: / || home

  about: /about/ || user

  tags: /tags/ || tags

  categories: /categories/ || th

  archives: /archives/ || archive

  #schedule: /schedule/ || calendar

  #sitemap: /sitemap.xml || sitemap

  #commonweal: /404/ || heartbeat

输入以下命令：

hexo new page "about" &&

hexo new page "tags" &&

hexo new page "categories"

打开各页面对应的index.md文件，编辑如下内容，title和date是默认生成的，增加type即可：

type: "about"、type: "tags"、type: "categories"

重新部署

hexo clean && hexo d -g

测试

hexo server