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

news2024/11/26 23:48:44

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构与算法(C语言)】1. 线性表的顺序存储

文章目录 前言一. 线性表插入和删除1. 元素的插入2. 元素的删除 二. 代码三. 优缺点 前言 线性表的顺序存储结构,指的是用一段地址连续的存储单元依次存储线性表的数据结构 一. 线性表插入和删除 1. 元素的插入 插入位置之后的数据都向后移一位,上图中元…

chrome 安装devtools

chrome 安装devtools 下载安装 链接:https://github.com/vuejs/devtools 选择对应版本: 安装yarn 下载 npm install -g yarn --registryhttps://registry.npmmirror.com进入下载的目录安装依赖 yarn install --registryhttps://registry.npmmirror.…

ASP.NET汽车销售管理系统的设计与开发

摘 要 随着人们生活水平的不断提高,人们对汽车的消费和需求也越来越旺盛。很多汽车销售公司的业务环节仍然运用人工记账的传统方法,既容易出错又会导致账目混乱,查询和统计起来也非常不方便,费时又费力,严重时会给公…

stm32单片机开发二、定时器-内部时钟中断和外部时钟中断、编码器

定时器本质就是一个计数器 案例:定时器定时中断 内部时钟中断 Timer_Init(); //定时中断初始化 /*** 函 数:定时中断初始化* 参 数:无* 返 回 值:无*/ void Timer_Init(void) {/*开启时钟*/RCC_APB1PeriphClockCmd(RCC…

CSS-复合选择器

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

在Linux操作系统中关于磁盘(硬盘)管理的操作

电脑中数据存储设备&#xff1a;硬盘&#xff08;实现数据的持久化存储&#xff09;&#xff0c;内存 在Linux操作系统中一切皆文件的思想&#xff0c;所有的设备在Linux操作系统中都是通过文件来标识的&#xff0c;所以每一个硬盘都对应一个块设备文件。 在Linux操作系统中所…

Golang | Leetcode Golang题解之第55题跳跃游戏

题目&#xff1a; 题解&#xff1a; // 贪心算法 func canJump(nums []int) bool {cover : 0n : len(nums)-1for i : 0; i < cover; i { // 每次与覆盖值比较cover max(inums[i], cover) //每走一步都将 cover 更新为最大值if cover > n {return true}}return false } …

YOLov5 + Gradio搭建简单的Web GUI

写在前面&#xff1a;当我们将模型训练出来了&#xff0c;此时就需要做UI界面给别人展示了。python提供的Gradio可以快速的搭建web页面。生成本地网址和公网网址&#xff0c;方面自己测试和用户测试。 一、安装 Gradio介绍 Gradio是一个开源的python库&#xff0c;用于构建机…

深度学习模型Deep Learning Model

什么是深度学习&#xff1f;&#xff1f; 深度学习模型是一种基于人工神经网络&#xff08;Artificial Neural Networks, ANN&#xff09;的机器学习模型&#xff0c;其核心思想是通过多层次的神经网络结构来学习数据的特征表示和模式。这些模型通常由多个层次&#xff08;深度…

WPS的JS宏如何设置Word文档的表格的单元格文字重新编号

希望对Word文档中的表格进行统一处理&#xff0c;表格内的编号&#xff0c;有时候会出现紊乱&#xff0c;下一个表格的编号承接了上一个表格的编号&#xff0c;实际需要重新编号。 当表格比较多时&#xff0c;手动更改非常麻烦&#xff0c;而且更改一遍并不能完成&#xff0c;…

测算sample gpt

测算代码 import pandas as pd import matplotlib.pyplot as pltlosspd.read_pickle("loss_8.pkl") plt.plot(loss) losspd.read_pickle("loss_16.pkl") plt.plot(loss) losspd.read_pickle("loss_4_8.pkl") plt.plot(loss) losspd.read_pickle(…

第5篇:创建Nios II工程之Hello_World<四>

Q&#xff1a;最后我们在DE2-115开发板上演示运行Hello_World程序。 A&#xff1a;先烧录编译Quartus硬件工程时生成的.sof文件&#xff0c;在FPGA上成功配置Nios II系统&#xff1b;然后在Nios II Eclipse窗口右键点击工程名hello_world&#xff0c;选择Run As-->Nios II …

低代码+定制物资管理:创新解决方案探析

引言 在当今快速变化的商业环境中&#xff0c;企业面临着不断增长的挑战&#xff0c;如提高效率、降低成本、满足客户需求等。为了应对这些挑战&#xff0c;企业需要不断创新并采用先进的技术解决方案。在这样的背景下&#xff0c;低代码开发和定制化物资管理成为了引领企业变…

03.Kafka 基本使用

Kafka 提供了一系列脚本用于命令行来操作 kafka。 1 Topic 操作 1.1 创建 Topic 创建一个名为 oldersix-topic 的 topic&#xff0c;副本数设置为3&#xff0c;分区数设置为2&#xff1a; bin/kafka-topics.sh \ --create \ --zookeeper 192.168.31.162:2181 \ --replication…

Blender曲线操作

1.几种常见建模方式 -多边形建模&#xff1a;Blender&#xff0c;C4D&#xff0c;3DsMax&#xff0c;MaYa -曲线&#xff1a; -曲面&#xff1a;Rhino&#xff08;Nurbs&#xff09; -雕刻&#xff1a;Blender&#xff0c;ZBrush -蜡笔&#xff1a;Blender 1&#xff09;新…

编译报错 - Missing trailing comma comma-dangle or Missing semicolon semi

一、comma-dangle规则&#xff1a; 这种错误通常出现在使用代码格式检查工具&#xff08;如ESLint&#xff09;时&#xff0c;具体是在JSON或者JavaScript对象、数组的最后一个元素后面缺少了逗号&#xff08;trailing comma&#xff09;。在某些编码标准中&#xff0c;要求在…

spring cloud eureka 初始化报错(A bean with that name has already been defined)

报错内容 The bean ‘eurekaRegistration’, defined in class path resource [org/springframework/cloud/netflix/eureka/EurekaClientAutoConfiguration E u r e k a C l i e n t C o n f i g u r a t i o n . c l a s s ] , c o u l d n o t b e r e g i s t e r e d . A …

MySQL:飞腾2000+Centos7.6 aarch64 部署MySQL8.0.36

目录 1.硬件环境 2.MySQL选择 Bundle版本【全部文件】​编辑 3.下载并安装 4.安装完成后检查mysql 5.初始化MySQL 6.那就问了&#xff0c;都初始化了啥&#xff1f; 7.尝试启动MySQL 8.给mysql文件授权 9.再次尝试启动正常 10.mysql初始化目录出现了mysql.sock 11.找…

MATLAB可视化图形绘制详解

图形常见的修饰命令 ①曲线修饰 曲线修饰包括曲线的顔色、线型和标示符号的设置。曲线修饰的命令格式如下。 plot(x,y,option):option定义了曲线的颜色、线型和标示符号。 MATLAB曲线修饰的各种选项见表 举例&#xff1a; x-2*pi:pi/50:2*pi; y1x.^2;y2cos(2*X);y3y1.*y2…

STM32应用开发教程进阶--Wi-Fi通信(ESP8266模块:STA、AP、STA+AP)

实现目标 1、熟悉Wi-F、ESP8266模块 2、掌握ESP8266模块共3种工作模式&#xff1a;STA、AP、STAAP的配置 3、具体实现目标&#xff1a;&#xff08;1&#xff09;AT固件烧录&#xff1b;&#xff08;2&#xff09;ESP8266模块STA、AP、STAAP的配置 一、Wi-Fi概述 1、Wi-Fi定…