^-^
Web开发者|阅读写作爱好者
我的博客网站写作工作流(二)Hexo&GithubAction
  1. 背景
  2. 网页上进行网站的写作过程描述💯
  3. 之后Github会自动进行的操作
  4. 如何做到-Github Action
    1. 再次提醒咱们已有的仓库
    2. 在本地先生成一对密钥
    3. 网页上分别配置这对密钥给两个仓库
    4. 正式编写Github Actions

这是真正意义上,在github上编写md文章。提交后啥也不用管,自动发布。


以上文字是我在github网页上创建了新的md文章,提交后,啥也不用管,自动就更新到我的网站!也就是真正意义上的,只要有网络,我就可以写文章,而之前要更新hexo博客网站,就必须携带电脑敲代码。

甚至,就算是在电脑上本地写文章,也不需要再执行hexo clean&&hexo deploy,等待hexo编译网站源代码,命令行打出一长串的生成信息。只需要将所有的代码push到github仓库,网站自动就会更新。

强烈推荐该种方法。

看以下教程时,注意有的步骤与我的博客网站写作工作流(一)区分。

背景

我在github上建好了两个仓库: 私有的 website 仓库公开的 github pages 仓库

我的网站是通过本地hexo加载自己做的博客网站主题hexo-theme-A4(已开源),生成静态页面,发布代码到 github pages仓库 ,再用vercel容器拉取 github pages代码 进行部署,使得允许互联网的访问。所以当 github pages仓库 任何的改动,vercel都会拉取最新的代码进行自动网站部署更新。

以上是我的博客网站写作工作流(一)的描述。现在是直接将本地hexo网站项目(举例我的文件夹名website)目录下所有数据,推送到github上的website仓库。

私有的 website仓库 : 网站真正意义上的源代码

公有的 github pages仓库 : 只存储源代码生成后的静态页面

网页上进行网站的写作过程描述💯

举例说今天我想写篇文章:

  1. 打开浏览器,点击保存的书签,跳转到我github上的website仓库(虽然是私有仓库,但是我自己能访问)

  2. 在website仓库里的/source/_post文件夹下创建一个markdown文件,直接在github页面进行该markdown文件写作

  3. 注意:hexo对markdown文件的front-matter有一些必须的参数(title、date必须),在写文章正文前添加如下信息

    ---
    title: 这里写你想要展示的文章标题 (必要)
    date: YYYY-MM-DD HH:mm (必要)
    tags: [自定义1, 自定义2, 等等] # 文章标签(选填)
    categories: [自定义] # 文章分类(选填)
    comment: false # 手动关闭该篇文章的评论系统(选填)
    ---
    
  4. 注意:检查github上新建的文章,文件后缀是否为.md

  5. 写作完毕,提交commit保存

以上步骤即完成了网站文章的更新。且自己在写作过程中,只需要专注于写作这件事,不会涉及到其他东西(诸如本地数据存储,上传,部署到网站等等)。

明白了新增一篇文章,那么去修改网站任意页面的内容相信你也一通百通了。

之后Github会自动进行的操作

当我们在github网页完成文章的新增或者修改后,提交commit。github会自动帮我们运行一些本来我们在本地执行的命令(如hexo generate、hexo deploy),将website仓库,即网站的源码,自动生成网站所有的最新静态页面,推送到 github pages仓库。vercel再自动拉取 github pages仓库的代码数据,完成部署网站。

如何做到-Github Action

以上是整个流程。最关键的一步,是“github识别到website仓库有更新,会去自动生成静态页面,推送到github pages仓库” 这一操作。实际上用到的就是Github Action服务。

以下为配置步骤:

再次提醒咱们已有的仓库

私有的 website 仓库 :网站真正意义上的源代码,存放hexo项目

公开的 github pages 仓库 :将只会存储源代码生成后的静态页面

在本地先生成一对密钥

这对密钥将使得 website仓库,能够访问到 github pages 仓库。

在本地电脑任意路径执行命令(你需要git环境):

ssh-keygen -f github-deploy-key

当前目录下会有 github-deploy-keygithub-deploy-key.pub 两个文件。

网页上分别配置这对密钥给两个仓库

配置website仓库

复制 本地刚生成的其中一个密钥github-deploy-key 文件的内容,在 website 仓库 Settings -> Secrets -> Add a new secret 页面上添加。

  1. Name 输入框填写 HEXO_DEPLOY_PRI
  2. Value 输入框填写 github-deploy-key 文件内容。

配置github pages仓库

复制 本地刚生成的其中一个密钥 github-deploy-key.pub 文件内容,在 github pages 仓库 Settings -> Deploy keys -> Add deploy key 页面上添加。

  1. Title 输入框填写 HEXO_DEPLOY_PUB
  2. Key 输入框填写 github-deploy-key.pub 文件内容。
  3. 勾选 Allow write access 选项。

正式编写Github Actions

来到 website 仓库,点击Action标签,点击页面上的 New workflow -> set up a workflow yourself ,复制以下内容

name: hexo-blog-deploy

on:
  push:
    branches:
      - main # 监测 website仓库的哪个分支变动,才会触发这个 Github Action

env:
  GIT_USER: nino # 随意更改,建议github user名称
  GIT_EMAIL: ninojay@1234.com # 随意更改,建议github 注册邮箱
  DEPLOY_REPO: HiNinoJay/HiNinoJay.github.io # 改为你的github pages 仓库名称

  DEPLOY_BRANCH: main # 部署到 github pages 仓库的哪个分支

jobs:
  build:
    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        os: [ubuntu-latest]
        node_version: [20.x] # 可改为自己本地node -v 的版本

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Checkout deploy repo
        uses: actions/checkout@v2
        with:
          repository: ${{ env.DEPLOY_REPO }}
          ref: ${{ env.DEPLOY_BRANCH }}
          path: .deploy_git

      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node_version }}

      - name: Configuration environment
        env:
          HEXO_DEPLOY_SECRET: ${{secrets.HEXO_DEPLOY_PRI}}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"

          # 配置私钥,否则无法访问部署库,提示 git@github.com: Permission denied (publickey).
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_SECRET" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts

          # 设置用户名和邮箱,否则提示 Please tell me who you are.
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL
          cp _config.a4.yml  themes/A4/_config.yml # 注意这里使用的是A4主题,如果你使用的是其他主题,自行更改

      - name: Install dependencies
        run: |
          npm remove node_modules 
          npm remove package-lock.json
          npm install
          npm install hexo-deployer-git --save
          # 可自行安装插件
          

      - name: Deploy hexo
        run: |
          npm run deploy

注意根据其中的注释,有的参数改为你的相关参数。

其实这个配置文件就是告诉Github,我监测当前仓库的哪个分支变动,然后将会推送给哪个仓库的哪个分支,这个过程中我要用什么样的机器,在这个机器上执行哪些指令。

完成以上过后保存即可。

建议此时,本地在 website目录下 执行 git pull,拉取下最新代码。以后只要你在本地,push代码到website仓库,那么Github Action都会执行配置文件里的命令自动帮你部署至 github pages仓库。

自然,你在Github网页上直接新增/修改 website仓库的任何内容,只要一commit,也都会自动执行 Github Action。

ps:该配置文件,我找了好久,自己调试了很多次,做了一些修改,才运行成功,如果你遇到了什么问题,可在下方评论区留言。

以上