Dumi builds a document blog

Preface

I have already talked about how to use various open source frameworks on the Internet to build my own blog , such as docsify、Hexo、VuePress、Halo etc. . The first three can be matched directly Github You can get your own blog for free , and Halo You may need to have your own server , Then deploy the service in your own server .

When surfing the Internet recently , Found another documentation tool , That's it dumi. Pronounce from Chinese pinyin , Namely Du mi . This is a documentation tool for developing scenarios for components , and father Form a one-stop service .father Responsible for building ,dumi Is responsible for component development and generation of component documents , Together, it provides developers with a one-stop component development experience .

Let's have a look today , How to use it dumi Build your own document based website .

dumi characteristic

Now that we need to use it dumi, First, let's take a look at some of its features , It can be summarized as follows ：

• Open the box , We just need to focus on component development and documentation .
• rich Markdown Expand , Not just rendering components demo.
• be based on TypeScript The type definition , Can automatically generate components API.
• Support custom theme , You can also create your own Markdown Components .
• Support mobile component library , The built-in mobile terminal makes money rendering scheme .
• One line command to complete the component asset digitization , Cascade downstream productivity tools .

Set up process

Primary preparation

Now that it's all said dumi Is based on TypeScript The type definition , How can I leave Node.js Well ？ therefore , Before the formal construction process , You have to make sure that your computer has Node.js, And make sure that its version is not lower than 10.13.

If you have already installed Node.js, But I'm not sure about the version , Then use the following command to view .

node -v

Scaffold initialization

dumi Two ways of initializing scaffolding are supported , One is component development scaffolding , The other is static site scaffold , This article mainly introduces how to use components to develop scaffolding .

Component development scaffolding includes more than dumi And basic documentation , It also contains a simple component 、umi-test and father-build, It can easily realize component development 、 Documentation 、 Test case writing 、 The whole process of component packaging .

Create an empty folder locally , Easy to manage scaffolding , Then develop scaffolding in the component library that initializes a document pattern .

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

After initialization , Execute the following command , Then open in the browser http://localhost:8080 You can preview .

npx dumi dev

Document

Check out our project catalog , You can find docs file , This is where we write the documentation . On project initialization , Only by default index.md That is, we visited http://localhost:8080 What is called rendered in the page .

Then we are docs Add and modify in the directory Markdown file , It will help us automatically render to the front page .

summary

That's the use dumi The specific process of building a document based website . Of course , Besides being a blog , We can also use it to develop front-end components , Keep adding new features to your site ！