当前位置: 首页 > news >正文

从零开始-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.lryc.cn/news/491747.html

相关文章:

  • 【案例学习】如何使用Minitab实现包装过程的自动化和改进
  • 【ArcGISPro】使用AI提取要素-土地分类(sentinel2)
  • 深度解析:Nginx模块架构与工作机制的奥秘
  • 分布式kettle调度平台v6.4.0新功能介绍
  • 企业数字化转型现状
  • 极客大挑战2024wp
  • 将django+vue项目发布部署到服务器
  • 函数类型注释和Union联合类型注释
  • python画图|无坐标轴自由划线操作fig.add_artist(lines.Line2D()函数
  • MacOS系统上Jmeter 录制脚本遇到的证书坑位
  • 网络层协议IP
  • 《硬件架构的艺术》笔记(七):处理字节顺序
  • 反向代理模块
  • 风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
  • spacy 安装 en_core_web_sm
  • SpringBoot(9)-Dubbo+Zookeeper
  • 嵌入式的C/C++:深入理解 static、const 与 volatile 的用法与特点
  • 信创改造 - TongRDS 替换 Redis
  • 周志华深度森林deep forest(deep-forest)最新可安装教程,仅需在pycharm中完成,超简单安装教程
  • python VS c++
  • 提升软件测试报告的质量:Allure2中添加用例失败截图、日志、HTML块和视频的方法
  • 基于IPMI的服务器硬件监控指标解读
  • VUE字符串转日期加天数
  • Android12 mtk设置插充电器自动开机
  • JSON路径工具类`JsonPathUtil`的实现与应用
  • 人名分类器(nlp)
  • 斐波那契数列 相关问题 详解
  • Pytorch微调深度学习模型
  • springboot 使用笔记
  • 网络安全基础——网络安全法