首先你需要 拥有一个自己的Github Page,然后仓库中有你原始的项目代码。
如果你想选择通过打包后的
dist文件部署你的静态项目,可以忽略此文章
操作指南
- 点击
Actions配置自己的工作流文件
2. 点击 set up a workflow yourself 自定义配置,当然你也可以选择下方推荐和配置好的工作流

- 下方填写配置自己的工作流选项,你也可以选择右侧推荐的配置项,配置完成后点击完成创建
- 你也可以参考和使用下面的 配置
# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy static content to Pages
on:
# 仅在推送到默认分支时运行。
push:
branches: ['main']
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages。
permissions:
contents: read
pages: write
id-token: write
# 允许一个并发的部署
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
# 单次部署的工作描述
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: '16.x' # node版本号
registry-url: 'https://registry.npmjs.org'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

- 🎉 创建成功后,会生成一条提交记录,此时的每次
push推送记录操作都会执行你的工作流,进行打包/部署你的项目
- 部署成功后,刷新你的
github page地址,即可成功🆗


遇到的问题
部署后页面空白,提示路径问题
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
会看到多出的一条工作流配置 pages-build-deployment ,这是github page默认自带的,你每次push推送除了执行你自定义的配置外,还会执行这个。因此2者会出现冲突,然后造成此种错误。

- 解决方法:在设置中把构建部署的方式改为
Github Actions即可,这样每次只会有一条你自定义的工作流进行构建了
