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 computer
Node.js
; - Own one’s own
Github/Gitee
Accounts.
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.md
Render as home page content;.nojekyll
: to preventGithub Pages
Ignore 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! 😎 😎 😎