Github创建私有仓库保存源代码,然后通过 Github Action 发布到公共仓库

博客源码管理

前言

在之前教程中介绍了搭建Hexo博客,但是有些不足,通过本文可以进行优化。搭建免费博客:Hexo butterfly cloudflare | ZのBlog (fkcz.cc)

原本博客的发布方式为:

  • 在本地部署好 Hexo 博客的运行环境
  • 通过 hexo g 将写好的 Markdown 文件转化为 HTML 文件
  • 然后用 hexo d 把生成的 public 文件夹内所有内容推送到 Github 仓库中

这样直接将生成的可以运行的实际产物(生产版)推送到 GitHub 仓库上,而不是博客源码(开发版),每当本地环境变更或者想在别的电脑上写文章时就麻烦了、必须得重新部署一遍环境,而且也不会留存历史变更记录。
所以可以将博客源码推送到 Github 的私有仓库中,利用 GitHub 来对源码进行版本控制,同时也利于博客未来的维护、更新。

配置

  1. Github创建私有仓库

  2. 初始化本地仓库

    在本地hexo博客根目录,打开 Git Bash ,输入:git init,此时Hexo源码目录下会多一个.git的文件夹(Windows需要在文件管理器中打开:隐藏的项目)

  3. 绑定远程仓库

    使用VS code 操作,可以查看:VS Code & Git 使用 (未完成) | Z の Blog (fkcz.cc)
    或者直接使用命令操作:

    1
    2
    git remote add origin https://github.com/xxx/xxx.git     //添加远程仓库 
    git remote -v //查看当前配置的远程仓库信息

    为当前本地仓库添加Git用户名和邮箱:(因为我Git用的多用户配置,没有配置全局 Git,如果你设置的有全局设置,就不用这一步。) Git配置多个github账号 | ZのBlog (fkcz.cc)

    1
    2
    git config --local user.name xxx  
    git config --local user.email [email protected]
  4. 推送到远程仓库

    默认情况下 本地hexo博客根目录下的public/ 不会被上传(也不该被上传),必须要确保 .gitignore 文件中包含一行 public/

    1
    2
    3
    4
    5
    6
    7
    8
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    _multiconfig.yml

    还有一个很重要的一步:在 themes 文件夹下,找到主题文件夹下的.git文件夹,将其压缩备份,在将.git文件夹删除,然后再进行推送到远程仓库 这一步。(Git仓库中不能嵌套另一个,所以需要把其他的压缩备份或者删掉)

    使用VS code 操作,可以查看:VS Code & Git 使用 (未完成) | Z の Blog (fkcz.cc)
    或者直接使用命令操作:

    1
    2
    3
    git add                                        // 添加到暂存区
    git commit -m"添加个人网站源码" // 提交到本地仓库并添加提交信息
    git push origin hexo // 将本地的 `main` 分支推送(push)到远程仓库 `origin` 的 `main` 分支

    网络好的话,过一会就可以在之前创建的Github私有仓库看到文件了,现在就可以利用 Git 来对源码进行版本控制了。

博客自动化部署

前言

上一步已经创建了一个私有仓库,用来存放博客文件,存放的是编译前的文件,也就是电脑本地的文件,这个仓库是拿来做自动化和备份的。
现在创建创建一个公开仓库,也就是 pages 仓库,仓库名为 yourusername.github.io((将 yourusername 替换为你的 GitHub 用户名)。确保仓库是公开的。)

现在也就是一共有两个仓库

  • 一个公有仓库,存编译好的hexo 博客文件(pages仓库,博客仓库)
  • 一个私有仓库,存本地电脑编译前的源文件(自动化仓库,源文件仓库)

仓库配置

  1. 前言

    因为我们最终要实现的是:本地更改文件后推送到远程的源文件仓库 —> 源文件仓库触发自动部署任务后将博客推送到pages仓库。
    所以需要创建一个ssh密钥,私钥放在源文件仓库,公钥放在pages仓库,这样源文件仓库自动部署博客后就可以把生成的内容推送到pages仓库,具体操作如下:

    在本地电脑输入以下命令生成一对 SSH 密钥,注意更改文件名避免将正在使用的密钥覆盖。

    1
    ssh-keygen -t rsa -f ~/.ssh/id_deploy -C "[email protected]"

    通过上方命令后会在用户文件夹(C:\Users\你的用户名\.ssh)的.ssh 生成 id_deploy.pubid_deploy 。其中 id_deploy为私钥, id_deploy.pub 为公钥。

  2. 源文件仓库配置

    将上一步创建的 id_deploy 文件(私钥)的内容用记事本复制出来,在源文件仓库Settings -> Secrets -> Actions 中添加 SSH 私钥,命名为 SSH_DEPLOY_KEY

    Hexo_Git管理源码_多节点部署_1

    Github Action自动化部署Hexo博客_2

    然后再新建两个变量(后面需要用),分别是 GITHUBMAILGITHUBUSERNAME
    现在有了三个变量:

    • GITHUBMAIL:Github 用户邮箱地址
    • GITHUBUSERNAME:Github 用户名
    • SSH_DEPLOY_KEY:私钥内容
  3. pages仓库配置

    在pages仓库的 Settings -> Deploy keys 中添加 SSH 公钥,注意勾选 Allow write access

    Github Action自动化部署Hexo博客_3

