从零开始-VitePress 构建个人博客上传GitHub自动构建访问

从零开始-VitePress 构建个人博客上传GitHub自动构建访问

序言

VitePress 官网:VitePress 中文版

1. 什么是 VitePress

VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的站点而设计。简而言之,VitePress 获取用 Markdown 编写的内容,对其应用主题,并生成可以轻松部署到任何地方的静态 HTML 页面。

2、性能

  1. 快速的初始加载
  2. 加载完成后可以快速切换
  3. 高效的交互

一、项目构建

1、新建GitHub博客项目

请添加图片描述

2、将项目clone到本地

3、cd到项目目录

二、安装依赖配置

1、安装pnpm

推荐使用 pnpm,安装pnpm:

npm install -g pnpm

2、安装vitepress

pnpm add vitepress -D
# or
yarn add vitepress -D

3、初始化 VitePress

pnpm vitepress init

初始化之后,会有对应的项目问题需要进行填写,示例如下:
建议在第一项改成.docs目录,以便它与项目的其余部分分开。
请添加图片描述

4、初步项目目录

├─ blog
│  ├——─ .vitepress //当前目录所在的位置就是文档的根目录 最核心的目录|--
│  │  └─ config.mjs //项目的配置文件,最重要
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json
  1. .vitepress,最核心的目录
  2. theme目录。自定义主题配置,css样式等
  3. config.mjs。最核心的文件,各种配置导航栏、侧边栏、标题什么的都是在这里
  4. node_modules。安装的依赖
  5. api-exampl
    es.md和markdown-examples.md。官方给的两个示例
  6. index.md。主页相关
  7. package.json包管理工具需要用的
    请添加图片描述

5、启动项目

pnpm run docs:dev

在这里插入图片描述

项目启动后会允许根目录下的index.md,在项目里面所有的md文档均会被编译为html,这里项目的根目录被设置为了./docs,因此会先运行/docs/index.md以下所有介绍的根目录均代表./docs目录下

GitHub自动化构建发布

1、添加.gitignore忽略文件

防止node_module等文件被上传到GitHub上

.idea
.DS_Store
node_modules
dist

请添加图片描述

2、部署到GitHub

git add .git commit -m 'feat: create init' -ngit push origin master

3、进入GitHub项目- Action

请添加图片描述

选择构建流-一般直接选默认的Simple workflow 构建流

4、修改构建配置文件

请添加图片描述

初次进入是默认的构建文件,我们可以进入vitepress官网,找到官方提供的配置文件

copy官方提供的配置文件到github中,修改名称deploy.yml

请添加图片描述

5、‼️非常关键的一步:修改构建流程命令

官网提供的构建指令是基于npm,而我们选择了pnpm,因此要将构建指令根据具体的项目更改

	# 官方的默认指令- name: Setup Pagesuses: actions/configure-pages@v4- name: Install dependenciesrun: npm ci # 或 pnpm install / yarn install / bun install- name: Build with VitePressrun: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
# 基于pnpm修改后- name: Setup Pagesuses: actions/configure-pages@v4- name: pnpm install- run: npm i -g pnpm- name: Install dependenciesrun: pnpm install # 或 pnpm install / yarn install / bun install- name: Build with VitePressrun: pnpm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run 

提交配置文件

请添加图片描述

6、进入Action 开始自动化构建

请添加图片描述

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

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

相关文章

TCP IP协议和网络安全

传输层的两个协议: 可靠传输 TCP 分段传输 建立对话(消耗系统资源) 丢失重传netstat -n 不可靠传输 UDP 一个数据包就能表达完整的意思或屏幕广播 应用层协议(默认端口): httpTCP80 网页 ftpTCP21验证用户身…

Http 请求协议

HTTP的请求协议 请求数据格式: 请求行 请求数据的第一行,包含请求方式、资源路径、协议及版本。 请求头 从请求数据的第二行,以key: value的格式 常见的请求头 Host:请求的主机名,如:localhost:8080&#x…

mcu上一种利用伪随机数防止mac地址冲突的方法

一 前言 前段时间开发的一个带tcp功能的项目,出现了mac地址冲突的问题,领导让随机生成一个mac地址,因此研究了下随机数。 二 预研 1.硬随机数 硬随机数又叫真随机数,英文名称”true random number generator“,即通过硬件随机数…

英伟达发布 Edify 3D 生成模型,可以在两分钟内生成详细的、可用于生产的 3D 资源、生成有组织的 UV 贴图、4K 纹理和 PBR 材质。

英伟达发布 Edify 3D 生成模型,可以利用 Agents 自动判断提示词场景中需要的模型,生成后将他们组合为一个场景。 Edify 3D 可以在两分钟内生成详细的、可用于生产的 3D 资源、生成有组织的 UV 贴图、4K 纹理和 PBR 材质。 相关链接 论文:htt…

【二叉树】【2.1遍历二叉树】【刷题笔记】【灵神题单】

关注二叉树的三个问题: 什么情况适合自顶向下?什么时候适合用自底向上?一般来说,DFS的递归边界是空节点,什么情况下要额外把叶子节点作为递归边界?在什么情况下,DFS需要有返回值?什…

