從零開始-VitePress 構(gòu)建個(gè)人博客上傳GitHub自動(dòng)構(gòu)建訪問

序言

VitePress 官網(wǎng)：VitePress 中文版

1. 什么是 VitePress

VitePress 是一個(gè)靜態(tài)站點(diǎn)生成器 (SSG)，專為構(gòu)建快速、以內(nèi)容為中心的站點(diǎn)而設(shè)計(jì)。簡(jiǎn)而言之，VitePress 獲取用 Markdown 編寫的內(nèi)容，對(duì)其應(yīng)用主題，并生成可以輕松部署到任何地方的靜態(tài) HTML 頁(yè)面。

2、性能

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

一、項(xiàng)目構(gòu)建

1、新建GitHub博客項(xiàng)目

2、將項(xiàng)目clone到本地

3、cd到項(xiàng)目目錄

二、安裝依賴配置

1、安裝pnpm

推薦使用 pnpm，安裝pnpm：

npm install -g pnpm

2、安裝vitepress

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

3、初始化 VitePress

pnpm vitepress init

初始化之后，會(huì)有對(duì)應(yīng)的項(xiàng)目問題需要進(jìn)行填寫，示例如下：
建議在第一項(xiàng)改成.docs目錄，以便它與項(xiàng)目的其余部分分開。

4、初步項(xiàng)目目錄

├─ blog
│  ├——─ .vitepress //當(dāng)前目錄所在的位置就是文檔的根目錄 最核心的目錄|--
│  │  └─ config.mjs //項(xiàng)目的配置文件,最重要
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

1. .vitepress，最核心的目錄
2. theme目錄。自定義主題配置，css樣式等
3. config.mjs。最核心的文件，各種配置導(dǎo)航欄、側(cè)邊欄、標(biāo)題什么的都是在這里
4. node_modules。安裝的依賴
5. api-exampl
   es.md和markdown-examples.md。官方給的兩個(gè)示例
6. index.md。主頁(yè)相關(guān)
7. package.json包管理工具需要用的
   

5、啟動(dòng)項(xiàng)目

pnpm run docs:dev

項(xiàng)目啟動(dòng)后會(huì)允許根目錄下的index.md,在項(xiàng)目里面所有的md文檔均會(huì)被編譯為html,這里項(xiàng)目的根目錄被設(shè)置為了./docs,因此會(huì)先運(yùn)行/docs/index.md以下所有介紹的根目錄均代表./docs目錄下

GitHub自動(dòng)化構(gòu)建發(fā)布

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、進(jìn)入GitHub項(xiàng)目- Action

選擇構(gòu)建流-一般直接選默認(rèn)的Simple workflow 構(gòu)建流

4、修改構(gòu)建配置文件

初次進(jìn)入是默認(rèn)的構(gòu)建文件，我們可以進(jìn)入vitepress官網(wǎng)，找到官方提供的配置文件

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

5、??非常關(guān)鍵的一步：修改構(gòu)建流程命令

官網(wǎng)提供的構(gòu)建指令是基于npm，而我們選擇了pnpm，因此要將構(gòu)建指令根據(jù)具體的項(xiàng)目更改

	# 官方的默認(rèn)指令- 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、進(jìn)入Action 開始自動(dòng)化構(gòu)建