配置Github Actions

  • 编写 Github 的脚本文件,GitHub Actions 的配置文件叫做 workflow 文件,存放在源代码仓库的 .github/workflows 目录下。
  • workflow 文件采用 YAML 格式,文件名可以任意取,但是后缀名统一为 .yml,比如 test.yml。一个库可以有多个 workflow 文件。
  • GitHub 在我们完成预设触发条件时,只要发现 .github/workflows 目录里面有 .yml 文件,就会自动读取运行该文件。

在本地的博客根目录中创建 .github/workflows/pages.yml,写入以下内容

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
name: Pages

on:
push:
branches: [main, master] # 当监测 main,master 的 push时
paths: # 监测所有 source 目录下的文件变动,所有 yml,json 后缀文件的变动。
- '*.json'
- '**.yml'
- '**/source/**'

jobs:
blog: # 任务名称
timeout-minutes: 30 # 设置 30 分钟超时
runs-on: ubuntu-latest # 指定最新 ubuntu 系统
env:
TZ: Asia/Shanghai
steps:
- uses: actions/checkout@v4 # 拉取仓库代码
- name: Use Node.js 20.x # 设置 node.js 环境
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Cache node_modules # 缓存 node_modules,提高编译速度,毕竟每月只有 2000 分钟。
uses: actions/cache@v4
with:
path: node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-${{ steps.setup-node.outputs.node-version }}
restore-keys: |
${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-
${{ runner.os }}-node-
${{ runner.os }}-
- name: Check Cache Status # 检查缓存状态
run: |
if [ -d node_modules ]; then
echo "Cache hit - node_modules directory exists."
else
echo "Cache miss - node_modules directory does not exist."
fi
- name: Init Node.js # 安装源代码所需插件
run: |
npm install
echo "init node successful"
- name: Build Blog # 编译创建静态博客文件
run: |
npm run clean
npm run build
echo "build blog successful"
- name: Setup Git # # 设置 git 信息
run: |
git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
git config --global user.email '${{ secrets.GITHUBEMAIL }}'
mkdir -p ~/.ssh
echo "${{ secrets.SSH_DEPLOY_KEY }}" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
- name: Deploy Blog # 推送静态博客文件
run: |
npm run deploy

- run: echo "Deploy Successful!"

这里面里面有三个变量,是上一步在源文件仓库中配置的。

其运行流程为:

  • 检查代码变动:在推送代码时,监测是否有文件变动,并且只监测特定的文件(JSON、YAML 和 source 目录下的文件变动)。
  • 设置环境:使用最新的 Ubuntu 系统,设置时区为亚洲/上海,使用 Node.js 20.x 环境。
  • 缓存依赖:缓存 node_modules 目录,以提高构建速度,减少依赖安装时间。
  • 检查缓存状态:检查缓存是否命中,如果存在 node_modules 目录,则命中缓存。
  • 初始化 Node.js:安装源代码所需的插件。
  • 构建静态博客:清理旧文件并构建新的静态博客文件。
  • 设置 Git 信息:配置 Git 用户名、邮箱,并添加 SSH 密钥以便后续推送代码。
  • 部署博客:运行 npm run deploy 命令来推送静态博客文件。

更改博客配置文件

更改博客根目录下的 _config.yml 文件,修改 deploy 部分

1
2
3
4
deploy:
type: git
repository: [email protected]:xxx/xxx.github.io # pages仓库的SSH地址
branch: main # pages仓库中存放博客文件的分支名

现在就利用 Github Actions 自动部署 Hexo 博客,后续在本地编写更改文件后,推送到远程仓库(源文件仓库、私有仓库)后,就会根据.github/workflows/pages.yml 自动部署,然后把生成后的博客文件推送到pages仓库中(公开仓库)

多节点部署博客

待。。。

参考

感谢下面大佬