menu
随时随地 Hexo——我是如何使用 Hexo 的

Hexo 是一个使用 Node.js 作为构建引擎的极速、简单且强大的静态博客架构。但 Hexo 只有在安装了 Hexo 的环境上才能运行。于是我设计了一套实现 Hexo 随时随地部署、随时随地发布的方案。

同步 Hexo 工程

Hexo 和基于数据库的动态博客或者动静分离的博客不同,博客的文章等并不是储存在数据库中,而是由主题仓库、配置的 yml 文件,还有文章的 markdown 文件组成。这些我们称作是 Hexo 的工程文件。

初始化 Hexo 工程文件

安装完 Hexo 后,博客的目录中会包括以下内容:

$ ls -la
total 2043
drwxr-xr-x 1 Admin 197121       0 5 月   1 09:28 ./
drwxr-xr-x 1 Admin 197121       0 4 月  30 19:45 ../
drwxr-xr-x 1 Admin 197121       0 5 月   1 11:03 .git/
-rw-r--r-- 1 Admin 197121      65 4 月   5 03:16 .gitignore
-rw-r--r-- 1 Admin 197121    2124 4 月  30 23:03 _config.yml
-rw-r--r-- 1 Admin 197121 1725099 5 月   1 10:39 db.json
-rw-r--r-- 1 Admin 197121   45375 4 月  22 13:04 debug.log
drwxr-xr-x 1 Admin 197121       0 4 月  28 22:31 drafts/
drwxr-xr-x 1 Admin 197121       0 5 月   1 09:19 node_modules/
-rw-r--r-- 1 Admin 197121     796 5 月   1 09:27 package.json
drwxr-xr-x 1 Admin 197121       0 5 月   1 09:28 public/
drwxr-xr-x 1 Admin 197121       0 4 月   5 03:16 scaffolds/
drwxr-xr-x 1 Admin 197121       0 4 月  29 12:08 source/
drwxr-xr-x 1 Admin 197121       0 4 月  30 23:03 themes/

这就是博客工程文件了。

同步文件的方法有很多种,常见的就是通过 云盘 同步和通过 Git 管理。
在这里我介绍的是通过 Git 管理和同步博客的工程文件。

当然,Git 是 Hexo 的 dependencies,如果你装好了 Hexo,你肯定也装好了 Git。

在你的 Hexo 的目录下使用 git init 初始化一个 Git 仓库。并在 .gitignore 中填入以下内容来排除不需要同步的部分:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

然后自然是 git remote add git add . git commit -m git push 将你的博客工程文件推送到远端 Repo 当中。我的博客工程文件托管在 Coding 和 Gitlab 的私有库中。

同步 Hexo 到另一台设备

一般教程上介绍的都是需要在远端重新安装一遍完整的 Hexo 并也初始化一个 Git 仓库,还需要 git reset --hard 来重置。。。我介绍另一种办法。

首先,在另一台终端上,使用 npm install hexo-cli -g 安装 Hexo 的基本命令行。这个是需要全局安装的。

如果你安装了其它辅助工具,如我使用了 gulp 压缩 html,这时候就又需要额外全局安装 gulp。

新建一个目录,并使用 git clone 将你的博客远端文件拉下来。cd 到你 clone 下来的目录里,直接使用 npm install 安装依赖。

这一步中 npm 会使用 package.json 安装依赖。package.json 里面已经保存了 Hexo 的必备资源包信息, 包括基本的 Hexo、你曾经安装过的插件等等。npm install 后 Hexo 环境就建立起来了。

等安装完了以后,迁移就完成了。以后在不同的设备上管理 Hexo 就像和管理 Git Repo 一样,使用 git pull git add git commit git push 指令即可。

我后来编写了一个 shell 脚本,可以实现在任何安装了 Git、Nodejs 的终端上完成一键安装 hexo-cli gulp 和执行 npm install(懒喵)


Hexo 有一个算不上坑的地方,page.updated 函数当没有在 front-matter 定义时,是会跟随本地文件的改动日期而变动的。所以在多设备间同步 Hexo 时,需要为每篇文章指定 page.updatedfront-matter

在移动端使用 Hexo

如果你想在移动端安装 Hexo,你可以读一读这篇文章:《手机端部署 hexo 博客到 GithubPage》

但是,我并不建议这么做:手机端运行的速度远远不如电脑端,甚至不如 CI。我在手机端运行一次 hexo g 需要花费 37s,在 CI 只需要 11s,在我的电脑上是 2.7s。所以我在移动端依然是用 Git 管理 Hexo,然后,将页面生成的部分交给 CI 平台。这就是我接下来要讲的:

用 CI 实现 Hexo 持续集成

在一些情况下,你不能在某个设备上安装 Hexo,比如公共电脑之类的,有时你甚至只能在代码托管的网页端用 Web Editor 修改和发布博客。这样如何实现 Hexo 的发布呢?
你需要借助 CI,借助 CI 可以实现静态页面在远端生成和自动远端部署。

如何在 CI 平台上部署 Hexo,你可以阅读我的下列文章:

你也可以将持续集成移植到 Travis CI 或者其它 CI 平台中。在 CI 安装 Hexo 和同步工程文件的过程可以参考本文之前的“同步 Hexo 到另一台设备”。

部署 Hexo

如果你的博客是直接在部署到 Pages 服务上的话,那么就没什么需要担心的了。因为绝大部分 Pages 都支持 Git 部署。你只要根据文档配置 hexo-deploy-git 即可。
但是我的博客部署在自己独立的 WebServer 上,所以需要把生成的静态页面部署到我的 WebServer。为了安全,我没有直接在 WebServer 上部署 Repo,这样就不能直接一步到位地把静态页面 deploy 到 WebServer 上。

所以,这就是我的方案:
首先,我需要将我生成的页面部署到一个公开的 Git Repo 中,在这里我选择了 Github 新建一个 Repo。至于部署方式,我之前选择使用 SSH 连接 Github 的 Repo,后来改成使用 Github 的 Personal access token 来获得对 Repo 的写入权限。

通过 CI 的环境变量保管 SSH 或者 Personal access token 是最安全的选择。在 CI 的后台添加一个环境变量,将 Personal access token 写入其中。然后新建一个 deploy.sh 文件,写入以下内容:

cd ./public #生成的静态页面会存储在 public 目录下
git init
git config --global push.default matching
git config --global user.email "username@example.com" #填入 GitHub 的邮箱地址
git config --global user.name "username" #填入 GitHub 的用户名
git add --all . #提交所有内容
git commit -m "Site updated with CI" #自动构建后的内容将全部以此信息提交
git push --quiet --force https://{设置的环境变量名}}@github.com/ 你的 GitHub 用户名 / 你的代码仓库名.git master

使用 SSH 也可以通过类似的方案实现。

在 CI 的 workflow 中调用这个脚本即可实现 hexo-deploy-git 的效果。

由于我在使用 Gitlab 的私有库保管工程文件,使用 Gitlab CI 持续集成。所以我直接“肆无忌惮”地直接 hexo d 的目标 {Personal access token}@github.com/neoFelhz/MyBlog.git 写进了 hexo-deploy-git 的配置中。严格来讲,这是非常不安全的。

然后,在 WebServer 上部署一个 WebHook,然后在 Github 的 Repo 设定中添加该 WebHook,这样可以实现 Github 上 Repo 有更新时通知 WebServer 拉去静态页面的内容到 WebServer。

本文作者:neoFelhz
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可,阅读 相关说明
本文链接:https://blog.nfz.moe/archives/use-hexo-at-any-time-any-place.html