跳至主要内容

靜態網站產生器Docusaurus

靜態網站生成器​

這邊先簡單介紹靜態網站生成器（Static Site Generator，簡稱 SSG）

靜態網站生成器是一種可以將原始內容（例如：Markdown 文本格式）轉換為靜態網頁的工具，可以直接佈署到網路形成一個靜態網站。相較於動態網站，靜態網站具有較少的安全風險、較快的加載速度、較容易維護等優點。

目前常見的靜態網站生成器：

  • Jekyll：使用 Ruby 編寫的靜態網站生成器，是 GitHub Pages 的默認生成器。它使用 Liquid 模板語言和 Markdown 標記語言，可以輕鬆地構建博客、文檔網站等。

  • Gatsby：使用 React 編寫的靜態網站生成器，具有現代化、高度可定製化等優點。它支持多種數據源、多主題、多語言等功能，並且可以輕鬆地集成各種前端框架和工具。

  • Hugo：使用 Go 編寫的靜態網站生成器，具有快速、高效、易於使用等優點。它支持多種內容格式（包括 Markdown、AsciiDoc 等）、多語言、多主題等功能。

  • Hexo：使用 Node.js 編寫的靜態網站生成器，特別受到中文社區的歡迎，具有快速、易於使用等優點。支持多種主題、多語言、多數據源等功能，並且可以輕鬆地集成各種前端框架和工具。

實際上還有更多其他語言編寫的生成器，目前上述幾種是較常見的。

不使用網路上部落格平台，打算自己架設的原因：​

  • 主要目的是為了要放置筆記資料，不需要高曝光度或是社群功能。
  • 文件資料確保在自己手上，不用擔心哪天部落格平台關閉要怎麼辦。
  • 各種意義的高自由度，版面、功能等都能自己決定(依照個人能力)。
  • 版面不會有廣告。
  • 靜態網頁空間容易找，直接使用 GitHub Pages 也不需要費用。

最初其實是打算使用 Hexo 作為這次的架站工具，因為是以 Node.js 編寫的套件，所以稍微懂一些 javascript 語法應該也是能比較好上手，實際嘗試安裝使用的確是很簡單，但在套用主題的部分總是找不到喜歡的版面，要自己想辦法寫一個版面又變成沒有快速建立的意義，最後放棄 Hexo 改為使用目前中文語系比較少人分享的 Docusaurus，簡潔版面和可折疊的文檔目錄就是自己一直想找的主題。

Docusaurus​

首先貼上官方中文說明

Docusaurus 是一款静态站点生成器。 可以搭建带有快速客户端导航的单页应用，充分利用了 React，让你的网站具有交互能力。 它提供了开箱即用的文档功能，不过也可用于搭建各种网站（个人网站、产品、博客、营销主页，等等）。

Docusaurus 是一個由 Facebook 開發的開源工具，使用 React 編寫可以快速建立靜態文檔或網誌網站。具有以下特色：

  • 如果不要求客製化版面，簡單幾個設定就可以直接做成一個文檔網站或部落格。
  • 支援 Markdown 標記語法，只要使用少數符號就可以完成文章排版。
  • 文檔內可使用 JSX 語法來導入 React 元件。
  • 版面可高度客製化，此部分必須懂 React 才可以實現，整個網站基本上都是以 React 元件組成。
  • 支援多語系，支援 i18n，可使用 Crowdin 將文檔翻譯成其他語言。
  • 輕鬆佈署，網路上其實可以找到不少文章分享幾分鐘佈署到靜態網站空間，只需要幾個步驟就可以完成。

非熟練的網站工程師的話，實際使用上應該還是會有蠻多地方碰到問題，之後會在另外的文章說明使用心得與過程。