远程控制软件:探究云计算和人工智能的融合

在数字化时代,远程控制工具已成为我们工作与生活的重要部分。用户能够通过网络远程操作和管理另一台计算机,极大地提升了工作效率和便捷性。随着人工智能(AI)和云计算技术的飞速发展,远程控制工具也迎来了新的发展机遇…

腾讯云 AI 代码助手:产品研发过程的思考和方法论

一、文章摘要 本文将详细阐述 腾讯云 AI 代码助手的历史发展形态与产品整体架构,并从技术、研发方法论的角度分别阐述了产品的研发过程。 全文阅读约 5~8 分钟。 二、产品布局 AI 代码助手产品经历了三个时代的发展 第一代诸如 Eclipse、Jetbrains、V…

Qt实现窗口内的控件自适应窗口大小

前言:因为有时候窗口内的控件比较大,但是为了同时操作多个窗口,希望可以根据情况,在调整窗口大小时,控件能自适应大小,于是通过遍历整个界面内的控件,并在调整大小的事件中按比率调整控件大小实…

WebGIS技术汇总

WebGIS系统通常都围绕地图进行内容表达,但并不是有地图就一定是WebGIS,所以有必要讨论下基于Web的地图API分类及应用场景。 Web上的Map API主要分类如下几类: Charts:以D3.js,Echarts等为代表。LBS:以高德…

sql server 获取当前日期的时间戳

SQL Server 获取当前日期的时间戳 在 SQL Server 中,可以使用 GETDATE() 函数获取当前日期和时间。如果想要获取当前日期的时间戳,可以将日期转换为 UNIX 时间戳格式。本文将介绍如何在 SQL Server 中获取当前日期的时间戳,并提供示例代码。 …

Java与C#

Java和C#(C Sharp)是两种流行的面向对象编程语言,它们在很多方面非常相似,因为它们都受到了类似的编程范式和语言设计理念的影响。然而,它们之间也存在一些重要的区别。 平台依赖性: Java:Java是…

Oracle 深入学习 Part 9: Storage Structure and Relationships(存储结构与关系)

在数据库管理系统(DBMS)中,Segment(段)、Extent(区块) 和 Block(块) 是描述数据库物理存储结构的三个重要概念。这些概念帮助理解数据库是如何在磁盘等存储设备上组织和管…

活着就好20241127

今天是27号,周三,一个承前启后并积蓄力量的日子。亲爱的朋友们,大家早上好!在度过了周二这个巩固成果、深化努力的阶段后,我们迎来了又一个充满挑战与机遇的周三。周三,作为一周的转折点,是我们…

C语言实例之10求0-200内的素数

1. 素数 素数(Prime number),也叫质数,是指在大于 1 的自然数中,除了 1 和它自身外,不能被其他自然数整除的数。例如 2、3、5、7、11 等都是素数,而 4 能被 2 整除、6 能被 2 和 3 整除&#x…

区块链知识体系

1. 区块链基础知识 Q: 什么是区块链? A: 区块链是一种去中心化的分布式账本技术,通过加密算法保证数据的不可篡改性和透明性。它由一系列按时间顺序链接的区块组成,每个区块包含一批交易记录。 Q: 区块链的主要特点是什么? 去…

使用Python和Pybind11调用C++程序(CMake编译)

目录 一、前言二、安装 pybind11三、编写C示例代码四、结合Pybind11和CMake编译C工程五、Python调用动态库六、参考 一、前言 跨语言调用能对不同计算机语言进行互补,本博客主要介绍如何实现Python调用C语言编写的函数。 实验环境: Linux gnuPython3.10…

哈希C++

文章目录 一.哈希的概念1.直接定址法2.负载因子 二.哈希函数1.除法散列法 / 除留余数法2.乘法散列法3.全域散列法(了解) 三.处理哈希冲突哈希冲突:1.开放定址法(1)线性探测:(2)二次探…

SAR ADC系列15:基于Vcm-Base的开关切换策略

VCM-Based开关切换策略:采样~第一次比较 简单说明: 电容上下极板分别接Vcm(一般Vcm1/2Vref)。采样断开瞬间电荷锁定,进行第一次比较。 当VIP > VIN 时,同时 减小VIP 并 增大VIN 。P阵列最高权重电容从Vcm(1/2Vref)…

深度学习模型:循环神经网络(RNN)

一、引言 在深度学习的浩瀚海洋里,循环神经网络(RNN)宛如一颗独特的明珠,专门用于剖析序列数据,如文本、语音、时间序列等。无论是预测股票走势,还是理解自然语言,RNN 都发挥着举足轻重的作用。…

网络--传输层协议--UDP

传输层作用:负责数据能够从发送端传输到接收端。 1、再谈端口号 端口号标识了一个主机上进行通信的不同的应用程序。 1.1、端口号划分范围 0 - 1023 : 知名端口号,HTTP、FTP、SSH等这些广为使用的应用层协议,他们的端口号都是固定的。 10234 - 65536:操作系统动态分配的…