Docsify building a personal minimalist knowledge warehouse

、 Directory map

docsify Minimalist knowledge base

Personal blog may be everyone's experience " Blog dream ", Building an exclusive personal blog should also be a necessary skill for a development enthusiast , Of course, now blog one click deployment 、 We don't have to write the theme by ourselves , for example Hexo、WordProcess Only one server is needed 、 One computer can complete the cool blog theme page , I prefer minimalist style for blog pages , So I found a fun blog tool docsify A magical document website generator .

Let's first look at the effect of this tool , Hang out often B The little friend of the station should know CodeSheep Program sheep is a full stack walker , The program sheep teacher's personal self-study website uses docsify Tools to build , Take a general look at the layout of the teacher .

The teacher's content is very rich , It is worth collecting , Of course, here we don't just look at the teacher's web page , We try to imitate him ！

1.1、 Officially set up

1. open docsify Official website ：https://docsify.js.org/

2. Following steps , Please make sure our computer has node.js Environmental Science

3. First installation docsify-cli The scaffold

4. Create an empty folder on your computer , Used to initialize the project , That is, it will be used to store our blog files in the future

5. After initializing the project , Let's go into the folder , You can see the following files
   • index.html Entrance file
   • README.MD It will be used as the main page content rendering
   • .nojekyll Used to stop GitHub Pages Ignore files that start with an underline

6. Start the local server

1.2、 Custom page

Default Demo The page is monotonous , If we want to modify this page , Just modify the README.md, Grammar is MarkDown grammar

Of course, I just write casually , You can put your md Paste notes in .

1.3、 Multi page document

If we want to create multiple pages , Or websites that need multi-level routing , stay docsify It can also be easily implemented in .

We refer to official documents , For example, I create two folders here GO、Java, It's stored separately README.md file

We want to visit Java Under folder README.md file , Just follow the URL java/

1.4、 Custom sidebar

It is not convenient for us to input the above multi page documents on the website , It's best to have a sidebar . We refer to official documents

1. First, in the index.html To configure , Add rules according to official documents

<!-- index.html -->

<script> window.$docsify = {
       loadSidebar: true } </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

2. Then create... In the root directory _sidebar.md, Edit as follows

* [java](java/)
* [Go](Go/)

3. The effect is as follows

Of course, there are many nested sidebars in official documents 、 Catalog 、 Subtitles, etc , There is no record here , The operation methods are similar

1.5、 Open the cover

1. To configure index.html file

<!-- index.html -->

<script> window.$docsify = {
       coverpage: true } </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

2. Root creation _coverpage.md file

# docsify <small>3.5</small>

>  A magical document website generator .

-  Simple 、 Light  ( After the compression  ~21kB)
-  No need to generate  html  file 
-  Numerous themes 

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsify)

So the cover is ready ！

1.6、 Replace the topic

If we want to change the theme , It only needs Replace index.html in css Style file is OK

For example, I change to dark.css

1.7、 Full text search plug-in

Our general blog site will have a search box ,docsify Help us provide such a plug-in .

1. stay index.html To configure

<script> window.$docsify = {
       search: 'auto', //  The default value is  //  Complete configuration parameters  search: {
       maxAge: 86400000,// Expiration time , Unit millisecond , Default one day  paths: [], // or 'auto' placeholder: ' Please enter search keywords ', noData: ' I didn't find it !', depth:2 } } </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

2. The effect is as follows

1.8、 Word count plug-in

1. stay index.html Add js

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

2. stay index.html Middle configuration

window.$docsify = {
    
  count:{
    
    countable:true,
    fontsize:'0.9em',
    color:'rgb(90,90,90)',
    language:'chinese'
  }
}

1.9、 Deployment project

Of course docsify There are other interesting plug-ins , I won't take more notes here , Official documents have records . Now what we need to do is to deploy our project to the server for other small partners to access . You can use GitHub pages perhaps Gitee pages, Of course, we can also use cloud servers , I'll use it here Gitee pages Deploy

1. Get into Gitee

2. Fill in the warehouse information

3. Just initialized docsify Open under the path of document warehouse git, Input git init

4. Then the input git add . , Add all files
5. Then the input git commit -m "first commit", So our local warehouse will be built
6. Next, we just need to push it to the remote warehouse , Input git remote View all remote hosts

If it is not shown in the above figure, there is no remote host , Just follow gitee Prompt for commands

As shown in the figure above, the push is successful , We click on Gitee pages

You can only open it after you use your real name Gitee pages apply , The real name information generally needs one working day to be reviewed , Then select start .

After launching, we can get a website , You can visit this website , We send it to other small partners , Other small partners can also visit ！

1.10、 Update project

Tip： The update project needs to be redeployed Gitee Pages, So it's really troublesome , Time will be recorded later Nginx Server driven deployment .

Time flies！