背景
之前个人博客都是依据 VuePress,直接整个项目上传到 Github 公共库房中,然后使用 Github Actions 直接构建到库房中的一个分支上,再把这个分支布置到 Github Pages 上,就这样用了好久,但是一直有几个问题比较困扰:
- 源码揭露可见,能够被随意仿制粘贴到其他地方
- 修正记载一览无遗,没有隐私性
- 部分文档不想揭露,即使删除后,仍能经过提交记载找回来
综上,网上搜索一番后,发现能够经过 GitHub 创立私有库房,把源码提交到私有库房后,经过 Actions 触发主动构建,并推送到一个揭露库房中,再在揭露库房中触发 Github Pages 的布置流程,完结博客更新发布的主动化流程。
GitHub Actions 是 GitHub 提供的一种主动化工作流服务,用于构建、测试和布置项目。它允许你在代码库房中配置和运行主动化的工作流程,以响应各种事情,比方代码推送、Pull 请求兼并等。GitHub Actions 能够协助团队主动化软件开发过程中的重复性使命,提高效率并确保代码的质量。
GitHub Pages 是 GitHub 提供的一项免费静态网站保管服务。它允许你使用 GitHub 库房来保管和发布个人、项目或安排的静态网页。
折腾
首要咱们需要在 Github 创立一个私有的库房叫 private_repo,并将本地的 Vuepress 博客项目和 private_repo 关联起来:
git remote add origin https://github.com/<username>/private_repo
然后修正博客项目根目录下 .github/workflows/deploy.yml
文件,在 workflows 目录下的文件都会被尝试解析为工作流。
# 工作流名称
name: Publish Blog
# 当推送到 main 分支时触发使命
on:
push:
branches:
- main
# 工作流
jobs:
# 名称
build-and-push:
# 运行环境
runs-on: ubuntu-latest
# 过程
steps:
- name: 检出项目
uses: actions/checkout@v4
with:
# 拉取记载数,由于只需要依据最新的版别构建,所以设为1就好
fetch-depth: 1
# 下面三个过程是 VuePress 的构建流程,依据不同 Static Site Generators 自定义
- name: 安装 pnpm
uses: pnpm/action-setup@v2
with:
version: 8
run_install: true
- name: 设置 Node.js
uses: actions/setup-node@v4
with:
node-version: 18
cache: pnpm
- name: 构建文档
env:
NODE_OPTIONS: --max_old_space_size=8192
run: |-
pnpm run docs:build
> src/.vuepress/dist/.nojekyll
# 关键过程:使用这个 action 将生成的文档 push 到指定库房
- name: 布置到公共库房
uses: peaceiris/actions-gh-pages@v3
with:
# Personal Access Token 下面讲
personal_token: ${{ secrets.PUBLISH_BLOG }}
# 指定push的库房
external_repository: <username>/public_repo
# 指定push的分支
publish_branch: main
# push 的目录
publish_dir: src/.vuepress/dist
# 是否只保存最新的提交记载
force_orphan: true
然后咱们再到 Github 上创立一个公共库房 public_repo,然后到 Settings -> developer settings -> Personal access tokens -> Fine-grained tokens 创立一个 Personal Access Token(PAT)。这儿 Github 提供了两种 PAT:
- Fine-grained tokens:细粒度的拜访令牌,能够指定适用的库房,有效期最多一年
- Tokens:经典拜访令牌,无法指定详细库房,粒度较粗,有效期能够无限
推荐使用新的 Fined-grained tokens,愈加安全,有效期能够长一点,偶尔保护一下也不费事。给予这个 token 公共库房 public_repo 的读写权限即可,生成后记住仿制一下 token,由于封闭页面后这个 token 就看不到值了。
然后咱们到 private_repo 的 Settings -> Secrets and variables -> Actions 页面,创立一个 Secret,名称恣意,value 就填刚刚生成的 PAT 即可。
这一步的原因在于,Github Actions 是在一个容器里运行的,因此要推送代码到某个库房前必须经过某种方法验证对这个库房有读写权限。上一步创立的 PAT 正好就颁发了 public_repo 的读写权限,因此 private_repo 这个库房在履行 Github Actions 时,能够经过${{ secrets.<secret_name> }}
这样的方法来引用这个 PAT,从而经过权限系统的校验。
最后,咱们把本地的 VuePress 项目推送到 private_repo,就会主动触发构建流程推送到 public_repo 了,记住在 public_repo 中开启 Github Pages,从主分支的根目录履行布置即可。
文末参考的几篇文章里都是使用手动履行 Shell 脚本的方法去推送,比方经过
git push "https://${{github.actor}}:${{secrets.<pat>}}@github.com/username/xxx.git"
这种依据用户名 密码的校验方法去验证,但 Github 在 2021 年现已封闭这种不安全的验证方法,全部换成依据 Token 的鉴权了。正好在网上偶然看到这么个能够履行主动推送的 action,相比 Shel 脚本使用更方便,看了下源码,是经过
https://x-access-token:${personalToken}@${getServerUrl().host}/${publishRepo}.git
使用x-access-token
头部完成的鉴权。
Vercel 布置
突然想到自己还有个 Dynadot 白嫖的域名没用上,这次顺便给他用起来的吧。先到 Vercel 上授权 Github 库房,然后相同的,设置从 public_repo 的根目录直接布置即可。首要是使用 Vercel 完成自定义域名和 CDN 加快,服务器是必不可能买的。
Vercel 提供了一种简单而强壮的方法来布置和保管前端应用程序。其主动化、全球 CDN、Serverless 架构等特性使得开发者能够更专注于应用的开发而不必过多重视基础设施的保护。
然后到 Dynadot 上,依据 Vercel – Domain 里面给的提示给域名设置一个 A 记载,等待10分钟让 DNS 记载分散到全球的 DNS 服务器即可:
温习一下 DNS(domain -> IP) 记载类型:
-
A 记载: Address Record,将域名映射到 IPv4 地址,例如:
example.com IN A 192.168.1.1
-
AAAA 记载:IPv6 Address Record,将域名映射到 IPv6 地址,例如:
example.com IN AAAA 2001:0db8:85a3:0000:0000:8a2e:0370:7334
-
CNAME 记载:Canonical Name,用于创立域名的别号,将一个域名指向另一个域名,例如将 www 别号指向 example.com:
www IN CNAME example.com
-
MX 记载: Mail Exchange,指定邮件服务器的域名和优先级,它告诉发送电子邮件的邮件服务器应该将邮件发送到哪个邮件服务器。例如表示邮件服务器
mailserver.example.com
具有优先级为 10:example.com IN MX 10 mailserver.example.com
-
PTR 记载: Pointer Record,用于将 IP 地址映射回域名,首要用于反向 DNS 查找。例如表示 IP 地址
192.168.1.1
对应的域名是host.example.com
:1.1.168.192.in-addr.arpa IN PTR host.example.com
-
TXT 记载:Text Record,用于存储文本信息,它通常用于验证域名的所有权、提供 SPF 记载(用于邮件认证)等。例如:
example.com IN TXT "v=spf1 include:_spf.example.com ~all"
别的能够经过
dig short example.com A @223.5.5.5
命令向指定 DNS 服务器查询指定域名的指定记载。