Recently, I plan to sort out the front-end knowledge, and form a knowledge document of the problems and solutions I encounter at ordinary times. This article documents the main process of setting up VuePress, and also provides some custom configurations, example address: doc.i-fanr.com

Environment set up

VuePress has a complete Chinese documentation, so we can directly follow the documentation to build. First, make sure that Node.js has been installed on your computer and the version is no less than 8.6

# check node. js version node-vCopy the code

Create a folder to build VuePress, for example my VuePress is built in the spacexCode directory

mkdir spacexcode && cd spacexcode
Copy the code

Install VuePress as a local dependency

yarn add -D vuepress # npm install -D vuepress
Copy the code

Create your first document

mkdir docs && echo '# Hello VuePress' > docs/README.md
Copy the code

Add some scripts to package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
Copy the code

Start the server locally

yarn docs:dev # npm run docs:dev
Copy the code

Add the theme

After the environment is added, the next step is to complete the decoration. The original style of VuePress is more suitable for making documents, so we need to customize the style. VuePress provides a way to customize the theme and style. For simplicity we can directly use a theme created by others. Here I recommend a theme that I am using now

Modify page Styles

The maximum page content width of the original theme was fixed, which was a bit narrow on my big screen, so I changed the text width to 50% of the page width, which is consistent with Hexo and can be changed by each person to suit his or her tastes. In the vuepress/styles/palette. Styl file add the following styles

Home -blog. Home -blog-wrapper width :75% // Article page content width :50%. Page. Page -title max-width :50% .content__default:not(.custom) max-width :50% .page-nav max-width :50% .comments-wrapper max-width :50% ! importantCopy the code

Add the plug-in

Install the vuepress-plugin-image plug-in, for example

yarn add vuepress-plugin-image
Copy the code

Then add the plug-in to config.js

plugins: [
    '@vuepress/plugin-back-to-top',
    '@vuepress/plugin-medium-zoom',
    'image'
  ]
Copy the code

Add plug-ins not included in the theme, Vuepress-plugin-viewer vuepress-plugin-Pangu automatically adds a space between the Chinese and English characters in an article. Vuepress-plugin-tabs adds a TAB with a plugin Vuepress-plugin-click Adds special effects when mouse click vuepress-plugin-demo-block adds H5 code preview block

The deployment of

We can create a shell file to package the deployment, my deployment to github. IO, this is my shell file

#! /usr/bin/env sh set -e # generate static file yarn docs:build # go to the generated folder CD docs/.vuepress/dist git init git add -a git commit -m 'deploy' git push -f [email protected]:fantingsheng/spacexcode.git masterCopy the code