How to Build a Docsify-Powered Documentation Site for Your SpringBoot Mall Project

Abstract

mall is a SpringBoot e‑commerce project with over 18k stars on GitHub. After expanding its tutorial to more than thirty articles, a small Docsify‑based documentation site was built to improve reading experience.

Project Documentation Demo

Using Docsify to Write Project Documentation

Docsify Overview

Docsify dynamically generates a website from Markdown files at runtime, keeping the Git repository clean and ideal for quickly building small documentation sites.

Project Initialization

Install Node.js

Download from https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi and install.

Install docsify‑cli

<code>npm i docsify-cli -g</code>

After installation you can preview documents locally.

Initialize Project Structure

<code>docsify init ./docs</code>

<code>  -| docs/
    -| .nojekyll
    -| index.html
    -| README.md
</code>

Live Preview

<code>docsify serve docs</code>

Open http://localhost:3000/ to view the site.

Customize Sidebar

Add sidebar configuration in

index.html

:

<code>window.$docsify = {
  loadSidebar: true,
  maxLevel: 2,
  subMaxLevel: 4,
  alias: {
    '/.*/_sidebar.md': '/_sidebar.md'
  }
}
</code>

Create

_sidebar.md

to define the menu, e.g.:

<code>* Foreword
  * [mall Architecture Overview](foreword/mall_foreword_01.md)
  * [Knowledge Points for Learning](foreword/mall_foreword_02.md)
* Architecture
  * [SpringBoot+MyBatis Skeleton](architect/mall_arch_01.md)
  * [Swagger‑UI API Docs](architect/mall_arch_02.md)
</code>

Customize Navbar

<code>window.$docsify = {
  loadNavbar: true,
  alias: {
    '/.*/_navbar.md': '/_navbar.md'
  }
}
</code>

Create

_navbar.md

with links to backend, mobile, project repos, etc.

Customize Cover Page

<code>window.$docsify = {
  coverpage: true
}
</code>

Create

_coverpage.md

with a logo, title, description, and links.

Add Full‑Text Search

<code>window.$docsify = {
  search: {
    placeholder: '搜索',
    noData: '找不到结果!',
    depth: 3
  }
}
</code>

Add Code Highlighting

<code>&lt;script src="//unpkg.com/prismjs/components/prism-bash.js"&gt;&lt;/script&gt;
&lt;script src="//unpkg.com/prismjs/components/prism-java.js"&gt;&lt;/script&gt;
&lt;script src="//unpkg.com/prismjs/components/prism-sql.js"&gt;&lt;/script&gt;
</code>

Refer to PrismJS for additional languages.

Add One‑Click Copy Code

<code>&lt;script src="//unpkg.com/docsify-copy-code"&gt;&lt;/script&gt;
</code>

Deploy Documentation on GitHub

Push code to GitHub, open the repository Settings, enable GitHub Pages.

Enable the GitHub Pages service.

Documentation URL

https://macrozheng.github.io/mall-learning/

Project Source Code

https://github.com/macrozheng/mall-learning

Recommended Reading

Order Module Database Table Analysis (Part 3)

Order Module Database Table Analysis (Part 2)

Order Module Database Table Analysis (Part 1)

Product Module Database Table Analysis (Part 2)

Product Module Database Table Analysis (Part 1)

mall Database Table Overview