VitePress
VitePress 是一款靜態站點生成器,專為構建快速、以內容為中心的網站而設計。簡而言之,VitePress 獲取用 Markdown 編寫的源內容,為其應用主題,并生成可以輕松部署在任何地方的靜態 html 頁面。VitePress 是 Vuepress 的更現代化、高效和靈活的替代品,適用于構建快速、易于定制的文檔站點。
VitePress 附帶一個專為技術文檔設計的默認主題。它為 Vite、Rollup、Pinia、VueUse、Vitest、D3、Unocss、Iconify 等文檔提供了支持。Vue.js 官方文檔也基于 VitePress,但使用多個翻譯之間共享的自定義主題。
VitePress 具有以下特點:
- 專注于內容:輕松使用Markdown創建漂亮的文檔站點。
- 享受 Vite 開發體驗:即時啟動服務器,快速更新,利用 Vite 生態系統插件。
- 使用 Vue 進行自定義:直接在Markdown中使用Vue語法和組件,或使用Vue構建自定義主題。
- 快速發布網站:通過靜態HTML實現快速初始加載,并通過客戶端路由實現快速后續導航。
Github:https://github.com/vuejs/vitepress。
VuePress
VuePress 是 Vue 團隊開源的一款Vue 驅動的靜態網站生成器,它由兩部分組成:第一部分是一個極簡靜態網站生成器,它包含由 Vue 驅動的主題系統和插件 API,另一個部分是為編寫技術文檔而優化的默認主題,它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。
注意:Vue 團隊目前更推薦使用 VitePress 來構建靜態網站。
每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML,也因此具有非常好的加載性能和搜索引擎優化(seo)。同時,一旦頁面被加載,Vue 將接管這些靜態內容,并將其轉換成一個完整的單頁應用(SPA),其他的頁面則會只在用戶瀏覽到的時候才按需加載。
VuePress 的特點如下:
- 簡潔至上:以 Markdown 為中心的項目結構,以最少的配置幫助你專注于寫作。
- Vue 驅動:享受 Vue + webpack 的開發體驗,可以在 Markdown 中使用 Vue 組件,又可以使用 Vue 來開發自定義主題。
- 高性能:VuePress 會為每個頁面預渲染生成靜態的 HTML,同時,每個頁面被加載的時候,將作為 SPA 運行。
GitHub:https://github.com/vuejs/vuepress。
Docusaurus
Docusaurus是 Facebook 開源的一個開源的靜態站點生成器,旨在幫助用戶快速構建美觀、易于維護的文檔站點。它提供了一套全面的工具和功能,使用戶能夠專注于編寫內容,而無需花費大量時間和精力來構建和設計網站。
Docusaurus基于現代化的技術棧,使用React作為主要的前端框架,并結合了其他工具和庫,例如Webpack、Babel和Markdown等。它支持使用Markdown編寫文檔,并通過簡單的文件組織結構來管理和展示文檔內容。
Docusaurus提供了許多實用的功能,如響應式布局、快速導航、搜索功能、版本控制、國際化支持等。它還提供了可自定義的主題和插件系統,使用戶能夠靈活地定制和擴展站點的外觀和功能。
GitHub:https://github.com/facebook/docusaurus。
Dumi
dumi 是螞蟻集團開源的一款為組件開發場景而生的靜態站點框架,與 father 一起為開發者提供一站式的組件開發體驗,father 負責組件源碼構建,而 dumi 負責組件開發及組件文檔生成。
dumi 具有以下特性:
- 更好的編譯性能:通過結合使用 Umi 4 MFSU、esbuild、SWC、持久緩存等方案,帶來比 dumi 1.x 更快的編譯速度
- 內置全文搜索:不需要接入任何三方服務,標題、正文、demo 等內容均可被搜索,支持多關鍵詞搜索,且不會帶來產物體積的增加
- 全新主題系統:為主題包增加插件、國際化等能力的支持,且參考 Docusaurus 為主題用戶提供局部覆蓋能力,更強更易用
- 約定式路由增強:通過拆分路由概念、簡化路由配置等方式,讓路由生成一改 dumi 1.x 的怪異、繁瑣,更加符合直覺
- 資產元數據 2.0:在 1.x 及 JSON Schema 的基礎上對資產屬性定義結構進行全新設計,為資產的流通提供更多可能
- 繼續為組件研發而生:提供與全新的 NPM 包研發工具 father 4 集成的腳手架,為開發者提供一站式的研發體驗
GitHub:https://github.com/umijs/dumi。
Rspress
Rspress 是字節跳動開源的一個基于 Rspack 的靜態站點生成器,基于 React 框架進行渲染,內置了一套默認的文檔主題,可以通過 Rspress 來快速搭建一個文檔站點,同時也可以自定義主題,來滿足你的個性化靜態站需求,比如博客站、產品主頁等,也可以接入官方提供的相應插件來方便地搭建組件庫文檔。
Rspress 的主要特性如下:
- 構建性能:保證足夠快的啟動速度,帶來良好的開發體驗。
- MDX 支持:通過 MDX,我們可以方便地復用文檔片段,以及在文檔中渲染自定義的 React 組件。
- 文檔站基礎能力:包括國際化、多版本支持、全文搜索、組件庫文檔等。
- 可擴展性:內置插件系統,支持通過插件 API 來擴展框架功能。
Github:https://github.com/web-infra-dev/rspress。
Astro
Astro 是一個新興的前端框架,它專注于構建文檔網站和靜態網站。Astro 的設計理念是“HTML 優先”,它使用標準的 HTML、CSS 和 JAVAScript 語言,讓開發者可以更加自然地編寫 Web 應用。
Astro 具有以下特性:
- 組件島嶼:一種用于構建更快網站的新型 Web 架構。
- 采用服務端優先的 API 設計:將昂貴的數據加載工作從用戶設備上移開。
- 默認情況下無需 JavaScript:避免 JavaScript 運行時的開銷,提高網站速度。
- 邊緣就緒:可在任何地方部署,甚至是像 Deno 或 Cloudflare 這樣的全球邊緣運行時。
- 可定制:支持 TAIlwind、MDX 和其他 100 多個集成,滿足不同的需求。
- UI 無關:支持多種框架,如 React、Preact、Svelte、Vue、Solid、Lit 等。
GitHub:https://github.com/withastro/astro。
Docsify
Docsify 是一個基于 JavaScript 的文檔網站生成器。它可以將 Markdown 文件轉換為漂亮的、響應式的文檔網站。
Docsify 的主要特點如下:
- 輕量級:核心庫非常小巧,只有幾十 KB 大小,因此加載速度很快。
- 零配置:構建文檔網站非常簡單,不需要復雜的配置。只需將 Markdown 文件放在指定的目錄中,并在 HTML 文件中引入 Docsify 庫即可。
- 動態加載:可以根據用戶的瀏覽行為動態加載文檔內容,只在需要時才加載相關的 Markdown 文件,從而提高網站的性能和加載速度。
- 導航和搜索:提供了便捷的導航和搜索功能,可以幫助用戶快速找到所需的文檔內容。
- 插件支持:支持插件系統,可以擴展其功能。例如,可以添加代碼高亮、圖表、目錄結構等插件,以增強文檔網站的功能和可視化效果。
GitHub:https://github.com/docsifyjs/docsify。
Gatsby
Gatsby 是一個基于 React 的靜態網站生成器。它使用現代化的前端開發工具和技術,幫助開發者構建快速、安全和高性能的網站。
Gatsby 的主要特點如下:
- 靜態網站生成:通過預先生成靜態 HTML、CSS 和 JavaScript 文件來構建網站,這樣可以提供更快的加載速度和更好的用戶體驗。
- React 支持:基于 React 構建,利用了 React 的組件化開發模式和生態系統,使開發者可以更輕松地構建復雜的交互式界面。
- 數據源插件:提供了各種數據源插件,可以從不同的數據源(如 Markdown 文件、CMS、API 等)獲取數據,并將其轉換為可用于構建網站的格式。
- 強大的插件生態系統:擁有豐富的插件生態系統,開發者可以使用這些插件來擴展功能,例如添加圖像優化、SEO 支持、數據分析等。
- 自動優化和代碼分割:會自動對生成的網站進行優化,包括圖像壓縮、代碼分割、懶加載等,以提高性能和加載速度。
- 部署靈活:可以將生成的靜態文件部署到各種托管平臺,如.NETlify、GitHub Pages、AWS S3 等。
GitHub:https://github.com/gatsbyjs/gatsby。