Skip to content

建立 2026-09-15 更新 2026-09-15

YouTube 優質教學

以下頻道以英文為主，挑選條件是：內容對準「用 VitePress 做文件站」、示範過程完整，且不是轉載不明來源。舊片仍有觀念價值，指令與設定檔請以本站與官方文件為準。

Easy Documentation with Vitepress（LearnVue）

  • 頻道：LearnVue
  • 時長：約 9 分
  • 發表：2021-02
  • 觀看數：約 2.6 萬（整理時）
  • 連結：YouTube

LearnVue 是長期做 Vue 教學的頻道。這支是 YouTube 上最常被引用的 VitePress 入門片：為什麼用它、如何啟動、檔案路由與連結、內建 Markdown、頂欄與側欄。九分鐘可以建立「整站怎麼串起來」的畫面記憶。

對應本站：安裝、專案結構、Markdown、頂欄與側欄。文字版可參考作者文章 Write Beautiful Documentation Quickly with VitePress。

版本偏舊

拍攝時 VitePress 仍在 0.x，套件名稱與部分 config 鍵可能不同。請用現在的 npx vitepress init，不要照抄影片裡的安裝指令。

Learn How to Write Beautiful Documentation with Vitepress（This Dot Media）

This Dot Labs 同時有同名部落格教學，這支影片是把「從範本到可閱讀的文件站」講一遍：預設主題提供什麼、如何改 themeConfig、如何把 Markdown 頁變成有導覽的文件。適合已經 init 成功、下一步不知道要改哪裡的人。

對應本站：設定檔、首頁版型。

How To Build Your First Page in Vitepress（This Dot Media）

同一頻道較新的實作片。示範建立第一個內頁：frontmatter、程式碼區塊行高亮、以及一定要記得把新頁寫進 sidebar（側欄不會自動出現）。這與現行 1.x 預設主題的使用方式一致，優先推薦給正在動手的人。

對應本站：Markdown 擴充、頂欄與側欄。

Working with VitePress and The New Docs Theme（BenCodeZen）

Ben 示範當時新的預設文件主題：版面區塊、如何在真實專案裡調整主題與內容結構。適合已經有一堆 Markdown、想把「看起來像文件站」這件事做完的人。主題選項後來又有增補，看完請核對〈預設主題設定〉。

對應本站：主題與設定。

早期入門（僅供對照，不建議當第一支）

VitePress The New Vite Static Site Generator Tutorial（Program With Erik）

VitePress 公開後不久的跟作，展示 0.x 的設定檔與用 Vue 3 改 layout。awesome-vitepress 等清單常引用它，所以收錄於此。當時的建立指令、目錄慣例與主題 API 都已過時，請勿複製影片中的安裝步驟到新專案。若要看「文件頁裡用 Vue」的現況，改讀 在 Markdown 使用 Vue。

延伸閱讀（非影音）

資源 說明
How to Build a Modern Documentation Site with VitePress freeCodeCamp 逐步文字教學，可與影片互補
Getting started with Vitepress This Dot 文字版，含依路徑切換 sidebar 的例子

作者演講與官方文件入口見 官方與作者影音。