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 build

Published

查看仓库会多出一个分支gh-pages，里面全是干净的打包的后（html,css，js）文件

然后就可以使用root发布了