VuePress quick build && vuepress-theme-reco

The official VuePress has detailed deployment documentation and detailed configuration instructions, but for the average geek, it’s probably a simple configuration and hopefully a quick launch (I’m one of those people who can’t get through a long book). Hope to have a quick start of the document, plus some high-frequency configuration and simple deployment process, quickly start to build a document output;

Deploy to Gitee Pages

Gitee Pages is a free static web hosting service. You can use Gitee Pages to host static web Pages such as blogs and project official websites. If you’ve used Github Pages before, you’ll quickly get used to Gitee’s Pages service. Gitee Pages currently supports compilation of static resources by Jekyll, Hugo and Hexo.

Create a new warehouse through Gitee, and start Gitee Pages service with one key, domestic service, convenient and quick.

The deployment of

Manual deployment & Github Actions Automatic deployment

Matters needing attention

When writing articles, include YAML format

---
title: Roast Duck
date: 'the 2019-08-08 08:00:00'
sidebar: 'auto'
categories:
 - cooking
 - hobby
tags:
 - bake
 - The duck
keys:
 - '123456'
publish: false
// Add the top field
sticky 1.12.+
  description: Article at the top.
  type: number
  sort type: In descending order, you can follow 1. 2. 3. . To reduce the rank of top articles
---
Copy the code

Add dates when writing articles and support a timeline

---
title: [VUE] proxyTable for cross-domain solutions
date: 2017-12-28  // Time format, date is fillable When a vehicle Is in the format of 2019-10-20 00:00:00.
tags:
- vue
- webpack
---
Copy the code

Add abstract to the article

Above, yamL below content is the summary content;

-- Title: [vue] proxyTable date: 2017-12-28 // Time format, the date can be filled in the hour and second, the format is 2019-10-20 00:00:00. tags:- vue
- webpack
---::: <! -- more --># # the body
Copy the code

Markdown supports exceptional syntax

  • The container

    Enter :: tip This is a tip ::: ::: warning This is a warning ::: ::: danger This is a dangerous warning ::: ::: If the external force applied to an object is zero, the speed of the object remains the same. ::: right from [wikipedia] (https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B) ::: ::: details This is a detail block that does not work in IE/Edge :::Copy the code

Article directory

VuePress automatically traverses the files as long as they are stored in the Docs directory. When you create your own files, you can classify them by folder. According to the YAML format of each Markdown file, the system will automatically identify Tag, title, time and author and arrange them. It has nothing to do with where markdown is stored.

Docs >> Folders and Markdown files cannot be named with Spaces

  • The docs folderUnder the custom folder name as wellmarkdownfile
    • Can’t haveThe blank space, or innpm run buildComplains;
    • There can beChinese, or innpm run buildComplains;

The title of the article must be ## 2, level 1 or level 3

The first line of each article must be a ## secondary title, otherwise it will not be able to parse;

Language finches export

Convention greater than Configuration

Where is it reflected? For example. Vuepress/enhanceapp. js means to register components in vuepress, while in. Vuepres/Components, vuepress automatically traverses components in this directory and registers them as global components.

Form a complete set of

vuepress-theme-reco

The official link

VuePress

Finally, I attach my blog address: Polo Blog