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

相关推荐
love530love1 小时前
【保姆级教程】阿里 Wan2.1-T2V-14B 模型本地部署全流程:从环境配置到视频生成(附避坑指南)
人工智能·windows·python·开源·大模型·github·音视频
cxr8283 小时前
Claude Code PM 深度实战指南:AI驱动的GitHub项目管理与并行协作
人工智能·驱动开发·github
金融数据出海6 小时前
黄金金融期货数据API对接技术文档
开发语言·金融·github
hfd19907 小时前
GitHub 宕机自救指南:保障开发工作连续性
github
绝无仅有9 小时前
未来教育行业的 Go 服务开发解决方案与实践
后端·面试·github
逛逛GitHub12 小时前
这 4 个牛逼 GitHub 开源项目,太优质了。
github
知行力13 小时前
【GitHub每日速递】不止 TeamViewer 替代!RustDesk 与 PowerToys,Windows 效率神器
windows·github·teamviewer
杨杨杨大侠14 小时前
实战案例:商品详情页数据聚合服务的技术实现
java·spring·github
杨杨杨大侠14 小时前
实战案例:保险理赔线上审核系统的技术实现
java·spring·github
FutureUniant16 小时前
GitHub每日最火火火项目(9.5)
人工智能·microsoft·计算机视觉·ai·github