Introduction to the

The official documentation

The need for rapid deployment to generate static web sites that facilitate blogging or documenting has never diminished. Therefore, github also has a number of complementary solutions for this type of static site, such as Hexo or Gatsby. This static site ranking gives you a glimpse of the current stars top-ranked schemes.

Last week The author of Vue, Yu Dada, proposed a new solution to VuePress. Its basic idea borrowed from Nuxt.js, but I think NUxT is more suitable for medium and large applications, so I won’t discuss it too much here. VuePress is a more lightweight application with more flexibility considering that you can embed vUE syntax in MD files.

The core appeal is to solve two problems and focus more on the output.

  1. SEO optimization
  2. Page loading speed

features

  • Support for embedding VUE code in MD files

  • Support the PWA

  • Integrated GA analysis

  • Default RWD layout

  • Simple UI components

Start implementing a Demo

Create a new folder and quickly initialize it

mkdir new_project

npm init -y
Copy the code

Install VuePress globally

npm install -g vuepress
Copy the code

Create a file folder to hold md articles

// The default name of vuepress is docs. In order to avoid extra pits, we use the official file format mkdir docsCopy the code

Configure package.json by adding the following two lines

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

Create an MD file to support home page rendering and preview

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

Start the local server for preview

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

Start with a package build to make the project folder present the official default structure of VuePress

yarn run docs:build
or
npm run docs:build
Copy the code

structure

At this point, you should see the structure look like this:

Used to store components and config.js.

UI components

The local server should have a simple Hello VuePress page, so you need to add some components to enrich the page.

The introduction of the component

// cdVuepress folder // set up a config.js file // Ready to import module. Exports = {}Copy the code

Title component

module.exports = {
    title: 'My VuePress'} // will appear in the upper left corner of the page and will also be the title of the entire static websiteCopy the code

Nav (own easy search)

module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'VuePress', link: 'https://vuepress.vuejs.org/'}}},]Copy the code

On the left side of the sidebar

sidebar: [
  '/'.'/about/',
  {
    title: 'Group 1',
    collapsable: false,
    children: [
      '/guide/'}] // In addition to sidebars, you can also create child sidebarsCopy the code

Use Vue components

In addition to basic MD files, VuePress also provides embedded Vue files in MD files.

// All. Vue files preset under. Vuepress/components are automatically registered to the global domain. // It can be referenced freely in any MD file. Only the components name must be introduced as the div name.Copy the code

To illustrate, first create a Vue file under the Components folder.

In addition to using vUE syntax, you can also modify styles.

Finally, the written VUE file is introduced into the corresponding MD file

Deployment of making pages

Create a remote repository and clone it locally. Then add base to the config.js configuration file

// All url links beginning with/will be automatically added to the lower face directory after base is set. // Note that vuepress requires that the path name be added after the path name'/'

base: '/your repository name/'
Copy the code

It basically looks like this:

Base is set and packaged.

yarn run docs:build
or
npm run docs:build
Copy the code

Then pack the data in DIST, throw it into the folder just cloned, and push it again.

Go back to remote Repository and go to Settings.

Click the GitHub Pages source below to select the master branch, leave the theme unselected, and then save. The static url will be generated automatically, but the url will be 404 at the beginning, and it will take more than ten seconds to deploy.

Project Demo