GitHub Pages
约 1187 字大约 4 分钟
2025-01-02
介绍
GitHub Pages 是直接从 GitHub 存储库托管的静态站点，但它们不仅仅是静态文件的集合。 通过利用 Jekyll 和 Liquid 等网站生成技术，开发人员可定义被处理为完整静态网站的动态模板。 每次将更改提交到与网站关联的源分支时，都会使用最新更新重新生成该更改，并自动将其发布到目标 URL。
创建 GitHub Pages
- 登录
GitHub
- 如果没有账号可以创建
GitHub账号后登录
- 创建库
- 仓库名命名为：
[username].github.io
- 提交文件到仓库
- 建打包好的静态网站提交到仓库中
- 测试
- 代码提交之后就可以通过
https://[username].github.io来访了。
注意：默认情况下，GitHub Pages 站点在互联网上是公开可用的，即使站点的存储库是私有的或内部的。如果您的项目网站是从使用 GitHub 企业云的组织拥有的私有或内部存储库发布的，则可以管理该网站的访问控制。在具有托管用户的企业中，所有 GitHub Pages 网站都是私下发布的。否则，如果站点的存储库中有敏感数据，则可能需要在发布之前删除这些数据。
配置 GitHub Pages
配置发布分支
[username].github.io项目下Settings->Pages->Build and deployment->Branch配置分支，默认为master。
自定义域名
[username].github.io项目下Settings->Pages->Build and deployment->Custom domain配置域名。
- 购买一个域名
- 配置
DNS解析。域名购买成功并通过审核之后，就可以在域名购买的平台配置DNS的解析记录。通常我们使用的记录类型是CNAME，它可以帮助我们将原本默认的域名http://[username].github.io指向我们购买的域名。主机记录处可以填写www或者blog，具体可以根据你的网站的用途来确定。 - 绑定到
Github Pages在你的Github Pages仓库中，进入Setting-Code and automation-Pages, 在Custom domain中填写你在步骤2中配置好的域名，比如***.tech，点击save，github会花费一点时间做DNS check，成功时你能看到成功的提示。记得勾选下面的Enforce HTTPS。
GitHub Pages 构建和发布
GitHub Pages的构建和发布方式有多种。
1. 手动更新仓库代码
最简单的就是手动更新[username].github.io的代码
- 本地
build项目，上传打包的目录到[username].github.io中可以是主干和分支都可以，只需要和GitHub Pages配置相同就可以。
2. 半自动更新仓库代码
手动更新仓库代码中的build和push是可以通过脚本自动完成的。
创建一个buildDeploy.sh脚本，内容如下：
#!/usr/bin/env sh
###
# @Author: matiastang
# @Date: 2022-11-28 23:01:01
# @LastEditors: matiastang
# @LastEditTime: 2023-02-02 19:20:24
# @FilePath: /HulkPress/deploy.sh
# @Description: 部署脚本
###
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'Auto deploy from buildDeploy.sh'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -则更新之后运行脚本实现更新。运行脚本也可不一定需要手动，也可以弄成自动
3. 结合GitHub Actions 自动构建和发布
发布或更新GitHub Pages的只是需要更新[username].github.io仓库下面配置的对应分支就行了。我们完全可以通过GitHub Actions 自动构建和发布。
我使用的是VuePress，所以创建了.github/workfows/vuepress-deplou.yml
name: vueperss deploy
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: vueperss build and deploy
run: |
yarn install
yarn docs:build
cd docs/.vuepress/dist
git init
git config --global user.email ${{ secrets.MT_EMAIL }}
git config --global user.name ${{ secrets.MT_NAME }}
git add -A
git commit -m 'Auto deploy from Github Actions'
git push -f https://${{ secrets.MT_TOKEN }}@github.com/matiastang/matiastang.github.io master上面实现了在一个仓库中编写，然后再该仓库push时，自动build并将build的输出dist目录push到[usename].github.io仓库的master分支中。实现GitHub Pages的更新。用到了两个仓库。 其实也可以只使用[usename].github.io仓库，通过分支来区别修改分支和发布分支。看自己的策略，两种方式还是有点儿区别的。
注意上面涉及到了GitHub Actions、GitHub Token和gitHub actions secrets可以参考如下链接：