在github上部署个人的vitepress文档网站

我开发的BMapViewer组件正式上线了文档使用了vitepress搭建编写使用github Pages进行部署现在可以正常访问了接下来我会完整的写一遍网站部署过程。我的文档网站https://banyan666.github.io/BMapViewer-docs/第一步创建仓库上传代码仓库必须要开源不然github Pages无法免费使用。第二步选择Settings - Pages - GitHub Actions第三步配置工作流vitepress在github上部署部署 VitePress 站点 | VitePress在根目录下创建.github/workflows/deploy.yml创建好deploy.yml文件后复制以下代码。# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程 # name: Deploy VitePress site to Pages on: # 在针对 main 分支的推送上运行。如果你 # 使用 master 分支作为默认分支请将其更改为 master push: branches: [master] # 允许你从 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: Checkout uses: actions/checkoutv5 with: fetch-depth: 0 # 如果未启用 lastUpdated则不需要 # - uses: pnpm/action-setupv4 # 如果使用 pnpm请取消此区域注释 # with: # version: 9 # - uses: oven-sh/setup-bunv1 # 如果使用 Bun请取消注释 - name: Setup Node uses: actions/setup-nodev6 with: node-version: 24 cache: npm # 或 pnpm / yarn - name: Setup Pages uses: actions/configure-pagesv4 - name: Install dependencies run: npm ci # 或 pnpm install / yarn install / bun install - name: Build with VitePress run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build - name: Upload artifact uses: actions/upload-pages-artifactv3 with: path: docs/.vitepress/dist # 部署工作 deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} needs: build runs-on: ubuntu-latest name: Deploy steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pagesv4第四步提交代码github pages支持CI/CD持续集成自动化部署点击仓库的Actions就会看到CI/CD持续集成的工作流。第五步点击settings-pages查看github pages给你分配的地址在浏览器里输入就能看到你的静态站点了。如果打开网站发现样式丢失那么是base地址配置有问题因为github给你分配的地址后拼了你的仓库名称所以你的base地址也要配置成仓库名称。在.vitepress目录中的config.mts中配置base地址与仓库名称相同修改完成后提交代码github自动集成稍等查看你的网站即可。