Hexo + Github Pages + Github Actions + Github Issues 工作流
使用 Github Issue
写文章,同步到 Hexo
静态站点,利用 Github Actions
构建 Hexo
静态站点并发布到 Github Pages
,构建易用的工作流。
背景
目标当然是为了能够方便快捷地写作,同时低成本,最好是能白嫖。
先看看起始的写作流程是什么
- 把项目 Clone 到本地
npm install
安装依赖- 执行
hexo new xxx
在source/_posts/
目录创建一个 Markdown 文件 - 使用 Markdown 编辑器打开新创建的文件进行写作
- 执行
hexo build && hexo deploy
发布到gh-pages
上
遇到的问题:
如果在一个新的设备上,当开始写作时,要做很多前置工作才能准备好环境,很多时候,当everything is ready,已经没有写作的兴致了。
Github Actions
自动构建
自从 Github
被微软收购后,开始财大气粗地推出了很多需要烧钱的功能,Github Actions
就是一项强大的功能,可以用 Github Actions
来做CI/CD 自动化流程。借助 Github Actions
和 Github
在线编辑 Markdown 的功能可以不用把项目 Clone 下来了。
我可以在 Github
在线仓库中,在对应的 source/_posts/
目录直接 Create New File
, 新增一个 Markdown 文件,然后直接在线编辑即可,编辑完直接在线 commit
到仓库中。
Github Actions
在检测到 master
分支上有新的 commit
—— 即 push
事件,自动执行拉 master
分支,安装依赖,执行构建,发布到 gh-pages
分支这一系列操作。
遇到的问题:
- 在线创建的 Markdown 文件是空的,需要我手动填充 Front Matter 内容和格式,一是容易遗漏,二也容易出错。
- Github 仓库的在线 Markdown 编辑器不能支持图片的上传,导致每次写作时,需要引用图片的时候,我还需要想办法把图片上传到图床获得图片地址才行,太不优雅了。
图片放在哪里?
关于图片放在哪里的问题,首先我不喜欢把图片放在仓库中,虽然不会丢失,但是会导致仓库变大,不太好看。而所有的国内的所谓图床,大企业的如微信、微博都有防盗链,无法使用在我的个人站点,而小企业的图床都是朝不保夕,说不定哪天就没了,很不稳定。所以可供选择的图床仅有国外的类似 imgur
等相对而言还比较可靠。
我发现在 Github 的 issue 中上传的图片可在无鉴权的情况下访问,也没有限制第三方网站的直接引用,所以相对于 imgur
,我更倾向于把图片上传到 Github 中,毕竟我的整个站点都是放在 Github 仓库中,那我希望我的图片也能放在 Github 上。
用 Github Issues
写作
自从发现在 Github Issues 中可以上传图片后,我就发现 Github Issues 的编辑器很好用,支持 Markdown 还能直接拖拽上传图片。除此之外,还有模板的能力,可以在模板中写入 Front Matter,能完美解决上面遇到的两个问题。那么如果我用 Github Issues
写作,然后使用 Github Actions
把 issues 中的文章同步到仓库,就能发布到个人站点了。
为此,写了一个 nodejs
脚本,去读取仓库下的 issues
内容同步到 sources/_posts/
文件夹,可在这里找到具体实现。
具体步骤如下:
在项目仓库中创建一个 Issue Label 命名为
posts
,脚本将拉取包含此 label 的 issues 并生成 Markdown 文件。在生成 Markdown 文件时,在 Front Matter 中插入一个特殊的字段create_from_issue: true
以标记是的 issue 自动生成的。创建一个 Issue 模板(Issue Template), 命名为 posts,labels 选中 posts label, 然后填充 posts 的模板内容填充。这里需要注意的是 posts 使用 Front Matter 来定义创建时间、标题、分类、标签等元数据,但是 issue template 也使用 Front Matter 来定义模块的标题、描述、内容等数据,所以如果在模块的默认内容中也使用 Front Matter来填充,会冲突,所以内容区域的Front Matter不要写全,可以只写上面部分或下面部分。如下图:
2.a. 使用 Front Matter 作为模板内容填充,从模块创建时,内容是空的。
2.b. 不用完整的 Front Matter 填充,仅填写上面的分隔符,从模板创建时内容正常。
经过上面一番操作,终于可以愉快的写作了,不再需要clone项目等前置操作,流程完全自动化了,不再有任何的技术门槛了。
国内访问
GIthub Pages 在国内的访问一直都很不流畅,处于半墙不墙的状态,如果有条件的话当然是可以在 Gitee
码云部署一个 Gitee Pages
作为镜像站点,但是码云从2022年起,所有的代码都会被人工审核,Gitee Pages
更是要求实名认证 + 手举身份证的照片,如果不介意,Gitee Pages应该是最好的方案。如果介意,可以使用 GitLab Pages
或 netlify.app
这两个虽然在国内没有服务器,但是目前还没有被墙,也可以作为替代方案。