github仓库添加在线页面

type

Post

status

Published

date

Oct 9, 2022

slug

github-pages

summary

为你的仓库增加在线页面。

仓库配置

仓库新建 gh-pages 分支，我们可以将打包好的页面推送到此分支，结构大概为：


index.html      # 默认 xx
other-dir/      # 其它目录
another-dir/    # 其它目录
...             # 等

这样，假设你的仓库名为 test，那么访问 yourname.github.io/test/ 即可看到 index.html 为入口的页面，组织仓库类似 orgname.github.io/repo-name/ 。

自动化(Github Actions)

关键是使用 github-pages-deploy-action 这个库来自动推送构建好的页面到 gh-pages 分支。


name: Generate Page Workflow
permissions:
  contents: write # 使用写权限，后面要推代码
on:
  push:
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16]
    steps:
    - uses: actions/checkout@v2
    - uses: pnpm/action-setup@v2.2.2
      with:
        version: 7
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
    - name: Install dependencies
      run: pnpm install
    - name: Build Docs
      run: pnpm build # 构建命令啥的
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        folder: dist # 要推送的目录，默认推送到 gh-pages，更多配置可参考该库的文档

参考

GitHub - my-init/vue-ui: vue3, vite, monorepo, vitepress

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/my-init/vue-ui