❝

Docsify is a quick way to help build your own blog, all you need to do is use Markdown syntax. Deploy online using GitHub or Gitee platform. Refer to the good templates of team members

❞

Docsify initial

Docsify can help you quickly generate document websites. Unlike GitBook, Hexo does not generate static.html files; all conversion is done at run time. If you want to get started, just create an index.html and start writing documentation and deploy it directly on GitHub Pages

features

  • No need to build, write documentation and publish directly
  • Easy to use and lightweight (~21kB after compression)
  • Intelligent full text search
  • Multiple sets of topics are available
  • Rich API
  • Support Emoji
  • Compatible IE11
  • Support for server-side rendering SSR (example)

Local Installation and use

The NPM installation is used here, and the global installation scaffold tool docsify-CLI is directly used. If the installation is slow, you can use the Chinese image CNPM installation

The installation

npm i docsify-cli -g

Copy the code

To use the Docsify scaffold, just use the relevant command. Note that the filename convention here is also officially recommended as docs

docsify init docs

Copy the code

The following is displayed successfully and the following three files will be generated in the docs directory

Initialization succeeded! Please run docsify serve docs

Copy the code
  • index.htmlEntrance to the file
  • README.mdRender as home page content
  • nojekyllUsed to preventGitHub PageFiles starting with an underscore are ignored

Start the

  • Run the following command in the docs directory to run the local service, default addresshttp://localhost:3000/
docsify serve docs

Copy the code

The default generated page is displayed successfully

write

Set the cover

To set up our cover art, there are two steps

  • First of all indocs/index.htmlIn the file$docsifyAttribute setcoverpage: true
//docs/index.html

<script>

  window.$docsify = {

    coverpage: true

  }

Copy the code
  • Then create adocs/_coverpage.mdfile
//docs/_coverpage.md

<img width="180px" style="border-radius: 50%" bor src="https://xxx/logo.jpg"< span style = "max-width: 100%; clear: both

<p> May your fingers have it! [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04dbfe7a9d91425d9d73d4b32f76161d~tplv-k3u1fbpfcp-watermark.image)! [](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fcf4f44683b4d239b127b57f6265b0f~tplv-k3u1fbpfcp-watermark.image)! [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/370675f42dab41b188ca8ce7448fa1a5~tplv-k3u1fbpfcp-watermark.image)! [] (https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5ba36f9901940168c9571651e375a88~tplv-k3u1fbpfcp-watermark.image) code </p>

<p> Stars in eyes </p>

Copy the code

You can generate the corresponding cover art

Custom navigation

There are two officially supported methods, which can be set in HTML, but the link should start with #/, and the other way to navigate through Markdown configuration, which I prefer

  • The first configurationloadNavbar: true
<script>

  window.$docsify = {

    coverpage: true.

    loadNavbar: true

  }

</script>

Copy the code

Then create the docs/_navbar.md file to write the navigation

// Note: create the corresponding MD file jump

* a navigation

* [Description 1](test.md)



2 * navigation

* [description 1](/nav2/test1.md)

* [description 2](/nav2/test2.md)



.

Copy the code

Create the corresponding folder

Results the following


Other operating

The above is the basic operation of Docsify, which is enough for us to write our own personal blog. If you want to change the theme or more operations, you can refer to the official

The deployment of online

Gitee

  • Create a blog repository
  • Push locally written docs project, unknowngitCommand can be learned under ~
//docs sibling directory

git init

git add README.md

git commit -m "first commit"

Git remote add origin Specifies the remote address of your repository

git push -u origin master

Copy the code

  • The deployment ofGitee Pages, click Warehouseservice -> Gitee PagesSet the following

  • After the deployment is successful, the following address is displayedThe browser type http://agoniquan.gitee.io/blog can visit,agoniquanFor your username,blogName for your project.

GitHub

  • Create a blog repository
  • Push locally written docs project, unknowngitCommand can be learned under ~
//docs sibling directory

git init

git add README.md

git commit -m "first commit"

Git remote add origin Specifies the remote address of your repository

git push -u origin master

Copy the code

  • The deployment ofGitHub Pages, click Warehousesettings -> GitHub PagesSet the following

  • After the deployment is successful, the following address is displayedThe browser type https://250786898.github.io/blog/ can visit,250786898For your username,blogName for your project.

Making the sample

https://github.com/250786898/blogs