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

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

1. 新建 github 项目

github project

2. 构建 VitePress 项目

2.1. 设置 config 中的 base

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

export default defineConfig({
  base: '/vite-press-demo/',
  ...,
})

2.2. 页面显示异常

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

error
是因为配置了 base 之后,导致路径不正确,点击上面的链接即可
在这里插入图片描述

2.3. favicon 显示异常

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

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

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

favicon

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

项目正常构建成功
build

3. 项目发布到 github 上

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

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

.
├── 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 按钮

setting

3.2.2. 点击 Pages 按钮

pages

3.2.3. 找到 Branch,并下拉选择 main 分支

main

3.2.4. 点击 Save 保存

save

3.2.5. 等…

等几分钟,一般一分钟以内
不停的刷新当前页面也行
然后就会发现当前页面多了个 Visit site 模块
在这里插入图片描述

3.2.6. 点击 Visit site

visit site
点击之后,就跳转到对应的网站链接啦…
我这边是这个:https://18055975947.github.io/vite-press-demo/

site

4. 更新项目

当文档内容需要更新的时候,在开发完成之后,重新构建完成,把 dist 文件夹中内容重新发布到 main 分支即可,剩下的就是等就行
也可以点击 Setting-> Pages 模块刷新页面
可以看到这下面有部署的时间点
loading

二、总结

1. 项目目录

.
├── 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/582263.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

tidb离线本地安装及mysql迁移到tidb

一、背景(tidb8.0社区版) 信创背景下不多说好吧,从资料上查tidb和OceanBase“兼容”(这个词有意思)的比较好。 其实对比了很多数据库,有些是提供云服务的,有些“不像”mysql,综合考虑…

uniapp:K线图,支持H5,APP

使用KLineChart完成K线图制作,完成效果: 1、安装KLineChart npm install klinecharts2、页面中使用 <template><view class="index"><!-- 上方选项卡 --><view class="kline-tabs"><view :style="{color: current==ite…

Windows使用bat远程操作Linux并执行命令

背景&#xff1a;让客户可以简单在Windows中能自己执行 Linux中的脚本&#xff0c;傻瓜式操作&#xff01; 方法&#xff1a;做一个简单的bat脚本&#xff01;能远程连接到Linux&#xff0c;并执行Linux命令&#xff01;客户双击就能使用&#xff01; 1、原先上网查询到使用P…

深度学习:基于Keras框架,使用神经网络模型对葡萄酒类型进行预测分析

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…

《Fundamentals of Power Electronics》——全桥型隔离降压转换器

以下是关于全桥型隔离降压转换器的相关知识点&#xff1a; 全桥变压器隔离型降压转换器如下图所示。 上图展示了一个具有二次侧绕组中心抽头的版本&#xff0c;该电路常用于产生低输出电压。二次侧绕组的上下两个绕组可以看作是两个单独的绕组&#xff0c;因此可以看成是具有变…

CSS-复合选择器

作用&#xff1a; 后代选择器&#xff1a; 子代选择器 并集选择器 用逗号隔开&#xff0c;在style里面写的时候&#xff0c;每一个标签空一行。 <title>Document</title><style>p,div,span{color: aqua;}</style> </head> <body><p>…

Java对象在堆和栈上的存储(对象布局,待完善)

0、前言 这里提到的 Java 对象不仅仅包含引用类型&#xff08;Object&#xff09;&#xff0c;还包含基本数据类型&#xff08;boolean、int、long、float、double&#xff09;。文中部分图片来源于 B站 黑马程序员。 1、在栈上的数据存储 1.1、局部变量 局部变量包含以下情…

C++:map和set的封装

关于红黑树的模拟实现&#xff0c;大家不清楚的先去看看博主的博客再来看这篇文章&#xff0c;因为set和map的封装底层都是利用用的红黑树。所以这里不会过多介绍红黑树的相关内容&#xff0c;而更多的是去为了契合STL中的红黑树去进行改造&#xff0c;让封装的set和map能够去复…

【Java】Java基础 使用集合实现斗地主分牌

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 今天使用集合TreeSet来实现一个斗地主的分牌流程。 TreeSet集合的一个特点就是 元素有序&#xff0c;这样就方便我们分的牌自动排序。 0.思路 1.创建玩家手牌集合 我们到时候分的牌都存储在这里&#xff0c;但你可能会…

