前言
目前主流的博客大体分成动态博客和静态博客,相比于动态博客,静态博客基本不需要维护,也不依赖数据库等工具,降低了风险。有着众多免费部署的方案,成本低。
但也有其不便之处,像后台管理等没有动态博客方便,一些需求需要借助于其他平台实现,例如评论功能等。
迁移的契机是学习了下GitHub Actions
,可以很方便的实现持续集成和部署(CI/CD),况且自己购买的VPS搭建WordPress
下来访问速度并不满意。
过了这么多年,当年使用过一段时间的Hexo仍然流行,咱就接着用这个静态框架吧。
迁移数据
官方文档写的清楚了 从WordPress迁移
# 安装hexo-migrator-wordpress插件
$ npm install hexo-migrator-wordpress --save
# 迁移所有文章,<source>是WordPress导出的文件路径,(“Tools” → “Export” → “WordPress”)
$ hexo migrate wordpress <source>
手工审阅所有生成的markdown
文件,检查其中是否有错误。
利用Github Actions实现持续集成和部署(CI/CD)
Github Actions介绍
大家知道,持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions。
很多操作在不同项目里面是类似的,完全可以共享。GitHub 注意到了这一点,想出了一个很妙的点子,允许开发者把每个操作写成独立的脚本文件,存放到代码仓库,使得其他开发者可以引用。
如果你需要某个 action,不必自己写复杂的脚本,直接引用他人写好的 action 即可,整个持续集成过程,就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。
阮一峰 GitHub Actions 入门教程 这里只引用了个介绍,具体语法教程文中也有,感兴趣的也可以学习下。
以前我们都是在本地环境下用hexo g && hexo s
来生成和启动博客的,效果满意后hexo d
将publish
文件夹push
到Github Pages
的仓库里来实现博客的更新。
这种方法因为只上传了本地生成好的静态网页文件,不能追踪博客框架自身配置代码文件,本地环境迁移麻烦,临时换一台设备更新博客就捉急了。
使用Github Actions
后,我们只需要将博客整个项目代码上传,它将自动调用hexo g
生成静态文件并部署,实现了整个项目的追踪。
具体使用
这里我们会用到两个仓库。
一个私人仓库blog-source
,用来存储整个博客项目代码的。
一个公开仓库github-name.github.io
,用来存储生成的静态文件,github-name
就是你Github用户名,这里我就是Yuk-0v0.github.io
。
首先本地项目根目录中创建.github/workflows/hexo-deploy.yml
文件。
# .github/workflows/hexo-deploy.yml
name: hexo deploy
# main分支push的时候触发
on:
push:
branches:
- main
jobs:
build:
# 配置运行环境,这里用的是ubuntu
name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
runs-on: ubuntu-latest
strategy:
matrix:
os: [ubuntu-latest]
node_version: [12.x]
# 拉取本项目代码
steps:
- name: Checkout
uses: actions/checkout@v2
# 安装Node.js
- name: Use Node.js ${{ matrix.node_version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node_version }}
# 使用缓存依赖,加快速度
- name: Cache NPM dependencies
uses: actions/cache@v2
with:
path: node_modules
key: ${{ runner.OS }}-npm-cache
restore-keys: |
${{ runner.OS }}-npm-cache
# 安装依赖
- name: Install dependencies
run: |
npm install
# hexo clean和hexo generate
- name: Clean and generate hexo
run: |
npm run clean
npm run build
# 将生成好的./public部署到公开仓库
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
# 这里改成你自己的公开仓库
external_repository: Yuk-0v0/Yuk-0v0.github.io
publish_branch: main
publish_dir: ./public
接着使用ssh-keygen -o
生成公开仓库的部署密钥,具体怎么生成key,可以参考
生成 SSH 公钥,讲的很清楚。
然后分别在私人仓库的secrets中放入私钥,命名为ACTIONS_DEPLOY_KEY。
在公开仓库中添加公钥,名字随意。
这下就都配置好了,将整个项目提交到私人仓库中看看效果
# 本地项目根目录下
git init
git add .
git commit -m "first commit"
git branch -M main
# 改成你自己的私人仓库链接
git remote add origin https://github.com/Yuk-0v0/blog-source.git
git push -u origin main
不出意外GitHub Actions
运行成功且你访问Yuk-0v0.github.io
就能看到博客页面了
其他较为重要的操作
- 用
Vercel
加速访问,参考 使用Vercel加速博客访问。 - 私人仓库中添加
Webhook
更好的支持RSS等,参考 提升RSS体验。 - 用
hexo-all-minifier
压缩生成文件, Github。
最后成果: