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发布了

相关推荐
ai小鬼头31 分钟前
Ollama+OpenWeb最新版0.42+0.3.35一键安装教程,轻松搞定AI模型部署
后端·架构·github
李大玄6 小时前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
泰勒朗斯7 小时前
如何在新机器上设置github完成内容git push
git·github
qianmoQ7 小时前
GitHub 趋势日报 (2025年07月05日)
github
weixin_307779138 小时前
批量OCR的GitHub项目
python·github·ocr
前端 贾公子10 小时前
monorepo + Turborepo 缓存
github
独立开阀者_FwtCoder11 小时前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
网硕互联的小客服11 小时前
如何排查服务器中已经存在的后门程序?
运维·服务器·github
橘黄的猫13 小时前
深入浅出掌握 Git 子模块:项目管理利器
前端·github