跳至主要内容

技術部落格初體驗：第一次Docusaurus安裝

· 閱讀時間約 4 分鐘
Chao-En Huang
Chao-En Huang
Back End Engineer

透過這次的安裝，我充分體驗到 Docusaurus 的簡便與靈活。從基本的 Node.js 環境設置，到簡單的初始化指令，整個過程快速且直觀。作為一個靜態網站生成器，Docusaurus 不僅適合用來紀錄和組織技術文章，也能幫助建立層次分明、分類清晰的技術部落格。這樣的架構讓我能輕鬆記錄技術細節、歸檔知識內容，並以最有效的方式呈現給讀者。

Docusaurus 是由 Facebook 推出的靜態網站生成器，以 React 為基礎，提供強大的層級結構、靈活的自定義選項，以及精緻的 Markdown 支援，這些正是技術文章管理和組織的理想夥伴。對我而言，它的層次化設計和便捷的標籤分類功能，完美適合用來整理繁雜的技術筆記和安裝紀錄。每個細節都經過精心考量，不僅僅是一個網站生成器，更像是一個技術知識的「整理箱」。

安裝過程：從無到有的體驗​

在安裝 Docusaurus 的過程中，我逐步瞭解到這個工具的優勢。起初，官方文件的清晰度讓初學者能輕鬆上手。我按照以下步驟進行了安裝：

  1. 透過Chocolatey安裝nvs：先安裝 Node 版本管理工具 nvs，方便管理和切換不同版本的 Node.js。
choco install nvs
  1. 建立node.js的環境：在 nvs 中加入 Node.js 的 22.9 版本，以滿足 Docusaurus 的需求。
nvs add 22.9
  1. 使用指令創建網站：Docusaurus 提供了一條簡單的指令來初始化專案。
npx create-docusaurus@latest my-blog classic
  1. 選擇TypeScript：因為TypeScript的型別定義比較嚴謹。

docusaurus-create.png

  1. 看見正確安裝成功：看見有success表示成功。

docusaurus-create-success.png

先測試 Docusaurus​

在完成安裝後，為了確保一切正常運行，我進行了一些基本測試。

  1. 透過nvs設定使用node的版本：選擇22.9版本
nvs

nvs-select.png nvs-selected.png

  1. 利用npm安裝yarn：這是為了使用 Docusaurus 的一些功能。
npm install --global yarn
  1. 使用yarn看看使否可以看到預設網站：啟動本地伺服器，檢查網站是否運行正常。
yarn run start
  1. 畫面成果呈現：在成功執行後，應該會看到 Docusaurus 預設網站的畫面。以下是測試結果的截圖

docusaurus-example.png