name: Github issus to Hexo action
description: Generate hexo article from github issue
branding:
icon: arrow-up-circle
color: gray-dark
inputs:
issue_url:
description: The blog issue link. Like https://github.com/flytam/blog/issues
required: true
output:
description: The directory of the hexo source. Default `process.cwd()`
required: false
replace:
description: Whether to replace the contents of the original directory. Default `false`
required: false
runs:
using: node16
main: dist/index.js
前言
平时不少同学都有写博客的习惯,这里介绍一种通过Github Issue写博客并自动部署hexo到Github Page的工作流。本文主要介绍
什么是Github action
GitHub action 是一个持续集成和持续交付平台,可以自动化构建、测试和部署。例如可以创建工作流来构建和测试仓库的每个pr,或将合并pr部署到生产环境
这张图从左到右分别是:
更多详情可见github doc
我们在日常的CI/CD过程中,很多流程都是重复并且类似的和完全可以共享,这些能共享的能力就是一个个action。多个action集成在一起就组成了一个工作流。Github官方也提供了一个官方Github action市场来让开发者们去发布和可以使用别人的action
基本上日常的使用场景都能成action市场上找到。本文我们后续打造的工作流我们也只需要开发一个从指定issue链接生成hexo markdown文件的action即可,其它流程都使用市场上现成的action
使用Github action也是非常简单。在工作流中使用
uses
去使用action,并通过with
传入相关action参数即可。例如我们使用下文开发的指定issue链接生成hexo markdown文件的action。使用效果如下。传递几个参数开发并发布一个Github action
这里我们使用Node.Js去开发指定issue链接生成hexo markdown文件的action。一个action本质上就是一个脚本读取工作流中的一些参数然后执行相关操作再输出结果
项目基本结构
使用TypeScript进行开发,初始化相关配置后的基本的目录结构如下
action.yml
每一个Github action都需要配置一个
action.yml
配置文件,说明一些和该action有关的信息。这里我们新建的yml文件如下issue_url
是必选参数,output
和replace
是可选参数runs.using
和runs.main
声明了我们脚本文件的执行环境为node16、程序的入口为dist/index.js
branding
。action的图标和颜色,这个是必须的 不然是不能发布到marketplace逻辑开发
这里我们需要对入参进行读取,这里使用官方提供的
@action/core
包通过
core.getInput
即可对action的入参进行读取了生成hexo文件 这里使用我之前开发的
csdnsynchexo
完整代码
完整仓库详见
这样,我们的action执行完后,就会将hexo的文章产物输出来,后面的工作流就可以使用文章产物进行下一步操作。我们就完成了这个action的逻辑开发了
打包
由于Github action是不会去安装我们的依赖node_modules。这里需要使用
ncc
去打包源码和依赖新增一个build命令用于打包
"build": "rm -rf dist && ncc build src/index.ts -o dist -s",
这样我们将代码打包输出到
dist/index.js
中去发布到Github action市场
打造Github Issue写博客并自动部署hexo到Github Page的工作流
blog-source
仓库配置https://flytam.github.io/blog
。因此需要将_config.yml
的url修改成我们部署的路径blog
仓库配置personal access token
在Token页面中,点击New personal access token
,输入名字和有效期并选择Scope->repo
勾选,并复制生成的token到
blog
和blog-source
仓库下,分别Settings
->New repository secret
-> 输入对应的name和value粘贴token并保存 。这个token用于后续action对仓库进行拉取和推送操作workflow
我们会用到如下actionaction/checkout@v3
。用于拉取git仓库ad-m/github-push-action@master
。用于推送git仓库flytam/github-issue-to-hexo@v1.0.3
。用于将github issue生成hexo文件,也就是上文我们开发的actiontheme-keep/hexo-deploy-github-pages-action@master
。用于部署hexo到gh-pages
在
blog
仓库的根目录下新建.github/workflows/deploy.yml
文件。填入以下内容这个工作流的流程是:
blog-source
仓库的文章目录下并提交到blog-source
仓库然后配置
blog
的github page配置。Settings
->Page
->Branch: gh-pages
。将blog
仓库的gh-pages
分支作为Github Page进行发布在
blog-source
仓库的根目录下新建.github/workflows/deploy.yml
文件。填入以下内容 这个工作流的流程是:blog-source
仓库main分支有push操作时触发blog
的gh-pages
分支我们修改
blog
下某个issue并提交,可见我们的部署已经成功了。hexo源文件更新+部署页面https://blog.flytam.vip/已更新。如果遇到了某些图片有防盗链显示不出来,在hexo的header中添加
<meta name="referrer" content="no-referrer" />
头即可总结
到这里,我们就完成了整个自动化部署issue到hexo博客的流程并学习到了如何开发、使用Github action。如果你觉得本文不错的话,欢迎点赞、收藏、转发、关注
参考
How to Build Your First JavaScript GitHub Action
Building GitHub Action to publish Hexo post from GitHub Issue