vitepress部署到GitHub pages踩坑

问题

vitepress部署官方文档通过官方文档配置到github后，GitHub显示的是readme的内容，没有显示构建后的index.html。

原因

各方面查阅显示，github pages只会寻找根目录下的index.html文件；如果没有就会显示md文件，也就是readme。因此，对于vitepress项目，应该新建一个分支（gh-pages）放构建后的dist文件。

解决方法

通过自动化脚本解决，并在deploy.yml文件中使用该脚本构建并将构建后的dist文件推到gh-pages分支。以下为解决办法。

bash

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 获取leetcode
# npm run ac_record

# git add ./docs/.vitepress/components/lcData.json
# git commit -m "get ac record"
# git push

# 生成静态文件
yarn build

# 进入生成的文件夹
cd docs/.vitepress/dist


git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:pcerypeng/pcery-home.git main:gh-pages

cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

javascript

name: build to my github

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: yarn
      - run: yarn install --frozen-lockfile

      - name: Build
        run: bash deploy.sh

      # - name: CreateTag
      #   run git tag -a
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vitepress/dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

比较正式的解决办法

其实，github的Action构建，会依据publish_dir自动生成gh-pages,但是刚开始的时候他并未生成新的分支，后面莫名其妙生成了，原因还未找到。

vitepress部署到GitHub pages踩坑 #

问题 #

原因 #

解决方法 #

比较正式的解决办法 #

vitepress部署到GitHub pages踩坑

问题

原因

解决方法

比较正式的解决办法