无需服务器!用Github Pages+Actions自动化构建一个免费的博客网站

上篇文章讲了用Hexo+安知鱼主题搭建博客网站,使用的方式是在本地运行Hexo框架进行构建,再将构建好的静态文件拷到云服务器或者虚拟主机上。

但是这会存在一个问题,就是你先得要有一个服务器,这样不可避免的会产生租用成本。

为了一个可有可无的东西增加开销,而且每次发文章还要在本地构建、上传,可能大家会觉得有门槛。

那么今天就分享一个新方案,它完全免费,无需本地构建,只需更新Markdown文章,就能自动发布博客

这就是通过Github+Actions自动化构建工作流的方式,整个过程也不复杂,小白照着步骤操作都能成功。

以下是将本地 Hexo+Anzhiyu 主题博客通过 GitHub Actions 实现自动化部署的完整步骤:


🔗第一步:本地安装git和VScode

Git是是一个开源的分布式版本控制系统,在此处主要用于推送博客源代码到远程仓库Github以及进行文件版本控制。

而Visual Studio Code则是一个微软出品的免费代码编辑器,配合git可以方便的实现博客程序源码和文章的编辑和推送管理。

1. 安装并配置Git

访问 Git 官网,下载 Windows 版本(其他系统选择对应版本)

微信图片_20250602113154.png

双击安装包运行安装,选择安装组件这里默认即可。

微信图片_20250602113921.png

接下来一路下一步会有一系列配置选项。这里就不逐一截图了,其中几个关键配置选项选择如下:

  • 选择默认编辑器:Use Visual Studio Code as Git’s default editer
  • 调整 PATH 环境:Git from the command line and also from 3rd-party software
  • HTTPS 传输后端:OpenSSL library
  • 行尾转换:Checkout Windows-style, commit Unix-style line endings
  • 终端模拟器:Use Windows’ default console window

其他选项保持默认即可。

CMD命令行验证是否安装成功:

1
2
git -v
# 应显示类似 git version 2.42.0.windows.2

2. 安装并配置VScode

访问 VS Code 官网,下载 Windows System Installer x64 版本。

微信图片_20250602115926.png

运行安装程序,并进行基础配置,打开 VS Code → 左侧扩展图标,安装如下几个必备扩展:

  • GitLens(增强 Git 功能)
  • Git Graph(可视化分支管理)
  • GitHub Pull Requests(GitHub 集成)

微信图片_20250602121347.png


📦 第二步:准备 GitHub 仓库

首先如果你还没有Github账号,那么注册一个,也很简单。页面是英文界面,如果觉得看起来吃力,可以用Edge自带翻译转成中文。

然后需要在Github上创建两个仓库,一个私有仓库,用于存储Hexo博客源码,一个公开仓库,用于自动部署静态文件。

1. 创建源码仓库(私有)

创建仓库(如 hexoblog-source),用来存放 Hexo 源码(包括 sourcethemes_config.yml 等)。

微信图片_20250602105636.png

2. 创建静态站点仓库(公开)

创建 <用户名>.github.io 仓库(如 yourname.github.io),用于托管生成的静态文件(该仓库名格式GitHub Pages 可自动识别)。

创建步骤同上,只是在上图第四步需要选择Public创建公共仓库,因为你的网页是需要公开访问的。


🔑第三步: 配置 Token(解决 Actions 部署权限)

1. 创建 Token

访问 GitHub → Settings → Developer Settings → Personal Access Tokens,选择Tokens(classic),点右上角Generate new token按钮。

微信图片_20250602203827.png

生成新 Token,名称自己写,用于区分不同token即可,注意选择有效期,用于Actions部署建议永久,并且勾选相应权限:

  • repo(全部仓库权限)
  • workflow(工作流权限)

微信图片_20250602204240.png

