This is the 17th day of my participation in the August Text Challenge.More challenges in August

preface

Before you start, make sure you have met the following two prerequisites:

  • I installed it on my own computerNode.js ；
  • Own one’s ownGithub/GiteeAccounts.

Quick installation and start

The installation

First use the following command to install docsify- CLI tool on their own computer, convenient subsequent creation and preview their own document website;

 npm i docsify-cli -g
Copy the code

Project initialization

Create a project folder on your computer, like mine is Docsify, then go to that folder and open the command line tool to initialize the project with the following command.

 docsify init ./
Copy the code

Project directory structure

After initialization, you can find that the project folder directory structure is as follows, there are three files, its functions are as follows:

 .
     .nojekyll
     index.html
     README.md
Copy the code
  • index.html: entry file, also known as configuration file, in which all related configurations are stored;
  • README.mdRender as home page content;
  • .nojekyll: to preventGithub PagesIgnore files that begin with an underscore;

Local preview

After editing the document, if you want to preview it locally, you can run the following command on the local server, and then visit http://localhost:3000 in your browser for a live preview (port 3000 is the default access port of docsify).

 docsify serve ./
Copy the code

Project configuration

The configuration fileindex.html

In this file, the name of the document website is mainly configured and some configuration options are enabled. For example, my modified configuration is as follows:

 <! DOCTYPEhtml>
 <html lang="en">
 ​
 <head>
   <meta charset="UTF-8">
   <title>Village, the rain away</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="description" content="Description">
   <meta name="viewport"
     content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
 </head>
 ​
 <body>
   <div id="app"></div>
   <! -- docsify-edit-on-github -->
   <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
   <script>
     window.$docsify = {
       name: Village Rain Yao.repo: 'https://gitub.com/cunyu1943/cunyu1943'.maxLevel: 5.// Maximum level of caption supported for rendering
       subMaxLevel: 3.homepage: 'README.md'.coverpage: true./ / cover
       loadSidebar: true./ / the sidebar
       autoHeader: true.notFoundPage: true.// The page cannot be found
       auto2top: true.// Whether to switch to the top of the page automatically
       // Full text search
       search: {
         //maxAge: 86400000, // Expiration time in milliseconds, default one day
         paths: 'auto'.placeholder: 'search'.noData: 'Result not found'.// The maximum level of the search title, 1-6
         depth: 3,},plugins: [
         EditOnGithubPlugin.create('https://githee.com/cunyu1943/cunyu1943/')]},</script>
   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
   <! --Java code highlight -->
   <script src="//unpkg.com/prismjs/components/prism-java.js"></script>
   <script src="//unpkg.com/prismjs/components/prism-python.js"></script>
   <! -- Full text search -->
   <script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js"></script>
   <! Copy to clipboard -->
   <script src="//unpkg.com/docsify-copy-code"></script>
   <! -- emoji -->
   <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
   <! -- Image zoom -->
   <script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
   <! -- Word count -->
   <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
 </body>
 ​
 </html>
Copy the code

The sidebar

With the sidebar already open, add the following code to the configuration file:

 loadSidebar: true
Copy the code

Then create a new _sidebar. Md file in the directory and add the content you want to display.

The cover

If coverpage: true is already open, create a new _coverpage.md file and add the content you want to display, such as my cover.

Home page content

The contents of readme.md, for example, my final result will look like this;

Loading tips

When initialized, Loading… , but we can customize the information to prompt, just need to modify the following configuration in the configuration file index.html;

 <div id="app">🏃 💨 💨 💨 Loading...</div>
Copy the code

The deployment of

If you want to make our website accessible to others, you can deploy it to GitHub Pages and make it accessible to others. The deployment details are as follows:

The new warehouse

Create Github Pages as usual, but turn on Github Pages.

Submit the project

Commit local projects to remote

preview

To preview our website online, visit the url given when the repository was created in your browser. For example, mine is’ cunyu1943.github.

conclusion

After the above configuration, we have successfully built our own document type website using Docsify, so go ahead and try it! 😎 😎 😎