VuePress2.0 + Github Actions部署到Github Pages教程

VuePress官方文档
vue-press-project github地址

1. 首先创建一个github远程仓库vue-press-project
2. 把仓库克隆下来
3. 初始化项目

npm init -y
npm i vuepress@next -D

4. 在package.json文件添加一些scripts

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

5. 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

6. 创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

7. 在本地启动服务器来开发你的文档网站

npm run docs:dev

8. 创建 .github/workflows/docs.yml 文件来配置工作流

name: Deploy

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: npm
            - run: npm install

            - name: Build
              run: npm run docs:build

            - name: Deploy to GitHub Pages
              uses: crazy-max/ghaction-github-pages@v2
              with:
                  target_branch: gh-pages
                  build_dir: docs/.vuepress/dist
              env:
                  GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

9. 根目录创建vuepress.config.js文件，定义部署站点的基础路径

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
    base: "/vue-press-project/", // github仓库名
});

10. 配置GITHUB_TOKEN

选择权限，不知道选哪几个就全选Read and write

复制

找到仓库的设置

添加密钥

11. 提交代码到github

# 创建main分支
git checkout -b main

git add .
git commit -m 'first'
git push -u origin main

能看到

这代表成功，看到红色的 x 就代表构建失败，可点进去查看原因

构建成功会发现多了个分支

然后我们进入Settings/Pages

选择gh-pages分支的/目录作为根目录

访问https://ruan8.github.io/vue-press-project/