前言

基于vitePress搭建文檔站點，使用github pages進行部署

安裝VitePress

1.Node.js 18 及以上版本

2.npm add -D vitepress

3.npx vitepress init

4.將需要回答幾個簡單的問題：

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

部署步驟

1.在github上創建倉庫，如果沒有Github賬號，需要先注冊一個。

2. 需要在config.mjs里面配置base，名稱為github倉庫名稱

base: "/docs-demo/"

3.初始化git倉庫

git init

4.添加gitignore文件

node_modules
.DS_Store
dist
dist-ssr
cache
.cache
.temp
*.local

5.添加本地所有文件到git倉庫，創建第一次提交，添加遠程倉庫地址到本地，推送項目到github

git add .
git commit -m "first commit"
git remote add origin https://github.com/AZCodingAccount/Demo.git
git push -u origin master

6.選擇github actions

7.設置工作流

8.重命名并設置deploy腳本

腳本文件：參考的vitepress官方文檔：https://vitepress.dev/guide/deploy#github-pages

?node版本和pnpm版本需要一致

?對于npm的部署可以參考這個博客[GitHub Action一鍵部署個人博客 | Ahao (helloahao096.github.io)](https://helloahao096.github.io/helloahao/posts/GitHub Action一鍵部署個人博客.html)

?需要注意項目的根目錄（.vitepress所在的目錄）

name: Deploy VitePress site to Pageson:push:branches: [master]# 設置tokenn訪問權限
permissions:contents: readpages: writeid-token: write# 只允許同時進行一次部署，跳過正在運行和最新隊列之間的運行隊列
# 但是，不要取消正在進行的運行，因為我們希望允許這些生產部署完成
concurrency:group: pagescancel-in-progress: falsejobs:# 構建工作build:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3with:fetch-depth: 0 # 如果未啟用 lastUpdated，則不需要- name: Setup pnpmuses: pnpm/action-setup@v2 # 安裝pnpm并添加到環境變量with:version: 8.6.12 # 指定需要的 pnpm 版本- name: Setup Nodeuses: actions/setup-node@v3with:node-version: 18cache: pnpm # 設置緩存- name: Setup Pagesuses: actions/configure-pages@v3  # 在工作流程自動配置GithubPages- name: Install dependenciesrun: pnpm install # 安裝依賴- name: Build with VitePressrun: |pnpm run docs:build # 啟動項目touch .nojekyll  # 通知githubpages不要使用Jekyll處理這個站點，不知道為啥不生效，就手動搞了- name: Upload artifactuses: actions/upload-pages-artifact@v2  # 上傳構建產物with:path: .vitepress/dist # 指定上傳的路徑，當前是根目錄，如果是docs需要加docs/的前綴# 部署工作deploy:environment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }} # 從后續的輸出中獲取部署后的頁面URLneeds: build    # 在build后面完成runs-on: ubuntu-latest  # 運行在最新版本的ubuntu系統上name: Deploysteps:- name: Deploy to GitHub Pagesid: deployment  # 指定iduses: actions/deploy-pages@v2 # 將之前的構建產物部署到github pages中

9.點擊確定，耐心等待15秒左右，就可以了，接下來查看我們的域名：

10.如果出現沒有css樣式，原因是沒有.nojekll文件，不然css會被忽略

?

最后添加，push之后重新部署