Project address: Github

Website demo: Demo

As a front end development with force, of course, to write a hand with force project documents, so that we look at the comfort, use the rest assured. Since using Docsify, mom doesn’t have to worry about people not using my project anymore

Wait, wait, wait, wait, wait, wait, wait, wait, wait, wait, wait. Docsify is a tool that dynamically generates documents for websites, and of course you can also use it to write a blog, along with a high definition cover image, and that’s how I came up with my sha Diao Qian Duan Gou. Use Markdown format to write documents, easy to use for development, once into the pit can not extricate themselves ~

Next I will take you step by step with docsify to build a blog, nonsense not to say, directly open dry!

preparation

As a front-end developer, by default you will have mastered the basics of Node NPM, and will be able to create a new project using Github and clone it locally. If you do not know the basic skills above, it is not recommended to read on. I suggest you directly find flower flower elder sister hand – in – hand teach front – end introduction ~

Quick start

It is recommended to install the Docsify-CLI tool globally, so that you can easily create and preview the generated documents locally.

npm i docsify-cli -g
Copy the code

Create a new github project

Create a new project using Github, clone the project to the local directory, go to the project root directory, and initialize the project directly with init.

docsify init ./docs
Copy the code

Use the editor to open the project and see

Local preview

docsify serve docs
Copy the code

After executing the command to open, open http://localhost:3000/#/ in the browser you can see a very simple page, here we have done a good foundation, the next is to beautify her, let her beautiful ~

Beautification project

The next step is to beautify our project, cover, sidebar, theme color. Open the index.html file in the docs directory and go to window.$docsify, which is where most of the rest of the configuration is done

1. Set the name and warehouse address

Set the document name and repository address

<!-- index.html -->
<script>
  window.$docsify = {  
     name: 'Sunnie’s Blog', 
     repo: 'https://github.com/sunniejs/blog'
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
Copy the code

2. Set the cover

First, configure coverpage. By default, the file loaded is _coverpage.md. For details, see the configuration rules

Configuration item # coverpage

  window.$docsify = {      coverpage:true
    }
Copy the code

Create a new _coverpage.md file and write some basic configuration. For details, go to cover

It’s still a little ugly. Let’s change it

Create a new _media folder and create a custom style called custom.css and introduce a new font in index. HTML.

 <link rel="stylesheet" href="./_media/custom.css">
 <link href="https://fonts.googleapis.com/css?family=Lobster"rel="stylesheet">
Copy the code

Change the theme color

 window.$docsify = {    themeColor: '#25798A' }
Copy the code

Change the theme color and font and get a nice cover

3. Configure the sidebar

Display the sidebar, create _sidebar. Md, and configure the loadSidebar option. For details, see configuration item #loadSidebar.

  window.$docsify = {
    loadSidebar:true
  }
Copy the code

Then we can see the sidebar

4. Write the content

The next step is to write the content. Each article is an MD file, which can be updated by editing the docs/ readme.md directly, and then pointing the sidebar link to that file. For easy management of other new MD files I put them under the blog folder.

That concludes the basics of this blog. The next step is how to get people to see our blog.

The deployment of

Submit the local code to Github (this step is omitted). Then let’s set it up. Under our project, click Setting to find GitHub Pages. Set it in the red box below, save it, and you can see the address of the arrow.

Use this link to access your documents and blogs.

Finally, for easy access, after we get the link, we go back to the code interface, click Settings, and fill the link in the description or website column for easy access.

conclusion

Docsify still has a lot of functions to explore. Today, I just give you a brief introduction, and you can learn more on the official website. Another day of hard work, workers, come on!

About me

Scan the QR code to reply “front-end”, find me, communicate with me or join “front-end fairy group”, come to the organization is waiting for you ~

Finally, if the article is useful to you, please give me a thumbs-up. I take every thumbs-up seriously as a like ~