当前位置：首页 > news >正文

部署vuepress项目到githubPage

news 来源：原创 2025/5/23 9:06:15

部署vuepress项目到githubPage

1. 项目文件夹下有两个分支（main和gh-page）

1.1 main分支存放项目代码
1.2 gh-page分支存放 npm run docs:build之后的dist里面的所有文件

2. 分别提交到github上

3. 你的项目/docs/.vuepress/config.js

   module.exports = {
     title: 'vuePress',
     description: 'VuePress GitHub Actions',
     base: '/yt-ui-doc/', // 必须配置正确
     repo: 'https://programmermao-001.github.io/yt-ui-doc/', // 远程仓库地址
     plugins: [
   	'vuepress-plugin-mermaidjs'
     ],
     themeConfig: {
       // ...
     }
   }

4. 你的项目/deploy.sh

   #!/usr/bin/env sh
   
   # 当发生错误时中止脚本
   set -e
   
   # 构建
   npm run build
   
   # cd 到构建输出的目录下
   cd dist
   
   # 部署到自定义域域名
   # echo 'www.example.com' > CNAME
   
   git init
   git add -A
   git commit -m 'deploy'
   
   # 部署到 https://<USERNAME>.github.io
   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
   
   # 部署到 https://<USERNAME>.github.io/<REPO>
   # 将下面这行替换成自己的仓库地址
   git push -f git@github.com:ProgrammerMao-001/yt-ui-doc.git master:gh-pages   
   cd -