VitePress 中文文檔地址
VitePress 英文文檔地址
1. github 創(chuàng)建一個(gè)倉(cāng)庫(kù)，blog
2. clone 到本地
3. 初始化 VitePress
注：因我用的pnpm安裝，如果大家也想用，先執(zhí)行 npm i pnpm -g 安裝一下
-
進(jìn)入倉(cāng)庫(kù)執(zhí)行
pnpm init -
安裝需要的依賴
--dev vitepress vue -
寫入第一個(gè)文檔
mkdir docs && echo '# Hello VitePress' > docs/index.md -
在
page.json加入執(zhí)行腳本{ ... "scripts": { "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:serve": "vitepress serve docs" }, ... } -
在本地開啟服務(wù)
pnpm docs:dev
4. 配置VitePress
-
文件結(jié)構(gòu)
. ├─ .github // 部署相關(guān)，后面會(huì)說(shuō) │ ├─ workflows │ │ ├─ deploy.yml ├─ docs │ ├─ .vitepress │ │ ├─ config.js // 打包配置的文件 │ ├─ articles // 文章的文件夾 │ │ ├─ javascript-core // JavaScript核心文章 │ │ └─ ... │ ├─ public // 這里可以放入全局文件內(nèi)容，打包后原樣復(fù)制到dist │ │ ├─ images // 文章中的圖片 └─ package.json -
config.js 配置
以下內(nèi)容都有注釋，大家根據(jù)自己情況增減，官方文檔也非常清楚
export default { title: '碼路芽子', // 博客的標(biāo)題 description: 'mlyz 的個(gè)人博客', // 博客的介紹 base: '/blog/', // 如果想用 https://mlyz.wdy.github.io/blog/ 訪問(wèn)，那么這句話必填 themeConfig: { logo: "/images/logo.png", // 頁(yè)面上顯示的logo nav: [ // 頁(yè)面右上角的導(dǎo)航 { text: "vue", link: "/articles/vue/上傳素材到COS" }, { text: "uniapp", link: "/articles/uniapp/一鍵登錄" }, { text: '博客文檔', items: [ // 可以配置成下拉 { text: 'JavaScript 核心系列', link: '/articles/javaScript-core/構(gòu)造函數(shù)、原型、原型鏈' }, { text: 'Vue 三方組件庫(kù)', link: '/articles/libs/VForm3低代碼初體驗(yàn)' }, { text: '其他', link: '/articles/other/nvm管理node' }, ] } ], sidebar: { // 側(cè)邊欄，可以分組 "/articles/vue/": [ { text: "基礎(chǔ)", items: [ ], }, { text: "代碼段", items: [ { text: "上傳素材到COS", link: "/articles/vue/上傳素材到COS", }, { text: "文件下載", link: "/articles/vue/文件下載", }, ], }, ], "/articles/uniapp/": [ { text: "基礎(chǔ)", items: [ ], }, { text: "代碼段", items: [ { text: "一鍵登錄", link: "/articles/uniapp/一鍵登錄", } ], }, ], "/articles/javaScript-core/": [ { text: "基礎(chǔ)", items: [ { text: "1. 構(gòu)造函數(shù)、原型、原型鏈", link: "/articles/javaScript-core/構(gòu)造函數(shù)、原型、原型鏈", }, { text: "2. 執(zhí)行上下文和執(zhí)行上下文棧", link: "/articles/javaScript-core/執(zhí)行上下文和執(zhí)行上下文棧", }, { text: "3. this的指向", link: "/articles/javaScript-core/this的指向", }, ], }, { text: "進(jìn)階", items: [ { text: "xx", link: "/xx", }, ], }, ], "/articles/libs/": [ { items: [ { text: "1. VForm3低代碼初體驗(yàn)", link: "/articles/libs/VForm3低代碼初體驗(yàn)", }, ], } ], }, socialLinks: [{ icon: "github", link: "https://github.com/mlyz-wdy" }], // 可以連接到 github }, }
5. 上傳到 github 自動(dòng)部署
在 .github/workflows/deploy.yml 中
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm i pnpm -g
- run: pnpm install --frozen-lockfile
- name: Build
run: pnpm docs:build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/.vitepress/dist
以上內(nèi)容可以直接復(fù)制使用，如果想修改，可以看文檔自行修改
在上傳到github中，就會(huì)自己執(zhí)行actions
[圖片上傳失敗...(image-abeddd-1679539313095)]
執(zhí)行狀態(tài)可以自行查看-
完成之后會(huì)在分支中，新增一個(gè)分支
[圖片上傳失敗...(image-9ed078-1679539313096)]
-
在 settings/pages 中更換源為 gh-pages
[圖片上傳失敗...(image-ed99f7-1679539313096)]
此時(shí)完成了，大家可以看看自己部署的博客了
我反正用了不止10分鐘，畢竟還要研究，但你們看到這么清晰的文章，我覺(jué)得10分鐘足夠了，如果超過(guò)了，你們反思一下，我哪里寫的不清楚，我改還不行么
我覺(jué)得你們一定會(huì)報(bào)錯(cuò)，如果沒(méi)報(bào)錯(cuò)當(dāng)我沒(méi)說(shuō)
GitHub Action: The process ‘/usr/bin/git‘ failed with exit code 128
