Step-by-Step Docsify Tutorial: Build a Dynamic Documentation Site

Installation

Install docsify-cli globally:

npm i docsify-cli -g

Project initialization

Create a directory (e.g., E:\docsify) and run: docsify init ./Docsify-Guide The command creates three items: index.html – entry file. README.md – rendered as the homepage. .nojekyll – prevents GitHub Pages from ignoring files that start with an underscore.

Basic configuration (index.html)

<!-- index.html -->
<script>
  window.$docsify = {
    coverpage: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

Cover page (_coverpage.md)

# Docsify
> A magical documentation site generator.

- Simple and lightweight
- No statically built html files
- Multiple themes

[Let Go](/README.md)

Navbar (_navbar.md)

* 首页
* https://baidu.com/
* 友情链接
* https://docsify.js.org/#/

Enable the navbar by adding loadNavbar: true to the window.$docsify object.

Sidebar (_sidebar.md)

- [**API文档**](README.md)

* 用户;
  * [用户接口](/user/user.md) <!-- relative path -->
* 菜单;
  * [菜单接口](/menu/menu.md)

Enable the sidebar by adding loadSidebar: true to the window.$docsify configuration.

Running the site

Start a local server: docsify serve Docsify-Guide Open http://localhost:3000/ in a browser to view the generated documentation.