VitePress 构建的博客如何部署到 github 平台?

VitePress 构建的博客如何部署到 github 平台?

1. 新建 github 项目

2. 构建 VitePress 项目

2.1. 设置 config 中的 base

由于我们的项目名称为 vite-press-demo,所以我们把 base 设置为 /vite-press-demo/,需注意前后 /

ts 复制代码
export default defineConfig({
  base: '/vite-press-demo/',
  ...,
})

2.2. 页面显示异常

这个时候你发现本地页面显示异常

是因为配置了 base 之后,导致路径不正确,点击上面的链接即可

2.3. favicon 显示异常

配置好 base 之后,你发现其他页面都没问题,图片也都能正常显示,但是 favicon 不能正常显示。

只需要把 head 中配置的 icon 路径改下即可,加上 /vite-press-demo 前缀

ts 复制代码
head: [
    ['link', { rel: 'icon', href: '/vite-press-demo/extension.ico'}],
], // 加上 /vite-press-demo 前缀

2.4. 运行 pnpm run docs:build 进行项目构建

项目正常构建成功

3. 项目发布到 github 上

3.1. clone 项目,并把构建的内容发布到 main 分支

是构建之后 dist 文件夹中的内容,不包括 dist 文件夹

shell 复制代码
.
├── 404.html
├── README.md
├── api
├── assets
├── basic
├── components
├── core
├── develop.svg
├── ext-2.svg
├── ext.svg
├── extension.ico
├── hashmap.json
├── index.html
├── react.svg
├── summarize
├── teach
├── team
├── tj.svg
└── vue.svg

3.2. 部署到 github

3.2.1. 点击 Setting 按钮
3.2.2. 点击 Pages 按钮
3.2.3. 找到 Branch,并下拉选择 main 分支
3.2.4. 点击 Save 保存
3.2.5. 等...

等几分钟,一般一分钟以内

不停的刷新当前页面也行

然后就会发现当前页面多了个 Visit site 模块

3.2.6. 点击 Visit site

点击之后,就跳转到对应的网站链接啦...

我这边是这个:https://18055975947.github.io/vite-press-demo/

4. 更新项目

当文档内容需要更新的时候,在开发完成之后,重新构建完成,把 dist 文件夹中内容重新发布到 main 分支即可,剩下的就是等就行

也可以点击 Setting-> Pages 模块刷新页面

可以看到这下面有部署的时间点

二、总结

1. 项目目录

shell 复制代码
.
├── docs
│   ├── .vitepress
│   │   ├── config.mts
│   │   └── utils.ts
│   ├── api
│   │   ├── api1.md
│   │   ├── api2.md
│   │   └── index.md
│   ├── basic
│   │   ├── basic1.md
│   │   ├── basic2.md
│   │   └── index.md
│   ├── components
│   │   └── test.md
│   ├── core
│   │   ├── core1.md
│   │   ├── core2.md
│   │   └── index.md
│   ├── index.md
│   ├── public
│   │   ├── basic
│   │   │   ├── basic-desc.png
│   │   │   └── basic-popup.png
│   │   ├── develop.svg
│   │   ├── ext-2.svg
│   │   ├── ext.svg
│   │   ├── extension.ico
│   │   ├── react.svg
│   │   ├── tj.svg
│   │   └── vue.svg
│   ├── summarize
│   │   ├── index.md
│   │   ├── summarize1.md
│   │   └── summarize2.md
│   ├── teach
│   │   ├── index.md
│   │   ├── teach1.md
│   │   └── teach2.md
│   └── team
│       ├── index.md
│       ├── team1.md
│       └── team2.md
├── package.json
└── pnpm-lock.yaml

2. 项目代码

源码:【develop 分支

Demo 预览:【demo 项目预览

使用 Vitepress 构建博客https://blog.csdn.net/guoqiankunmiss/article/details/138163772

相关推荐
BillKu12 分钟前
下载 Eclipse Temurin 的 OpenJDK 提示 “无法访问此网站 github.com 的响应时间过长”
github·openjdk·eclipse temurin
绝无仅有35 分钟前
HTTP面试之实战经验与总结
后端·面试·github
绝无仅有36 分钟前
职场面试redis经历之与一位资深技术面试官的技术问答与总结
后端·面试·github
老马啸西风6 小时前
v0.29.2 敏感词性能优化之基本类型拆箱、装箱的进一步优化的尝试
性能优化·开源·nlp·github·敏感词
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
伴杯猫9 小时前
【ESP32-IDF】基础外设开发2:系统中断矩阵
c语言·单片机·嵌入式硬件·mcu·物联网·github
赵得C10 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
叫我阿柒啊10 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
程序视点11 小时前
GitHub Copilot代码审查大升级!路径级指令+组织级规范,开发者效率再提升!
github·github copilot
@八度余温12 小时前
eslint 和 prettier 的相同点和区别
vue·eslint