Markdown is my first choice when writing documents or personal notes, because it’s really easy and simple to use. So what is Docsify today?

Docsify profile

Docsify is a tool for dynamically generating document websites. Unlike GitBook, Hexo does not generate.md to.html files; all conversion takes place at run time.

This is very useful if you just need to quickly set up a small documentation site, or don’t want to “contaminate” commit records with a bunch of.html files, just create an index. HTML and start writing documentation and deploy it directly on GitHub Pages.

Docsify Chinese document

Global installation

Install the scaffolding tool docsify- CLI, and change the NPM source to CNPM if the installation process is slow

$ npm i docsify-cli -g
Copy the code

Create your Blog project on Github

If you are using Markdown to write some Blog projects, you can use your current project as well. If you are not using Markdown, you are advised to create a new Blog project on Github to get started

Initialize the document

Note that the file name is officially recommended as docs. Please follow the rules to set the file name, otherwise there may be some problems when you send it to Github

$ docsify init docs

Initialization succeeded! Please run docsify serve docs
Copy the code

After the preceding command is executed, the following three files are generated in the docs directory:

  • index.html: Import file
  • README.md: will be rendered as the home page content
  • .nojekyll: prevents GitHub Pages from ignoring files starting with an underscore

Start the local service preview

Run the following command in the docs directory to open the local server. The default address is http://localhost:3000

$ docsify serve docs

Serving /Users/may/Nodejs-Roadmap/docs now.
Listening at http://localhost:3000
Copy the code

I’m introducing nodeJs-roadmap here, and here’s what it will look like in the end, which you can also preview online at www.nodejs.red/.

Set up the blog

  • Set the cover

To set up our cover image, we need to set coverPage: true in the docs/index.html file and then create the docs/_coverpage.md file

docs/index.html

<script>
  window.$docsify = {
    coverpage: true
  }
</script>
<script src="//unpkg.com/docsify"></script>
Copy the code

docs/_coverpage.md

<img width="180px" style="border-radius: 50%" bor src="https://nodejsred.oss-cn-shanghai.aliyuncs.com/nodejs_roadmap-logo.jpeg?x-oss-process=style/may">

# Node.js Technology stack guide

- This document is the work of the authorNode.js Developer: node.js server stack: node.js server stack: node.js server stack: Node.js server stack: Node.js server stack: Node.js server stack: Node.js server stack: Node.js server stack [! [stars](https://badgen.net/github/stars/Q-Angelo/Nodejs-Roadmap?icon=github&color=4ab8a1)](https://github.com/Q-Angelo/N odejs-Roadmap) [! [forks](https://badgen.net/github/forks/Q-Angelo/Nodejs-Roadmap?icon=github&color=4ab8a1)](https://github.com/Q-Angelo/N Odejs-roadmap) [GitHub](
      
       ) [Start reading](readme.md)
      Copy the code
  • Custom navigation

There are two officially supported methods, which can be set in HTML, but the link should start with #/, and navigation via Markdown configuration, which we are using here

First configure loadNavbar: true, then create the docs/_navbar.md file.

docs/index.html

<script>
  window.$docsify = {
    loadNavbar: true
  }
</script>
<script src="//unpkg.com/docsify"></script>
Copy the code

The configuration here is not too complicated. The corresponding directory structure is generated based on indentation. Note that the jump link to the directory is the file in the current (docs) directory

docs/_navbar.md

* Introduction
* [introduction](readme.md)

* JavaScript
* [base](/javascript/base.md)
    * [This](/javascript/this.md).Copy the code

The above example generates the following effect:

How to preview our blog project online through Github Pages

GithubPages preview

Host our Blog to Github for real-time access. Enable Github Pages in the project Settings

Select the dCOS file directory as follows:

Browser: q-Angelo. Github. IO/nodejs-road… Accessible, q-Angelo is your username and NodeJs-roadmap is your project name.

conclusion

After reading this article, if you haven’t used Docsify yet, I hope you can try it out and create your own personal blog with Docsify. When I was writing Node.js Technology Stack, I finally chose Docsify for online preview of documents when there was too much content. Because it used to give me the feeling is really simple, convenient.

Author: you may link: www.imooc.com/article/287… Source: MOOC

Recommended reading

  • Personal blog: www.nodejs.red
  • Public id: Nodejs Technology stack