Quick start

It is recommended to install docsify-cli globally, which helps initializing and previewing the website locally.

npm i docsify-cli -g

Initialize

If you want to write the documentation in the ./docs subdirectory, you can use the init command.

docsify init ./docs

Writing content

After the init is complete, you can see the file list in the ./docs subdirectory.

index.html as the entry file
README.md as the home page
.nojekyll prevents GitHub Pages from ignoring files that begin with an underscore

You can easily update the documentation in ./docs/README.md, of course you can add more pages.

Preview your site

Run the local server with docsify serve. You can preview your site in your browser on http://localhost:3000.

docsify serve docs

?> For more use cases of docsify-cli, head over to the docsify-cli documentation.

Manual initialization

If you don't like npm or have trouble installing the tool, you can manually create index.html:

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
</body>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</html>

If you installed python on your system, you can easily use it to run a static server to preview your site.

cd docs && python -m SimpleHTTPServer 3000

Loading dialog

If you want, you can show a loading dialog before docsify starts to render your documentation:

  <!-- index.html -->

  <div id="app">Please wait...</div>

You should set the data-app attribute if you changed el:

  <!-- index.html -->

  <div data-app id="main">Please wait...</div>

  <script>
    window.$docsify = {
      el: '#main'
    }
  </script>

Compare el configuration.

2.0 KiB Raw Blame History