部署教程
思路:使用 Github Page 静态网站托管服务
步骤如下
准备工作:在 config.mjs 文件中的开头配置 base,代码如下
javascript
base:'vitepress', // 路由为 GitHub 仓库名称(1)在根目录下添加.gitignore文件,文件内容如下
node_modules
.DS_Store
dist
dist-ssr
cache
.cache
.temp
*.local在根目录下==添加空文件==,命名为.nojekyll
(2)使用 git 命令推送到 GitHub 仓库
(3)进入本仓库的 settings,找到 page,选择 GitHub Action
(4)选择仓库上方的 Actions,设置工作流
(5)创建deploy.yml脚本,提交更改
工作流脚本(截止 2025 年 6.18 前)
js
name: Deploy VitePress site to Pages
on:
push:
branches: [main] # 监听 main 分支的 push 事件
permissions:
contents: read # 读取仓库内容
pages: write # 允许部署到 GitHub Pages
id-token: write # 允许使用 id-token 进行认证
concurrency:
group: pages
cancel-in-progress: false # 保证每次只会有一个部署在进行中
jobs:
# 构建工作
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # 保证检查所有提交,尤其是需要获取历史信息时
- name: Setup pnpm
uses: pnpm/action-setup@v3
with:
version: 8.6.12 # 指定 pnpm 版本
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 18.20.4 # 使用 Node.js 18.20.4
cache: pnpm # 启用 pnpm 缓存
- name: Setup Pages
uses: actions/configure-pages@v4 # 配置 GitHub Pages
- name: Install dependencies
run: pnpm install # 安装依赖
- name: Build with VitePress
run: |
pnpm run docs:build # 构建 VitePress 项目
touch .vitepress/dist/.nojekyll # 防止 GitHub Pages 使用 Jekyll 处理这个站点
- name: Upload artifact
uses: actions/upload-pages-artifact@v3 # 使用 v3 上传构建产物
with:
path: .vitepress/dist # 上传 .vitepress/dist 目录
# 部署工作
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }} # 从后续的输出中获取部署后的页面URL
needs: build # 确保部署在构建完成后进行
runs-on: ubuntu-latest
name: Deploy
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4 # 使用 v4 部署构建产物说明
注意:这里==使用的是 pnpm==,在 node 和 pnpm 版本号的代码中需要==换成本地对应的版本==
job 中的部分
yml
- name: Setup pnpm
uses: pnpm/action-setup@v3
with:
version: 8.6.12 # 指定 pnpm 版本
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 18.20.4 # 使用 Node.js 18.20.4
cache: pnpm # 启用 pnpm 缓存