github上部署自己的静态项目
前置知识
1、要在github部署项目要提交打包后的静态文件(html,css，js)到仓库里
2、我们看下github所提供给我们的部署方式有啥，如下所见；
要么是/root文件夹（就说仓库里全是打包后的产物：html,css，js要全部放到根目录下，根目录下尽量不要有其他多余的静态文件）
要么是/docs文件夹(就是打包后的产物：html,css，js要全部放到/docs下，根目录下可以有其他多余的静态文件，他去了docs里找静态文件去了，不影响)
3、如果你在github要部署多个项目，如何解决呢？仓库名来做区分。
比如部署了两个项目到github,A和B，它两都有相同的打包产物css:demo.css
github会如何请求呢?
//A项目
https://username.github.io/A/demo.css
//B项目
https://username.github.io/B/demo.css一 、 单个html要发布，使用前置知识里的/root方式
根html要用index.html命名才可以
如果有额外的css文件要在引入到html里的路径里加上仓库名称
比如仓库名称是githubhtml
<link rel="preload stylesheet" href="/githubhtml/vp-icons.css" as="style">
经过多次试验，代码改变后会自动发布新包，但是由于网络和缓存的问题，需要等待和强制刷新才可以看到最新的结果
二、vitepress项目
npm init -y
npm i -D vitepress
npx vitepress init根据前置知识2和3对vitepress的打包产物进行改造，这里使用的是前置知识里的/docs方式。在.vitepress\config.mts里添加
export default defineConfig({ base:"/github仓库名称/", outDir:"docs",
})1、解释下：base；如果你的仓库名称是ssg，修改base为"/ssg/" 打包后的html里的各种资源路径会自动加上"/ssg/"前缀 如：
<link rel="stylesheet" href="/ssg/style.css">
部署后的请求则是
https://用户名.github.com/ssg/style.css如果为"/" 则，
<link rel="stylesheet" href="/style.css">
部署后的请求css路径就是
https://用户名.github.com/style.css //报错2、解释下：outDir；outDir:"docs"的作用是打包后的文件放在根目录docs中 如果是outDir:"dist/demo" 则打包后的文件放在dist/demo中
然后执行npm run docs:build 会在根目录下生成docs目录，里面就是打包后的文件，这个文件是一定要提交到仓库的
三、vite/webpack项目，和vitepress部署一样的(使用/docs)，再加一种方式（/root）
1、如果用/docs部署，改造打包后的产物，在vite.config.ts文件中添加，打包，提交代码，使用/docs方式发布
//vite
export default defineConfig({base:"/github仓库名/",build: {outDir: "docs",},
})webpack
//webpack.config.js
const path = require('path');module.exports = {// 等价于Vite的base选项output: {publicPath: '/github仓库名/',path: path.resolve(__dirname, 'docs'), // 等价于Vite的outDir},
};vuecli脚手架
vue.config.js
module.exports = {// 等价于Vite的base选项publicPath: '/github仓库名/',// 等价于Vite的outDir选项outputDir: 'docs',
};2、用/root部署
改造打包后的产物，注意这里的outDir是build
//vite
export default defineConfig({base:"/github仓库名/",build: {outDir: "build",},
})安装插件
npm i gh-pages -D添加命令
"scripts": {"deploy": "gh-pages -d build"},解释下这个deploy命令的作用是啥
1.把build文件夹下的文件全部复制到gh-pages分支下
2.把gh-pages分支下的文件推送到github仓库
然后依次执行npm run build，npm run deploy
执行后会有如下代码，说明发布成功了
$ npm run deploy> vite-web@0.0.0 deploy
> gh-pages -d buildPublished
查看仓库会多出一个分支gh-pages，里面全是干净的打包的后（html,css，js）文件
然后就可以使用root发布了