在選擇合適的靜態網站工具時，Hexo、VitePress、Docusaurus 是三個備受關注的選項，那麼到底哪一個框架更適合你呢？

本文從使用場景、社區生態、功能、性能、擴展性這五個方面，幫你全方位分析各個框架的優缺點，以便為你的技術選型提供參考。

1、應用場景

• Hexo, 官方定位自己是 "快速、簡潔且高效的博客框架" , 但是它同樣適合構建簡單的文檔網站，它具有簡單易用的特點，適合那些對技術要求不高的個人用户快速搭建和管理網站。
• VitePress, 基於vue的SSG框架，可以快速構建個人的技術文檔系統，但是官方默認是不支持構建博客網站的，但是對於專業的前端開發者來説可以自己定製主題，對於非技術人員有一定的門檻。
• Docusaurus, 基於react的SSG框架，相比與VitePress，Docusaurus支持博客和文檔系統，同時也提供了一定的定製化能力，同樣對於專業的前端開發者來説也可以自己定製主題，對於非技術人員有一定的門檻。

2、功能

常見的功能，這些框架都支持，所以大家可以放心使用。

3、社區生態

社區：

• VitePress作為Vue項目的一部分，可以享受到Vue社區的支持。Vue社區龐大活躍，有很多開發者和用户參與其中，提供支持和貢獻。
• Docusaurus由Facebook開發和維護，擁有龐大的社區和開發者基礎。它的社區中有很多開發者和用户提供支持和貢獻，可以獲得豐富的資源和幫助。
• Hexo, 由眾多的獨立開發者和用户提供支持和貢獻，其社區十分活躍，你可以在社區中找到幫助和解決方案。

github stars：

相比較來説，docusaurus的stars數最多，hexo次之，vitepress最少當然10k左右的star其實已經很高了。

通過github stars的數量從側面反應了這些框架在開源社區中的受歡迎程度和廣泛使用的程度。然而，stars數目並不是衡量一個工具好壞的唯一標準。除了stars數目外，還應考慮其他因素，例如功能特性、擴展性、性能等。每個工具都有自己的特點和優勢，適用於不同的使用場景和需求。因此，在選擇合適的靜態網站生成器時，除了stars數目外，還應該綜合考慮工具的特點和適用性，以及社區支持和生態系統的健康程度，這只是提供給大家一個參考。

theme：

• VitePress官方提供了默認的主題，具有簡潔的設計和易於導航的佈局。這個主題適合構建技術文檔和API文檔等。VitePress使用Vue單文件組件來編寫內容，因此可以根據需求自定義主題。可以通過修改默認主題的樣式和佈局，或者創建全新的主題來滿足個性化需求。
• Docusaurus官方提供了默認主題，具有專注於文檔網站的特點。它提供了清晰的導航結構、多語言支持、版本控制等功能，適合構建開源項目的文檔網站。Docusaurus支持通過React自定義佈局和組件來創建定製化主題。可以根據項目需求進行樣式和佈局的修改，或者通過創建自定義組件來擴展功能。
• Hexo官方提供了一些內置的主題供選擇，如Next、landscape、jacman等。這些主題具有不同的風格和佈局，可以根據個人喜好進行選擇和定製。Hexo社區中也有許多第三方開發的主題，如Butterfly、Maupassant等。這些主題提供了更多的樣式和功能定製選項，可以滿足更多的需求。

主題模板是靜態網站生成器中用於定義網站外觀和佈局的重要組成部分。Hexo、VitePress和Docusaurus都提供了豐富的主題模板供選擇。

VitePress提供默認主題和自定義選項，適用於簡潔的開源項目文檔網站；\
Docusaurus的官方主題同樣適合構建開源項目文檔網站，並支持自定義佈局和組件。\
Hexo擁有官方和第三方主題，可滿足不同風格和需求；

在選擇主題模板時，應考慮風格、功能定製和社區支持。通過選擇適合的主題模板，您可以快速打造吸引人、個性化的網站，滿足您的需求和品味。

4、性能

説性能之前，得先知道各個框架底層的渲染框架，

• Vitepress，底層使用了vite、vue進行構建，vitepress運行時會有一個hydrate的過程，因此需要額外依賴vue.js的運行時支持，也就是需要加載額外的js文件。所謂hydrate，指的是 Vue 在瀏覽器端接管由服務端發送的靜態 HTML，使其變為由 Vue 管理的動態 DOM 的過程。簡單解釋來説，就是讓靜態的html可以通過vue.js進行交互。
• Docusaurus，底層使用了webpack、react進行構建，同樣也會有hydrate的過程，也需要加載額外的js文件。
• Hexo，底層使用EJS，EJS是一款 "嵌入式 JavaScript 模板" , 因此hexo的運行時依賴很少，具有原生html的性能。

總結來説，從頁面加載速度來説，hexo > vitepress > docusaurus。從開發環境的速來來説：ejs > vite > webpack。

但是，這些框架頁面的加載速度來説，其實也就是200ms以內的差異，如果使用http cache、gzip等優化手段，這些框架的渲染速度差異幾乎可以忽略不計。

5、擴展性

• vitepress，底層使用了vue，因此支持你完全使用vue的語法去定製你想要的任何樣式。
• docusaurus, 底層使用了react，因此同樣支持你完全使用react的語法去定製你想要的任何樣式。
• hexo，由於底層使用了ejs模板引擎，因此想要更加方便的擴展，其實相對來説不是一件容易的事情。然而如果你能選擇hexo，我相信你其實也不需要什麼額外的擴展。

總結

綜上所述，根據不同的使用場景和需求，可以選擇適合的工具。

如果你是前端程序員，並且技術棧以vue為主，可以嘗試vitepress，非常適合知識文檔站，也可以定製化主題。

如果你是前端程序員，並且技術棧以react為主，可以使用docusaurus，它同時支持博客和文檔，同樣支持定製化主題。

如果你是一個非前端開發者，那麼我建議hexo，你完全可以使用hexo提供豐富的社區模板構建你想要的頁面。

我的VitePress文檔博客：https://blog.mosong.cc/

基於VitePress默認主題擴展的會員主題： https://vitepress.mosong.cc/

推薦閲讀

• VitePress 實現付費閲讀功能
• Vitepress 微信網頁授權登錄
• VitePress 使用百度統計
• Vitepress 中添加自定義組件