dumi 搭建文檔型博客

前言

之前已經講過如何利用網上各種開源的框架來搭建自己的博客，比如 docsify、Hexo、VuePress、Halo 等。前三者可以直接搭配 Github 就能免費得到一個專屬自己的博客，而 Halo 可能需要自己有服務器，然後將服務部署在自己的服務器裏。

最近在網上沖浪的時候，又發現了一款文檔工具，那就是 dumi。從中文拼音來發音，就是 嘟米。這是一款為組件開發場景而是的文檔工具，和 father 組成一條龍服務。father 負責構建，dumi 則負責組件開發以及組件文檔的生成，一起為開發者提供了一站式的組件開發體驗。

今天就一起來看看，如何利用 dumi 搭建自己的文檔型網站。

dumi 特性

既然要用 dumi，那首先就來看看它的一些特性，可以總結如下：

• 開箱即用，我們只需要將注意力集中在組件開發和文檔編寫即可。
• 豐富的 Markdown 擴展，不止於渲染組件 demo。
• 基於 TypeScript 類型定義，能够自動生成組件 API。
• 支持自定義主題，還能創建專屬的 Markdown 組件。
• 支持移動端組件庫，內置移動端搞錢渲染方案。
• 一行命令搞定組件資產數據化，串聯下遊生產力工具。

搭建過程

首要准備

既然都說了 dumi 是基於 TypeScript 類型定義，那怎麼離得開 Node.js 呢？所以，在正式搭建過程開始前，你得保證你的電腦上安裝了 Node.js，而且還得確保它的版本不低於 10.13。

如果你已經裝過了 Node.js，但是不確定其版本，那麼使用以下命令來查看。

node -v

脚手架初始化

dumi 支持兩種初始化脚手架的方式，一種是組件開發脚手架，另一種則是靜態站點脚手架，這裏主要介紹如何使用組件開發脚手架。

組件開發脚手架不僅包含了 dumi 和基礎的文檔，還包含了一個簡單的組件、umi-test 和 father-build， 能够輕松實現組件開發、文檔編寫、測試用例編寫、組件打包的全流程。

在本地新建一個空文件夾，方便管理脚手架，然後在初始化一個文檔模式的組件庫開發脚手架。

mkdir dumi-demo
cd dumi-demo
npx @umijs/create-dumi-lib

初始化完成之後，執行以下命令，然後在瀏覽器其中打開 http://localhost:8080 就可以進行預覽了。

npx dumi dev

編寫文檔

查看我們的項目目錄，可以發現 docs 文件，這裏就是我們編寫文檔的地方。項目初始化時，默認只有 index.md 也就是上面我們訪問 http://localhost:8080 頁面中所稱呈現的內容。

接著我們在 docs 目錄下新增修改 Markdown 文檔，它就會幫我們自動渲染到前端頁面中。

總結

以上就是利用 dumi 搭建文檔型網站的具體過程了。當然，除了作為博客之外，我們還可以利用它來進行前端組件化開發，不斷給你的網站添加新功能！