一、 新建一个项目
首先，你需要有一个项目，接下来的操作都是基于这个项目仓库进行升华的。这里以创建Vue3应用为例， 参考vue官网新建一个vue应用
npm init vue@latest
按照提示，一步一步往下选择就可以，如图：
项目被创建之后，通过以下命令安装依赖并启动开发服务器
cd github-ci-demo
yarn install
yarn dev
就可以访问开发环境
二、 推到GitHub仓库
方式多种多样，只要推到仓库就行。先去github新建一个仓库，然后本地运行以下命令
git init
git add .
git commit -m 'feat: first commit '
git remote add origin git@github.com:wx901120/github-ci-demo.git
git push origin master
至此，项目就推上去了
三、GitHub Actions实现自动化部署
针对它是什么、怎样运作的问题，可以参考阮一峰老师的文章GitHub Actions 入门教程，
3.1、生成workflow文件
在当前仓库的.github/workflows目录下，生成一个 workflow 文件，名字可以随便取，如ci.yml
参考别人已经写好的action：JamesIves/github-pages-deploy-action@v4
name: GitHub Actions Build and Deploy Demo # 大标题
on:
push:
branches:
- master # 监听哪个分支的哪个动作
permissions:
contents: write # 设置权限，可写，也可以不用配置，v4版本新增的
jobs:
build-and-deploy: # 其中一个任务的名称，ID
runs-on: ubuntu-latest # 这个任务运行所需的环境
steps:
- name: Checkout 🛎️ # 第一步：获取源码
uses: actions/checkout@v3 # 使用的工具
- name: Install and Build 🔧 # 第二步：下载依赖和构建
run: |
yarn install
yarn build
- name: Deploy 🚀 # 第三步：部署
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist # 部署的目录
branch: gh-pages # 部署到哪个分支
3.2、检验部署
将刚才写好的代码，提交到仓库，看是否会触发自动化部署，打开你的仓库的Actions就可以看到构建过程，如图所示：
自动部署成功
3.3、检验登录网址
部署成功后，访问网址，发现页面空白，打开控制台发现报错了。。。
于是，查看Vite官网-部署，发现通过
vite构建的项目需要注意vite.config.ts中的base参数配置
于是，修改vite配置中的
base
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
+ base: "/github-ci-demo/",
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
之后，再次部署，登录，发现还是报错，index.html文件也不是dist目录下生成的文件，炸裂。。。。有知道的大佬麻烦解释下。
没办法，最后通过vite官网提供的.yml文件成功了。
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# 仅在推送到默认分支时运行。
push:
branches: ['master']
# 这个选项可以使你手动在 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@v3
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
