Skip to content
On this page

vitepress + github page

文档

创建 github 代码仓库

An image

本地运行

git clone <仓库地址>

An image

  • 1.进入项目根目录,初始化
yarn init -y
  • 2.安装 VitePress
yarn add --dev vitepress
  • 3.创建第一篇文档
mkdir docs && echo '# Hello VitePress' > docs/index.md
  • 4.在 package.json添加一些script
{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}

An image

  • 5.运行
yarn docs:dev

open http://localhost:5174

An image

创建 workflows

根目录创建 .github/workflows/jekyll-gh-pages.yml

VITEPRESS 是变量

An image

name: Deploy

on:
  push:
    branches:
      - main

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

      - name: Build
        run: yarn docs:build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.VITEPRESS }}
          publish_dir: docs/.vitepress/dist
          # cname: example.com # if wanna deploy to custom domain

生成 github_token(secrets)

github 个人主页 Settings Developer settings

填好信息,保存后。会给一串字符,复制,下一步使用。

An image

代码仓库-settings-secret

将刚才的字符填入SecretName是之前提到的VITEPRESS,可自定义(输入小写字母,会自动转换大写)

An image

配置 config.js

创建/docs/.vitepress/config.js

中间填写仓库名称,必须以/开始结束

An image

js
export default {
  base: "/test-vitepress/",
};

提交代码

git commot -m 'commit'

git push

查看 actions

可以查看是否部署成功,绿色为成功,红色为失败。可以点进去看报错信息

An image

查看 pages

actions 成功后,进入 settings/pages(最上面有一个地址,可能会延迟出现)点击直接访问,查看是否成功。

An image

代码

Released under the MIT License.