创建此站
添加 readme.md 说明文档
初始化前端项目
shell
pnpm init添加依赖包
shell
pnpm add -D vitepress@next
pnpm add vue初始化 vitpress
shell
pnpm vitepress init忽略 Vitepress 的构建缓存
.vitepress/dist
.vitepress/cache启用 GitHub Pages
在项目 Settings > Pages > Build and deployment > Source 中选择 GitHub Actions
添加 GitHub Actions
在项目的 .github/workflows 目录中创建一个名为 github-pages-deploy.yml 的文件,其中包含这样的内容:
yaml
name: Deploy GitHub Pages
on:
# 在 `main` 分支的推送上运行
push:
branches: [main]
# 允许你从 Actions 选项卡手动运行此工作流程
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# 只允许同时进行一次部署,跳过正在运行和最新队列之间的运行队列
# 但是,不要取消正在进行的运行,因为我们希望允许这些生产部署完成
concurrency:
group: pages
cancel-in-progress: false
jobs:
# 构建工作
build:
runs-on: ubuntu-latest
steps:
- name: 检出代码
uses: actions/checkout@v5
# with:
# fetch-depth: 0 # 如果未启用 lastUpdated,则不需要
- name: 安装 pnpm
uses: pnpm/action-setup@v4
- name: 安装 Node.js
uses: actions/setup-node@v6
with:
node-version: 24
cache: pnpm
- name: 配置 GitHub Pages
uses: actions/configure-pages@v4
- name: 安装依赖
run: pnpm install
- name: 构建项目
run: pnpm run build
- name: 上传制品
uses: actions/upload-pages-artifact@v3
with:
path: .vitepress/dist
# 部署工作
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
needs: build
runs-on: ubuntu-latest
name: 部署
steps:
- name: 部署 GitHub Pages
id: deployment
uses: actions/deploy-pages@v4