^-^
Web开发者｜阅读写作爱好者
我的博客网站写作工作流（二）Hexo&GithubAction
最近更新：2024-09-26   |   字数总计：2k   |   阅读估时：7分钟   |   阅读量：次
  1. 背景
  2. 网页上进行网站的写作过程描述💯
  3. 之后Github会自动进行的操作
  4. 如何做到-Github Action
    1. 再次提醒咱们已有的仓库
    2. 在本地先生成一对密钥
    3. 网页上分别配置这对密钥给两个仓库
    4. 正式编写Github Actions
  5. 2024.09.26更新说明

这是真正意义上，在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必须），在写文章正文前添加如下信息

    1
    2
    3
    4
    5
    6
    7
    ---
    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环境）：

1
ssh-keygen -f github-deploy-key

当前目录下会有 github-deploy-key 和 github-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 ，复制以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
# 文件路径 .github/workflows/autoDeploy.yml
name: CI自动部署

on:
  push:
    branches: [main] # 当push指定分支操作触发时执行自动部署


jobs:
  hexo-deployment:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai
      


    steps:
    - name: 0.恢复文章修改时间
      run: |
        find source/_posts -name '*.md' | while read file; do touch -d "$(git log -1 --format="@%ct" "$file")" "$file"; done

    - name: 1.checkout分支
      uses: actions/checkout@v2
      with:
        fetch-depth: 0 # 添加深拷贝选择，解决github检出操作(checkout)默认是浅拷贝的问题



    - name: 2.node环境安装
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'

    - name: 3.缓存 Hexo 模块，提高构建速度
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 4.安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - name: 5.服务器验证
      env:
        ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
      run: |
        sudo timedatectl set-timezone "Asia/Shanghai"
        mkdir -p ~/.ssh/
        echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts  # 填写服务器IP(如果是自建Git仓库则填写相应的服务器IP)
        
    - name: 6.三连操作部署
      env:
        GIT_NAME: 填你自己的
        GIT_EMAIL: 填你自己的
      run: |
        git config --global user.name ${GIT_NAME}  # GitHub用户名
        git config --global user.email ${GIT_EMAIL} # GitHub用户名邮箱
        git ls-files -z | while read -d '' path; do touch -d $(git log -1 --format="@%ct" "$path") "$path"; done
        cp _config.a4.yml  themes/A4/_config.yml
        npx hexo clean && npx hexo g && npx hexo deploy

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

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

完成以上过后保存即可。

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

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

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

2024.09.26更新说明

因为hexo更新到了v1.9.6，新增了最近更新功能，但是CI场景下，hexo的最近更新时间发生错误，所以需要调整你的Github Action文件，上面的文件内容已做更改，下面摘录出来，主要是新增了以下内容解决文章更新时间问题：

1
2
3
4
5
6
7
8
9
# 第一部份
- name: 0.恢复文章修改时间
      run: |
        find source/_posts -name '*.md' | while read file; do touch -d "$(git log -1 --format="@%ct" "$file")" "$file"; done
        

 # 第二部份  
with:
	fetch-depth: 0 # 添加深拷贝选择，解决github检出操作(checkout)默认是浅拷贝的问题

ps：如果无法解决，请尝试google/百度搜索：“CI hexo 更新时间错误”，有很多案例可供你参考

2023-05-02 该篇文章被 nino 打上标签: 搭建网站 hexo CICD 归为分类: 软件

上一篇：一些片段 下一篇：hexo | hexo底层json数据内容
© 2024-1999 nino / 联系 / 支持 / 订阅 / 近邻
🌊看过大海的人不会忘记海的广阔🌊 本站由Hexo驱动｜使用Hexo-theme-A4主题