华为静音模式指定联系人来电响铃

华为静音模式指定联系人来电响铃 本人7年水果转华为&#xff0c;手机常年静音但是还是想收到指定人来电的。水果这个地方做的是很方便的&#xff0c;直接添加紧急联系人&#xff0c;什么声音都没有&#xff0c;只有指定人的电话铃声 直接上结论&#xff0c;华为是不支持直接这样…

关于google search console工具提交sitemap.xml无法抓取的问题解决办法

其实这个问题很好解决。 第一种情况&#xff1a;利用工具为我们的网站自动生成静态的sitemap.xml文件。这种可以检查下是否完整&#xff0c;然后上传到根目录下去&#xff0c;再去google search console提交我们的网站地图。 第二种情况&#xff1a;同样利用工具自动生成动态s…

【kettle005】kettle访问Oracle数据库并处理数据至execl文件(已更新)

1.一直以来想写下基于kettle的系列文章&#xff0c;作为较火的数据ETL工具&#xff0c;也是日常项目开发中常用的一款工具&#xff0c;最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下Oracle数据库相关知识体系 3.欢迎批评指正&#xff0c;跪谢一键三连&am…

MQTT基础知识

mqtt_manul MQTT物联网协议的学习笔记 一、MQTT基础知识 主要优势 发布订阅模式&#xff0c;一对多消息发布基于 TCP/IP 网络连接消息Qos支持&#xff0c;可靠传输保证&#xff08;QoS机制保证可靠传输&#xff09;灵活的消息传输&#xff0c;不关心 Payload 数据格式&…

爬虫的实战应用之短信炸弹playwright现代网页测试工具

不讲废话&#xff0c;先上原理&#xff1a; 短信炸弹&#xff0c;也就是说持续对一个手机进行发送短信&#xff0c;实现的方式就是&#xff0c;利用某些网站的登录 &#xff0c;注册的时候&#xff0c;发送短信验证码来实现。 如下图&#xff0c;其中有一个id为phone的输入框&a…

如何收集EMC Data Domain 的日志

遇到复杂问题&#xff0c;您第一时间需要做的就是收集日志&#xff0c;下面对EMC DataDomain 存储系统&#xff08;有人也叫做VTL虚拟带库&#xff09;如何收集日志做一个详细说明&#xff1a; EMC DD的日志分为两种&#xff0c;一种是Autosupport&#xff0c;一种是support b…

STM32-TIM定时器与PWM输出

学习目标&#xff1a; 1. 熟练掌握 TIM 的参数配置。 2. 掌握通道的参数配置。 3. 深刻理解 PWM 与功率的关系。 4. 理解 PWM 的原理示意。 一 什么是 PWM 输出 PWM &#xff08; pulse width modulation &#xff09;一种脉冲宽度调节技术。 PWM 的效果是什么样子&#xf…

【kettle006】kettle访问华为openGauss高斯数据库并处理数据至execl文件

1.一直以来想写下基于kettle的系列文章&#xff0c;作为较火的数据ETL工具&#xff0c;也是日常项目开发中常用的一款工具&#xff0c;最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下华为openGauss高斯数据库相关知识体系 3.欢迎批评指正&#xff0c;跪谢…

10.通用定时器

驱动电机 RGB LED亮度&#xff08;呼吸灯&#xff09; 舵机&#xff08;遥控车、机械臂&#xff09; 通用定时器作用 1.延时 2.定时器更新中断 3.输出比较&#xff08;PWM波、驱动IO输出波形&#xff08;脉冲&#xff09;&#xff09; 4.输入捕获&…

C语言——小知识和小细节17

一、未能给指针成功赋值 #include <stdio.h> #include <stdlib.h> #include <string.h>void GetMemory(char* p) {p (char*)malloc(20 * sizeof(char)); }void Test() {char* str NULL;GetMemory(str);strcpy(str, "Hello World!");printf(&quo…

分布式ID之雪花算法

1. Seata对雪花算法生成ID的改良 滑动验证页面 &#xff08;含代码&讲解&#xff09; Seata基于改良版雪花算法的分布式UUID生成器分析&#xff1a;时间戳和节点ID位置进行了调换。官网&#xff1a;Seata基于改良版雪花算法的分布式UUID生成器分析 | Apache Seata关于新版…