* updated german links * fixed links where `QingWei-Li` should've been `docsifyjs` * naturally excluded donate links and links to private projects like `vuep` unrelated to docsify --- See commit for details. If you have a question, just ask.
2.2 KiB
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 fileREADME.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 http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
//...
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</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.