Vuepress is an excellent and concise document generator, which can automatically generate corresponding html files according to the md documents in the directory, with a simple and generous interface. Every page generated by VuePress comes with pre-rendered HTML, so it has very good loading performance and search engine optimization (SEO). This article will introduce how to deploy vuepress in CentOS7 environment. You can appreciate the effect before deciding whether to build it: https://mfrank2016.github.io/wikibook/. Personally, I think it's pretty good, simple and generous.
One, install nodejs
curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
yum install nodejs
Two, install vuepress
npm install -g vuepress
Three, create a working directory
mkdir project
cd project
mkdir docs
Four, before initialization
npm init -y
vim package.json
Edited to the following content, here is actually setting the command alias.
{" scripts":{"docs:dev":"vuepress dev docs","docs:build":"vuepress build docs"}}
Create a .vuepress directory.
mkdir .vuepress
cd .vuepress
Create config.js, this is the global configuration file of vuepress, most of the properties are set here.
mkdir public
vim config.js
Modified to the following content, the corresponding content can be modified by yourself. The official documentation is here: https://vuepress.vuejs.org/zh/config/
module.exports ={
title:'Cool breeze wiki',
description:'I'm waiting for the wind, also waiting for you',//The path relative to the git repository, such as the full path: https://mfrank2016.github.io/wikibook/Then set to'/wikibook/'
base:'/wikibook/',
host:'0.0.0.0',//Run port
port:8081,
themeConfig:{//gitc warehouse address
repo:'https://github.com/MFrank2016/wikibook',//If your document is not at the root of the repository
docsDir:'docs',//Optional, default is master
docsBranch:'master',//The default is true, set to false to disable
editLinks:true,//Navigation Bar
nav:[{ text:'Home', link:'/'},{ text:'Guide', link:'/guide/'},{ text:'External', link:'https://google.com'},{ text:'Languages',
items:[{ text:'Chinese', link:'/language/chinese'},{ text:'Japanese', link:'/language/japanese'}]}],
sidebar:[{
title:'Group 1',
collapsable:false,
children:['/']},{
title:'Group 2',
children:['/']}]},//search for
search:true,
searchMaxSuggestions:10,
lastUpdated:'Last Updated',// string | boolean}
the whole frame
project
├─── docs
│ ├── README.md
│ ├── .vuepress
│ ├── config.js
│ └── public
│ └── hero.png
│ └── guide
│ └── README.md
└── package.json
Five, initialization
Create README.md in the docs directory
---
home:true
heroImage:/hero.png
actionText:click to read
actionLink:/guide/
footer: MIT Licensed | Copyright © 2018-present Frank
---
Then go back to the project directory
# Open debugging mode, run the service, open http at this time://localhost:8081(Here is the port set above)I can see the simplest page
vuepress dev
# Build, at this time, the md document will be converted into an html file and stored in docs/.vuepress/dist directory
vuepress build
Six, debug deployment
At this point, the static web page has been generated in the docs/.vuepress/dist directory, you can first turn on the debugging mode, and then use ftp and other software to connect to the server remotely, modify the document under docs, and upload each modification , It will be recompiled automatically, of course, the whole process takes one or two minutes, depending on the performance of the server. Adjust it to a suitable level and move it to the corresponding directory of nginx or apache.
Recommended Posts