Github Pages

Github Pages

2020/6/11 min
张筱

张筱

AI工程师

我的许多个人项目是前端库,这些项目都应该提供一个 demo 网站,以便使用者能无需 clone 和 build 就能直观看到最终效果。但是,网站托管的价格还没有便宜到任意项目都能用的地步。

Github Pages(Pages)提供一个免费的解决方案。此处我记录一些使用 Pages 过程中发现的技巧。

Github Actions

The guide提供了完整的发布教程,但没有提供标准化的开发工作流。

Github Actions(Actions)是一个好用的自动化 CI/CD 工具。用这个工具可以让开发工作和网站生成自动保持同步。

网站源文件默认存储在gh-pages分支中。感谢这个 action,整个过程可以自动化。

ghpage-publish:
  name: ghpage-publish
  runs-on: ubuntu-latest
  steps:
    - name: Checkout repository
      uses: actions/checkout@master
    - name: Set up Node.js
      uses: actions/setup-node@master
      with:
        node-version: 14.x
    - name: Set up dependency
      run: yarn install --frozen-lockfile
    - name: Build pages
      run: yarn build:docs
    - name: Publish
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: docs

以上 action 假设项目基于 Node.js,且使用yarn作为管理工具,且配置了build:docs作为 build 网站到/docs 目录的脚本。当这个 action 成功的时候,gh-pages分支中就有了最新版的网站。

唯一不好的点是gh-page必须手动创建,否则发布指令永远不会触发。这可能是 Pages 的一个 bug 导致的,但我没找到相关的 issue。另一个解决方法是用curl -X POST -i -u "<username>" https://api.github.com/repos/<username>/<reponame>/pages/builds手动触发发布指令。感谢官方指南

个人主页

Pages 不仅提供项目网站的托管,还提供用户网站的托管。每个 github 用户都能托管一个用户网站。源文件储存在<username>.github.io仓库中。

分支master有网站源文件。但很多时候网站都是用其它源文件中生成的,比如 React。此时就需要在另一个分支如source中保存源文件。可以用 Actions 自动化 build 和 publish 工作。