芥子屋
0%

迁移 Ghost 博客至 Hexo 并使用 GitHub Pages 部署

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 4.2k 阅读时长 ≈ 10 分钟

为什么迁移

Ghost

优点：

  1. 提供后台管理界面，支持在线编辑文章，随时更新随时发布。
  2. 图片上传方便，直接拷贝到正文即可，会自动上传到服务器并生成 Markdown 链接。
  3. 支持多人同时使用，可用作团队博客。

缺点：

  1. 需要在服务器上部署 Ghost。
  2. 本地和服务器端文章同步麻烦（这也是我换用 Hexo 的主要原因）。
  3. 不支持离线编辑文章。虽说这个可以本地写完了再一次性拷贝到服务器上，但这又回到了第 2 点。
  4. Themes 配置麻烦，不够统一。Kaldorei 主题是我废了很大劲才搜罗到的，还得每次修改完源码后压缩上传（调样式的时候调的我头疼）。

dbdd8ad99f065192aa340cf474709b2d.png
fa0a3c8ae59030f8e5ef80a9b04d8c7d.png

Hexo

优点：

  1. 文档本地化。在本地编写博客，一条指令即可生成静态网页（具体体现就是你在 source/_posts 下编写 Markdown，写完了执行 hexo g 就可以生成样式美观的 index.html）。
  2. 一条指令即可部署到 GitHub Pages，不需要额外的服务器（配合第 1 条超级好用好嘛！）。
  3. 丰富的插件和主题，配置也统一化了。比如图中我使用的 Next 主题，主题的配置修改 theme/next/_config.yml；Hexo 的配置修改主目录的 _config.yml 即可。
  4. 图片上传还算方便。在与文章同名的文件夹下保存图片即可。这个下面会细说。

6bc65c0ff0fb6d62ea90ce4c35c04ac9.png
8b1c5aa127adbfef220cfb30a6d55e1d.png

安装部署

创建 GitHub Pages 仓库

GitHub Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 GitHub 上，你可以选择使用 GitHub Pages 默认提供的域名 github.io 或者自定义域名来发布站点。

GitHub Pages 分为两类，用户主页和项目主页。我们需要部署的是用户主页。需要在 GitHub 上新建一个仓库，仓库名必须为 ${github-username}.github.io，这样才会被识别为用户主页。用户主页是唯一的，填其他名称只会被当成普通项目。通过 https://${github-username}.github.io 进行访问。

创建完成后将仓库 clone 至本地。

分支管理

GitHub Pages 会自动部署静态网页文件，并将 master 分支作为部署的默认分支。为将静态网页和源文件（包含文章、主题等）分离开，强烈建议创建新分支。git checkout -b hexo 创建 hexo 分支。应当只将 master 分支当作静态网页的发布分支，而文档编辑和 Hexo 命令操作等都在 hexo 分支上完成。这样在执行 hexo generate -deploy 时就会将生成的静态文件（整个 public 文件夹）发布到 GitHub 的 master 分支上。

1
2
3
4
➜  github.io git:(hexo) ✗ git branch -v    

* hexo                  0d03653 dump ghost markdown files to hexo
  master                673d037 initial commit

安装 Hexo

Hexo 和 Ghost 一样，都是使用 Node.js 编写的，所以使用 npm 安装。

1
npm install hexo-cli -g

完成后执行 hexo -v 验证是否正确安装。

生成 Hexo 项目

现在你可以使用 hexo 命令了，在生成 Hexo 项目前需要确保一件事：你已将 Git 仓库 clone 至本地，并且处于 hexo 分支上。由于只能在空文件夹下生成 Hexo 项目，所以我们先将 .git 文件夹整个移出去，然后执行 hexo init 命令。最后别忘了将 .git 文件夹移回来。

1
2
3
➜  github.io git:(hexo) ✗ mv .git ../
➜  github.io ✗ hexo init 
➜  github.io ✗ mv ../.git ./

目录结构

1
2
3
4
➜  github.io git:(hexo) ✗ ls -F         
_admin-config.yml  node_modules/      public/            themes/
_config.yml        package-lock.json  scaffolds/         yarn.lock
db.json            package.json       source/

主要打交道的是下面这几个文件：

  • _config.yml Hexo 的配置文件，你的自定义配置会在该文件中修改
  • scaffolds/ 保存了 hexo 生成新文章所用的模版文件
  • source/ 主要保存文章的 Markdown 源文件
  • themes/ 保存主题的源代码
  • public/ 生成的静态文件，包括图片、Tags、Categories 等都保存在这里。执行 hexo g 生成；hexo clean 则会清空该文件夹。部署到 GitHub Pages 上的亦即该文件夹下的内容。

