上海做網(wǎng)站中國聯(lián)通和騰訊
從零開始-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ì)。簡而言之,VitePress 獲取用 Markdown 編寫的內(nèi)容,對(duì)其應(yīng)用主題,并生成可以輕松部署到任何地方的靜態(tài) HTML 頁面。
2、性能
- 快速的初始加載
- 加載完成后可以快速切換
- 高效的交互
一、項(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
- .vitepress,最核心的目錄
- theme目錄。自定義主題配置,css樣式等
- config.mjs。最核心的文件,各種配置導(dǎo)航欄、側(cè)邊欄、標(biāo)題什么的都是在這里
- node_modules。安裝的依賴
- api-exampl
es.md和markdown-examples.md。官方給的兩個(gè)示例 - index.md。主頁相關(guān)
- 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
提交配置文件