VuePress – Build a blog quickly

Environment configuration requires Node.js >= 8.6

😆😆 online Demoヾ(≧▽≦*)o

Create a new directory and initialize it

mkdir vuepress-blog && cd vuepress-blog

yarn init
Copy the code

Install vuepress

yarn add -D vuepress
Copy the code

Directory configuration

├─ ├─ ├─ download.txt └─ ├─ download.txt ├─ download.txt ├─ download.txtCopy the code

Check package.json for the following code to make sure the project starts properly

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

The topic configuration

Default Theme Configuration

The default theme provides the basic layout, search bar and options for customizing the navigation bar, sidebar, etc docs/ readme.md

PNG heroText: hero Tagline: hero subtitle actionText: Get started quickly → actionLink: Markdown-centric project structure helps you focus on writing with minimal configuration. - Enjoy the development experience of Vue + Webpack, use Vue components in Markdown, and use Vue to develop custom themes. - Title: High performance Details: VuePress pre-renders static HTML for each page and runs as SPA when the page is loaded. Footer: MIT Licensed | Copyright © 2018 - present Evan You -Copy the code

Custom topic configuration

Vuepress-theme-reco is a simple blog theme for vuepress-theme-reco

Navigation Bar Configuration

To deploy this project to Gitee Pages, base should be set to your repository name

The nav in the following code is the configuration of the navigation bar, docs/.vuepress/config.js

module.exports = {
  title: 'VuePress-blog'.description: ' '.themeConfig: {
    nav: [{text: 'home'.link: '/' },
      { text: 'base'.items: [
        // Link address can be in two modes: 1. Project address 2. Outside the chain case: https://developer.mozilla.org/zh-CN/
        { text: 'HTML'.link: '/rudiments/HTML' }, 
        { text: 'CSS'.link: '/rudiments/CSS' },  // These two types of addresses are automatically recognized by the system
        { text: 'JS'.link: '/rudiments/JS' },
        { text: 'MDN'.link: 'https://developer.mozilla.org/zh-CN/'}]}, {text: 'frame'.items: [{text: 'VUE'.link: '/frame/vue' },
        { text: 'react'.link: '/frame/react']}, {},text: 'nodeJS'.link: '/nodeJS/'}].logo: '/longmao.jpeg' // Header header logo, default address in public
  },
  base: '/vuepress-blog/' // 'vuepress-blog' is the name of the repository
}
Copy the code

After the configuration, the corresponding directory structure is displayed

.├ ── docs │ ├─.vuepress Component and static resource │ │ ├ ─ ─ public / / static resource directory │ │ └ ─ ─ config. Js / / configuration file entry │ ├ ─ ─ rudiments │ │ ├ ─ ─ HTML. The md | | ├ ─ ─ CSS. The md │ │ └ ─ ─ JS. Md │ ├ ─ ─ frame │ │ ├ ─ ─ vue. Md │ │ └ ─ ─ the react. The md │ └ ─ ─ nodeJS │ └ ─ ─ the README. Md └ ─ ─ package. The jsonCopy the code

Sidebar configuration

Generate the sidebar automatically

themeConfig:{
  sidebar: 'auto' // Automatically generate sidebars for all pages
}
Copy the code

Customize the sidebar

themeConfig: {
    sidebar: [{title: 'frame'.// Set the sidebar title
        path: '/frame/'.// Note that this is an absolute path
        collapsable: false.// Determine the sidebar expansion state
        sidebarDepth: 2.// Sidebar depth, set to 1 will read h2 headers, set to 2 will read both H2 and H3 headers
        children: [{title: 'react'.path:'/frame/react'},
          { title: 'vue'.path: '/frame/vue'}]}]}Copy the code

Start the project

npm run docs:dev
Copy the code