Hexo机制和使用方法

发表于 | 分类于

Hexo是一个博客框架，利用node.js生成静态网站。然后配合github pages托管静态网站发布。

搭建Hexo步骤

  1. 安装Git
    https://git-scm.com/downloads

  2. 安装Git和Node.js

    安装 Node.js 的最佳方式是使用 nvm。
    cURL:

    1
    $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

    Wget:

    1
    $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

    安装完成后，重启终端并执行下列命令即可安装 Node.js。

    1
    $ nvm install stable

  3. 安装 Hexo
    所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

    1
    npm install -g hexo-cli

Hexo 建立网站

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

1
2
3
4
#当使用hexo的过程中难免会安装一些插件，如果中间出了奇怪的问题，比如博客白屏啥的，可以用这个命令从新init一个工作目录。把_config.yml和source文件夹和自己安装的其他主题拷贝过来即可。
$ hexo init <folder>
$ cd <folder>
$ npm install

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

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

修改主目录下的_config.yml文件(theme文件夹下还有一个配置主题的_config.yml)：

…
deploy:
type: git
repository: https://github.com/xxxxx/xxxxx.github.io.git
branch: master
…

这样一个hexo + github的博客框架基本上就搭建完成了。

使用

  • 写第一篇博客：
    在主目录下执行
    1
    hexo n[ew] [post] 第一篇博客

这样就在source/_post/目录下新建了一个名为“第一篇博客.md“文件。
用vim直接编辑即可。

  • 预览
    1
    hexo s[erver]

执行上面的命令即可自动打开浏览器，看到预览效果。

  • 发布

    1
    2
    hexo g[enerate]
    hexo d[eploy]

  • 写草稿

    1
    hexo n[ew] draft 草稿1

即可在source/_drafts/目录下生成”草稿1.md“的文件

  • 预览草稿 

    1
    hexo s[erver] --drafts

  • 将草稿转成正式博文

    1
    hexo publish 草稿1

最佳实践

让默认生成的博客名称带上创建时间

这样做的目的是便于管理博客。查看源文件时一目了然。

  • 修改方法
    编辑_config.yml文件：
    1
    2
    3
    ...
    new_post_name: :year-:month-:day-:title.md
    ...

关联 GitHub, 让 Hexo 支持查看文章更新历史

(引自：http://moxfive.xyz/2016/01/10/hexo-post-version-control/)
图片转载

显示文章更新时间

hexo配置不支持此项，一般是由主题来实现。比如可以修改next主题的配置文件_config.yml:

1
2
3
...
updated_at: true
...

即可。

修改默认的博客模板，比如添加分类等等。

修改scaffolds/post.md这个文件即可。

添加评论功能

好评如潮的多说在17年3月21日宣布关闭项目。6月1日正式关停服务。
然后搜索一下可替代方案，发现了一个网友开发的基于github issue的评论系统：Gitment
以下内容引自原作者博客，红色部分是个人评论或说明。

1. 注册 OAuth Application

点击此处来注册一个新的 OAuth Application。其他内容可以随意填写，但要确保填入正确的 callback URL（一般是评论页面对应的域名，如 https://imsun.net)。 callback url 是指登录完成后去跳转的页面的域名,当然是返回我们的博客页面的域名
你会得到一个 client ID 和一个 client secret，这个将被用于之后的用户登录。

2. 引入 Gitment

将下面的代码添加到你的页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: '页面 ID', // 可选。默认为 location.href
  owner: '你的 GitHub ID',
  repo: '存储评论的 repo', 
  oauth: {
    client_id: '你的 client ID',
    client_secret: '你的 client secret',
  },
})
gitment.render('container')
</script>

repo: '存储评论的 repo'这一步需要先在你的github新建一个仓库。
我使用的是next主题，所以把这段代码加到了themes/next/layout/_partials/footer.swig文件开头部分。
此时发布博客后就可以在文章的末尾看到评论的模块了。不过需要注意的是每篇文章都需要你手动先初始化评论，评论系统才可用，也可以理解为新建文章的评论系统默认是关闭的。
初始化前