部署到 GitHub

最开始 source 文件夹中会自带一篇介绍 Hexo 的文章，我们可以直接拿它来测试部署是否成功。

Hexo 支持本地启动，命令为：

1
2
# hexo serve
hexo s

启动后访问 http://localhost:4000，就应该能看到自带的那篇文章。但为了能部署到 GitHub Pages 上，我们还需要做两件事：安装插件和修改配置。

在项目所在目录下执行：

1
npm install hexo-deployer-git --save

修改 _config.yml 将 repo 指定为自己的仓库地址，发布到的分支默认为 master：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

现在，执行如下命令即可将发布文章：

1
2
# hexo generate -deploy
hexo g -d

访问你的网址 https://${github-username}.github.io 去见证成果吧！

更换主题

Hexo 自带的默认主题是 landscape，不过我们可以从 Hexo主题库 或 GitHub 上找到自己喜欢的主题。Next 是 Hexo 最受欢迎的主题之一，下面我将用它向大家演示如何更换主题。

Ps: 目前 Next 主题已经升级到 v6.0 版本以上，GitHub 上的仓库从原先的旧版本（v5.1.4 及以下）：https://github.com/iissnan/hexo-theme-next 迁移到了新仓库中：https://github.com/theme-next/hexo-theme-next，目前版本是 v6.6.0。如果安装的是 v5 版本，在启动时会提示升级。

下载源码，直接将 Next 项目克隆到 Hexo 目录的 themes 文件夹下

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

启用 Next 主题，修改 Hexo 的 _config.yml

1
2
# theme: landscape
theme: next

v6.0 版本以上的 Next官方文档 也做了迁移，描述的很详细，包含了主题设置、三方服务和插件的配置等。所有要找的 themes/next/_config.yml 中的配置项在官方文档中都能找到。

更换域名

部署到 GitHub Pages 上会提供 https://${github-username}.github.io 默认的域名以供访问。除此之外，GitHub Pages 也提供绑定自定义域名的功能。

首先，你需要在阿里云万网、腾讯云或者 GoDaddy 上购买域名（我选择 GoDaddy 是因为它不需要备案），然后配置域名解析。下表是我的个性域名 s1mple.online 的配置项。其中：

  • CNAME 项用于将所有 *.s1mple.online 包含三级域名（不包括 s1mple.online）的访问路由到 s1mplecc.github.io。
  • A 项将二级域名 s1mple.online 路由到 192.30.252.153。此值可通过 ping s1mplecc.github.io 获得。
记录类型 记录类型 记录值
记录类型 主机记录 记录值
CNAME * s1mplecc.github.io
A @ 192.30.252.153

第二步，在本地 Hexo 的 source 文件夹下添加名为 CNAME 的文件，内容为个人域名地址，比如我的 s1mple.online。并执行 hexo g -d 部署到服务器。

1
2
echo 's1mple.online' > ./source/CNAME
hexo g -d

第三步，在 GitHub Pages 项目的配置中绑定个人域名，记得将 Enforce HTTPS 选项勾选上（GitHub 提供免费的 HTTPS 服务）。保存成功后如下图提示即可通过 https://s1mple.online 访问。

5

图片引用

当项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过绝对路径访问。比如头像。

1
2
3
4
5
6
# Markdown
![avatar](/images/avatar.jpeg)

# themes/next/_config.yml
avatar:
  url: /images/avatar.jpeg

除此之外，图片还可以放在 source/_posts 下与文章同名的目录中。需要先将 Hexo 配置文件中的开关打开。

1
2
# hexo _config.yml
post_asset_folder: true

这样在执行 hexo new xxx 后会在 source/_posts 中会生成文章 xxx.md 和同名文件夹 xxx。将图片资源放在 xxx 中，然后在 xxx.md 中使用图片的文件名引用它。

1
![](image.jpg)

ghost-to-hexo-migrater

我自己用 Python 写了一个迁移 Ghost 博客至 Hexo 的程序，项目已经提交到 GitHub。

主要做了如下事情：

  • 通过 Ghost API 将 Ghost 博客上的所有文章和图片下载到本地。
  • 给每篇文章加上 Hexo 规定的 header，包括 Title、创建日期、Tags；由于 Ghost 博客不支持分类，所以保留 categories 默认为空。
  • 按照 Hexo 的规定，创建与文章标题一致的文件夹用于存放文章中的图片，并更换文章中图片的 Markdown 链接。

这样可以将整个 downloads 文件夹拷贝到 Hexo 的 source/_posts 目录下发布即可！

7292889b7bb90233a1ac2dd1ac2cd97a.png

参考