Some time ago, Yu Yu Creek released VuePress, a static website generator based on Vue, which was very popular. The default themes optimized for writing technical documentation were also so popular that it was decided to reuse the mp-Weui documentation using VuePress.

Install preview

Install VuePress

npm install -D vuepressCopy the code

Create a docs folder in the root directory of the project to store the md source files, and create a readme.md file in the root directory of the docs folder to configure the home page information and view details

- home: true actionText: start - > actionLink: / components/something footer: MIT Licensed | Copyright © 2018 titles -Copy the code

Configuration package. Json

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

preview

npm run docs:devCopy the code

Custom Configuration

Create a.vuepress folder under the docs folder and configure the site with the necessary.vuepress/config.js

Module. Exports = {/ / if you plan to release site is in a warehouse, such as https://github.com/youngluo/mp-weui, is the base you need to specify the is/mp - weui/base: '/mp-weui/', // site title, which will be displayed on the left of the navigation bar in the default theme title: 'mp-weui ', // site description, which will be rendered in HTML as <meta> tags, which will be displayed on the home page in the default theme description: Head: [['meta', {name: 'keywords', content: ['link', {rel: 'icon', href: '/favicon.png'}]], serviceWorker: true, ", themeConfig: {repo: 'youngluo/mp-weui', docsDir: 'docs', // Disable h2, h3 tags link to sidebar sidebarDepth: 0, nav: [{text: Sidebar: {'/ Components /agree'}], sidebar: {'/ Components /': genSidebarConfig()}}Copy the code

If you need to provide static resources such as favicons or PWA ICONS in your site, you can put them under.vuepress/public and they will be copied to the root of the generated folder

packaging

Execute the command

npm run docs:buildCopy the code

The package file is output to.vuepress/dist by default

Release to making

Create the deploy. Sh

#! /usr/bin/env sh set -e npm run docs:build cd docs/.vuepress/dist # if you are deploying to a custom domain # echo 'www.example.com' > CNAME git init git add -A git commit -m 'update docs' git push -f [email protected]:youngluo/mp-weui.git master:gh-pages cd -Copy the code

Configuration package. Json

{
  "scripts": {
    "deploy": "bash deploy.sh",
  }
}Copy the code

Finally, run NPM run deploy to push the packaged file to the Github GH-Pages branch

Making Pages configuration

Click the Settings TAB in the Github repository

Scroll to GitHub Pages and select Source as GH-Pages Branch

And you’re done! Preview sample