vuepress部署GitHub

1.部署

在 Github 上新建一个仓库，仓库名为：study-blog

2.配置项目路径，base是GitHub项目名称

module.exports = {
    base: '/study-blog/',
}

3.config.js

最终 config.js 文件内容：

module.exports = {
    title: 'xxxx 文档',
    description: 'xxxxx',
    base: '/study-blog/',
    theme: 'reco',
    locales: {
        '/': {
          lang: 'zh-CN'
        }
    },
    themeConfig: {
        // lastUpdated: '上次更新',
        subSidebar: 'auto',
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '小小灿 Study 日记', 
                items: [
                    { text: 'Github', link: 'https://github.com/lichengcan' }
                ]
            }
        ],
        sidebar: [
            {
                title: '欢迎学习',
                path: '/',
                collapsable: false,
                children: [
                    { title: "学前必读", path: "/" }
                ]
            },
            {
              title: "基础学习",
              path: '/handbook/ConditionalTypes',
              collapsable: false,
              children: [
                { title: "条件类型", path: "/handbook/ConditionalTypes" },
                { title: "泛型", path: "/handbook/Generics" }
              ],
            }
          ]
    }
}

4.部署脚本

在项目 vuepress-starter 目录下建立一个脚本文件：deploy.sh，注意修改对应的用户名和仓库名：

#!/usr/bin/env sh

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

set -e

#生成静态文件

npm run docs:build

#进入生成的文件夹

cd docs/.vuepress/dist

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

#如果发布到 https://<USERNAME>.github.io/<REPO>
#可以同时部署到GitHub和gitee

git push -f git@github.com:lichengcan/study-blog.git master:main
git push -f git@gitee.com:lichengcan0228/study-blog.git master:main
cd -