无需服务器!用Github Pages+Actions自动化构建一个免费的博客网站
无需服务器!用Github Pages+Actions自动化构建一个免费的博客网站
JonyLee上篇文章讲了用Hexo+安知鱼主题搭建博客网站,使用的方式是在本地运行Hexo框架进行构建,再将构建好的静态文件拷到云服务器或者虚拟主机上。
但是这会存在一个问题,就是你先得要有一个服务器,这样不可避免的会产生租用成本。
为了一个可有可无的东西增加开销,而且每次发文章还要在本地构建、上传,可能大家会觉得有门槛。
那么今天就分享一个新方案,它完全免费,无需本地构建,只需更新Markdown文章,就能自动发布博客。
这就是通过Github+Actions自动化构建工作流的方式,整个过程也不复杂,小白照着步骤操作都能成功。
以下是将本地 Hexo+Anzhiyu 主题博客通过 GitHub Actions 实现自动化部署的完整步骤:
🔗第一步:本地安装git和VScode
Git是是一个开源的分布式版本控制系统,在此处主要用于推送博客源代码到远程仓库Github以及进行文件版本控制。
而Visual Studio Code则是一个微软出品的免费代码编辑器,配合git可以方便的实现博客程序源码和文章的编辑和推送管理。
1. 安装并配置Git
访问 Git 官网,下载 Windows 版本(其他系统选择对应版本)
双击安装包运行安装,选择安装组件这里默认即可。
接下来一路下一步会有一系列配置选项。这里就不逐一截图了,其中几个关键配置选项选择如下:
- 选择默认编辑器: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 | git -v |
2. 安装并配置VScode
访问 VS Code 官网,下载 Windows System Installer x64 版本。
运行安装程序,并进行基础配置,打开 VS Code → 左侧扩展图标,安装如下几个必备扩展:
- GitLens(增强 Git 功能)
- Git Graph(可视化分支管理)
- GitHub Pull Requests(GitHub 集成)
📦 第二步:准备 GitHub 仓库
首先如果你还没有Github账号,那么注册一个,也很简单。页面是英文界面,如果觉得看起来吃力,可以用Edge自带翻译转成中文。
然后需要在Github上创建两个仓库,一个私有仓库,用于存储Hexo博客源码,一个公开仓库,用于自动部署静态文件。
1. 创建源码仓库(私有)
创建仓库(如 hexoblog-source
),用来存放 Hexo 源码(包括 source
、themes
、_config.yml
等)。
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
按钮。
生成新 Token,名称自己写,用于区分不同token即可,注意选择有效期,用于Actions部署建议永久,并且勾选相应权限:
repo
(全部仓库权限)workflow
(工作流权限)
复制生成的 Token并妥善保存。(注意该token仅显示一次)
2. 在源码仓库添加 Secret
进入Github创建的源码仓库,找到 Settings → Secrets and Variables→ Actions ,点击 New repository secret
按钮。
将以下值填入对应文本框:
- Name:
GH_TOKEN
(此密码名称建议不要修改,因为下面代码会用到,如果自己修改了记得下面代码相应修改掉) - Value:
粘贴上步复制的 Token
3. 配置本地Git与Github远程连接
本地Git配置与Github远程连接,首先配置 Git 全局设置,命令操作如下:
1 | # 配置用户信息(必须与 GitHub 账户一致) |
使用如下命令克隆Github上创建的源码仓库hexoblog-source
到本地:
1 | git clone https://github.com/<你的用户名>/hexoblog-source.git |
因为之前创建的仓库是空的,这时克隆下来的仓库只有一个空的hexoblog-source文件夹。将本地测试好的Hexo源码仓库文件(见上篇文章),拷贝至这个hexoblog-source文件夹。
然后开始初始提交本地代码,在hexoblog-source文件夹根目录,使用git执行以下命令:
1 | git add . |
这时会会弹出连接到Github的窗口,选择Token
方式,输入上面第1步创建的Token。即可完成提交。
⚙️ 第四步:配置 GitHub Actions 工作流
1. 创建 Workflow 文件
在本地源码仓库创建 .github/workflows/deploy.yml
,文件内容如下:
1 | name: Hexo Blog CI |
以上内容大家可以直接复制使用,唯二需要修改的是node版本和Git身份,根据自己的改一下就行,其他不用改。
2. 修改 Hexo 配置
在本地Hexo配置文件 _config.yml
中的deploy
部署配置项,填入以下内容,确认部署设置指向静态站点仓库:
1 | deploy: |
3. 触发首次部署
推送包含上步修改好的Actions工作流脚本deploy.yml
文件及Hexo配置文件 _config.yml
的本地代码到远程源码仓库。然后随便修改一个文件并再次推送,在 Actions
标签页查看实时日志。
如果有问题构建失败,也可以通过日志查找问题并解决。如果没有问题,该部署会显示成功。查看博客网站静态文件仓库 <yourname>.github.io
应该有静态文件生成。
此时可以进入下一步,设置自定义域名(如果你没有,第四步可以忽略,直接使用 https://<yourname>.github.io
也可以直接访问。)
🌐 第五步:绑定自定义域名
如果自己有域名需要配置自己的域名访问,可按此步骤操作,如果直接使用github域名访问,此步可忽略。
1. 在静态站点仓库设置
- 方法一(此方法被验证在后续提交构建时,CNAME文件会被清除导致无法访问,建议使用方法二):
进入静态页面发布仓库,即第一步创建的公开仓库<yourname>.github.io
→Settings
→Pages
,在Custom domain
中输入你自己的域名(如blog.yourdomain.com
),保存后仓库根目录会自动生成一个CNAME
文件 。
- 方法二:在 Hexo 源码目录
source/
下新建名为CNAME
的文件,无需后缀名,内容填入blog.yourdomain.com
,即为你的实际域名。然后在_config.yml
中添加如下内容,防止改文件被hexo渲染:
1 | # 跳过对 CNAME 文件的渲染处理 |
重新推送更新触发构建即可。
2. 在域名服务商配置 DNS
在你的域名服务商DNS设置里(如果托管在Cloudflare,则在Cloudflare对应域名管理的DNS项下),添加一条 CNAME 记录,其值如下:
1 | 主机记录:blog |
✅ 第六步:其他后续维护事项
1. 忽略不必要文件
在源码仓库的 .gitignore
中添加如下内容,可在向远程仓库提交代码时忽略一些不必要的内容:
1 | node_modules/ |
2. 日常更新流程
按以上流程操作完成后,你的博客将通过Github Actions及pages,实现 “完全免费,一次推送,自动发布”。
后续更新文章内容,只需要本地写好 Markdown 文档,然后保存到本地Hexo源码仓库的source/_posts
文件夹中,提交并推送到Github源码仓库,就会触发Actions 自动构建,并自动部署到网站静态文件仓库,完成网站更新流程。