Tool selection
Vercel
Vercel is an out-of-the-box web hosting service with CDN nodes around the world, making it more stable and faster to access than Github’s own Github Pages. When building a static blog using Github Pages, you will often encounter submission code that is still not updated half a day after a successful build. With Vercel, this problem is completely removed.
Docsify
Docsify is a runtime static website builder. It doesn’t convert markdown files into HTML files, doesn’t need to be launched, doesn’t need to be packed, just needs an index.html and a bunch of Markdown files to build your static website, that’s it.
To prepare
- A Github account
- A Vercel account that is bound to Github. If not, go to the Vercel website to register and bind to Github.
start
Create a Github project
Clone the project locally
git clone [email protected]:lexmin0412/docsify-website-sample.git
Copy the codeAn empty project named docsify-site-sample is generated locally.
Build the basic framework
Create the following files in the root directory:
- Index.html entry file
- Readme. md Document front page (can also be another name, corresponding to the Get Started link in _coverpage.md)
- _coverpage.md Cover configuration file
- The _sidebar.md sidebar configuration file
And fill in the corresponding content:
index.html
<! -->index.html<-->
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify website sample</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0">
<! -- Vue theme style -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<! -- Dark theme plugin style -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css"
title="docsify-darklight-theme" type="text/css" />
</head>
<body>
<div id="app">loading...</div>
<! Edit plugin on Github -->
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<script>
window.$docsify = {
basePath: '/'.// Resource relative path
name: 'docsify website sample'.// The document title is displayed at the top of the sidebar
nameLink: '/'.// Click the jump address after the document title
repo: 'lexmin0412/docsify-website-sample'.// If you have the repo attribute, the Github icon will be displayed in the upper right corner. Click to enter
loadSidebar: true.// Load the sidebar
externalLinkTarget: '_blank'.// External links are opened by default
cornerExternalLinkTarget: '_blank'.// Open the link in the upper right corner. The default is _blank
routerMode: 'hash'.// The routing mode is hash by default
coverpage: true.// Show the cover
notFoundPage: true.// Load _404.md when the specified page is not found
auto2top: true.// Whether to switch to the top of the page automatically
search: { // Search for plug-in configuration
paths: 'auto'.placeholder: '🔍 search'.noData: '😞 no results! '
},
count: { // Word count plug-in configuration
countable: true.fontsize: '0.9 em'.color: 'RGB (90,90,90)'.language: 'chinese'
},
pagination: { // Paging plug-in configuration
previousText: 'Previous Section'.nextText: 'Next chapter'.crossChapter: true,},plugins: [
EditOnGithubPlugin.create(
'https://github.com/lexmin0412/docsify-website-sample/blob/master/docs/'.null.function ( file ) {
if ( file.indexOf( 'en') = = = -1 ) {
return 'Edit on GitHub'
} else {
return 'Edit on Github'}})].themeColor: "#42b983".// Dark mode theme color
darklightTheme: {
siteFont: "PT Sans".defaultTheme: 'dark'.codeFontFamily: 'Roboto Mono, Monaco, courier, monospace'.bodyFontSize: '17px'.dark: {
accent: '#42b983'.toogleBackground: '#ffffff'.background: '#091a28'.textColor: '#b4b4b4'.codeTextColor: '#ffffff'.codeBackgroudColor: '#0e2233'.borderColor: '#0d2538'.blockQuoteColour: '# 858585'.highlightColor: '#d22778'.sidebarSublink: '#b4b4b4'.codeTypeColor: '#ffffff'.coverBackground: 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)'.toogleImage: 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg)'
},
light: {
accent: '#42b983'.toogleBackground: '#091a28'.background: '#ffffff'.textColor: '#34495e'.codeTextColor: '# 525252'.codeBackgroudColor: '#f8f8f8'.borderColor: 'rgba (0, 0, 0, 0.07)'.blockQuoteColor: '# 858585'.highlightColor: '#d22778'.sidebarSublink: '#b4b4b4'.codeTypeColor: '#091a28'.coverBackground: 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)'.toogleImage: 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/moon.svg)'}}}</script>
</body>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<! -- Global Search plugin -->
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
<! -- Word count plugin -->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<! -- Code copy plugin -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<! Image zooming plugin -->
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
<! Read the progress bar plugin -->
<script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js"></script>
<! -- Dark theme switch plugin -->
</html>
Copy the codeREADME.md
# titlesThis is a docsify website template.Copy the code_coverpage.md
# docsify website sample <small>0.0.1</small>
<a href="https://github.com/lexmin0412/docsify-website-sample">Github</a>
<a href="#README">Get Started</a>
Copy the code_sidebar.md
-start - [An overview of the] (/README.md)
Copy the codeRun locally
Open index.html in VSCode, right-click -> use Live Server(or another plugin) to open it in your browser, and you will see the following page:
Clicking on Github will take you to the project we originally created on Github (temporarily empty because we don’t have push code yet), and clicking on Get Started will take you to the page configured in _coverPage.md (readme.md in our case).
This completes our local debugging.
Configure Vercel automatic deployment
Push the local code to the Github repository, and when you’re done, go to the Vercel workbench via vercel.com/dashboard and you’ll see the following interface at the top:
Click the New Project button on the right to go to the next step:
The list on the left shows a list of all your Github projects in the order they were updated. Click the Import button for the docsify-site-sample project you just created to go to the next step:
Select the entry for your personal Github account and click the Select button. The next step will be to Select the build root directory:
Never mind, just click the Continue button to go to the next step:
Click the Deploy button and wait a moment. Congratulations screen appears:
Click visit, vercel has automatically deployed the project under docsify-website-sample.vercel. App, you can access it normally:
From now on, vercel will automatically trigger build updates whenever you make changes to the document content locally and push it to Github.
You can customize your presentation by modifying the content in index.html as required.
other
A nested menu
Step1 create a document
For example, if we have a page that needs to be nested under the parent menu, we need to create a file first, you can use the following method to create, or you can manually create:
Md Vim Usage/How to implement menu nesting. MdCopy the codeSave the file after editing.
Step2 edit the _sidebar. Md file
Go to the _sidebar. Md file and add the following:
-Function demonstration - [How to implement menu nesting] (/usage/ How to implement menu nesting. Md)
Copy the codeNow, our _sidebar file should look like this:
-start - [An overview of the] (/README.md)
-Function demonstration - [How do you implement nesting] (/usage/ how to implement nesting. Md)
Copy the codeOpen the browser again, see the following interface, is the menu nesting effect we want.