复制生成的 Token并妥善保存。(注意该token仅显示一次

2. 在源码仓库添加 Secret

进入Github创建的源码仓库,找到 Settings → Secrets and Variables→ Actions ,点击 New repository secret 按钮。

微信图片_20250602205216.png

将以下值填入对应文本框:

  • Name: GH_TOKEN(此密码名称建议不要修改,因为下面代码会用到,如果自己修改了记得下面代码相应修改掉)
  • Value: 粘贴上步复制的 Token

微信图片_20250602205625.png

3. 配置本地Git与Github远程连接

本地Git配置与Github远程连接,首先配置 Git 全局设置,命令操作如下:

1
2
3
# 配置用户信息(必须与 GitHub 账户一致)
git config --global user.name "YourGitHubUsername"
git config --global user.email "your@email.com"

使用如下命令克隆Github上创建的源码仓库hexoblog-source 到本地:

1
git clone https://github.com/<你的用户名>/hexoblog-source.git 

因为之前创建的仓库是空的,这时克隆下来的仓库只有一个空的hexoblog-source文件夹。将本地测试好的Hexo源码仓库文件(见上篇文章),拷贝至这个hexoblog-source文件夹。

然后开始初始提交本地代码,在hexoblog-source文件夹根目录,使用git执行以下命令:

1
2
3
git add .
git commit -m "初始提交"
git push -u origin main

这时会会弹出连接到Github的窗口,选择Token方式,输入上面第1步创建的Token。即可完成提交。

微信图片_20250602200615.png

微信图片_20250602200643.png


⚙️ 第四步:配置 GitHub Actions 工作流

1. 创建 Workflow 文件

在本地源码仓库创建 .github/workflows/deploy.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
60
61
62
63
name: Hexo Blog CI

on:
push:
branches: [main]

jobs:
deploy:
runs-on: ubuntu-latest
steps:
# 1. 检出代码
- name: Checkout source
uses: actions/checkout@v4
with:
submodules: recursive # 确保主题子模块被检出

# 2. 设置指定 Node.js 版本(与本地一致)
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: "20.x" # ⚠️ 修改为你的本地版本
cache: "npm" # 启用 npm 缓存

# 3. 配置缓存(节省Actions构建时间)
- name: Cache node_modules
uses: actions/cache@v3
id: cache-modules
with:
path: node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-

# 4. 安装依赖
- name: Install dependencies
run: |
npm install -g hexo-cli
# 仅当缓存未命中时才重新安装
if [ ! -d "node_modules" ]; then
npm install
fi
# 安装 Anzhiyu 主题所需渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save

# 5. 配置 Git 身份
- name: Configure Git
run: |
git config --global user.name "GitHub Actions"
git config --global user.email "actions@users.noreply.github.com"

# 6. 使用 Token 部署
- name: Deploy to GitHub Pages
env:
GH_TOKEN: ${{ secrets.GH_TOKEN }} # 包含写入权限的 Token
run: |
# 在部署前动态修改仓库 URL
sed -i "s|git@github.com:.*|https://oauth2:$GH_TOKEN@github.com/$GITHUB_REPOSITORY|" _config.yml

hexo clean
hexo generate
hexo deploy

      - run: echo "Deploy Successful!"

以上内容大家可以直接复制使用,唯二需要修改的是node版本和Git身份,根据自己的改一下就行,其他不用改。

2. 修改 Hexo 配置

在本地Hexo配置文件 _config.yml 中的deploy部署配置项,填入以下内容,确认部署设置指向静态站点仓库:

1
2
3
4
deploy:
type: git
repo: https://github.com/<用户名>/<yourname>.github.io.git # 静态文件仓库基础地址
branch: main # 默认分支

3. 触发首次部署

推送包含上步修改好的Actions工作流脚本deploy.yml文件及Hexo配置文件 _config.yml 的本地代码到远程源码仓库。然后随便修改一个文件并再次推送,在 Actions 标签页查看实时日志。

微信图片_20250602210714.png

微信图片_20250602210827.png

如果有问题构建失败,也可以通过日志查找问题并解决。如果没有问题,该部署会显示成功。查看博客网站静态文件仓库 <yourname>.github.io 应该有静态文件生成。

此时可以进入下一步,设置自定义域名(如果你没有,第四步可以忽略,直接使用 https://<yourname>.github.io 也可以直接访问。)


🌐 第五步:绑定自定义域名

如果自己有域名需要配置自己的域名访问,可按此步骤操作,如果直接使用github域名访问,此步可忽略。

1. 在静态站点仓库设置

  • 方法一(此方法被验证在后续提交构建时,CNAME文件会被清除导致无法访问,建议使用方法二):
    进入静态页面发布仓库,即第一步创建的公开仓库 <yourname>.github.ioSettingsPages ,在 Custom domain中输入你自己的域名(如 blog.yourdomain.com),保存后仓库根目录会自动生成一个 CNAME 文件 。

微信图片_20250602213108.png

  • 方法二:在 Hexo 源码目录source/ 下新建名为CNAME的文件,无需后缀名,内容填入blog.yourdomain.com ,即为你的实际域名。然后在 _config.yml 中添加如下内容,防止改文件被hexo渲染:
1
2
# 跳过对 CNAME 文件的渲染处理
skip_render: CNAME

重新推送更新触发构建即可。

2. 在域名服务商配置 DNS

在你的域名服务商DNS设置里(如果托管在Cloudflare,则在Cloudflare对应域名管理的DNS项下),添加一条 CNAME 记录,其值如下:

1
2
3
主机记录:blog  
记录类型:CNAME
记录值:<用户名>.github.io

✅ 第六步:其他后续维护事项

1. 忽略不必要文件

在源码仓库的 .gitignore 中添加如下内容,可在向远程仓库提交代码时忽略一些不必要的内容:

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

2. 日常更新流程

按以上流程操作完成后,你的博客将通过Github Actions及pages,实现 “完全免费,一次推送,自动发布”

后续更新文章内容,只需要本地写好 Markdown 文档,然后保存到本地Hexo源码仓库的source/_posts 文件夹中,提交并推送到Github源码仓库,就会触发Actions 自动构建,并自动部署到网站静态文件仓库,完成网站更新流程。