Build a blog with vuepress

Time:2020-3-6

Build a personal blog

GitHub blog address: https://xiaoping027.github.io

Preparation

Initialization

Yarn init or NPM init

Follow the prompts step by step

Install vuepress

yarn add -D vuepress 
perhaps
npm install -D vuepress

package.json

{
    "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
    }
}

NamelydevandbuildPattern

New folder

mkdir docs

├── docs/
├── package.json
└── yarn.lock

cd docs

mkdir .vuepress

├── docs
│   └── .vuepress
├── package.json
└── yarn.lock

stay.vueressNew under folderconfig.js

// .vuepress/config.js
module.exports = {
  Title: "front end learning record",
  Description: "front end advanced, front end learning",
  head: [["link", { rel: "icon", href: "/logo.png" }]],
  lang: "zh-CN",
  themeConfig: {
    nav: [
      {text: "home page", link: "/"},
      { text: "React | Vue", link: "/react/" }
    ],
    sidebar: "auto",
    sidebarDepth: 4,
    activeHeaderLinks: true,
    lastUpdated: "Last Updated"
  }
};

Newly buildreactFolder
Newly buildmdfile

Default directionREADME.md

├── docs
│   ├── .vuepress
│   │   └── config.js
│   ├── README.md
│   └── react
│       └── README.md
├── package.json
└── yarn.lock
yarn docs:dev 
Or
npm run docs:dev

Build a blog with vuepress

To configure

https://vuepress.vuejs.org/zh…
https://vuepress.vuejs.org/zh…

For specific configuration, you can view the official documents

Default theme

---
home: true
heroImage: /hero.png
Herotext: Hero title
Tagline: Hero subtitle
Actiontext: get started quickly →
actionLink: /zh/guide/
features:
-Title: simplicity first
  Details: a markdown centric project structure with minimal configuration helps you focus on writing.
-Title: Vue driver
  Details: enjoy the development experience of Vue + webpack, use Vue components in markdown, and use Vue to develop custom themes.
-Title: high performance
  Details: vuepress generates static HTML for pre rendering of each page, and will run as spa when the page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You
---

Navigation bar settings

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

perhaps

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        ariaLabel: 'Language Menu',
        items: [
          { text: 'Chinese', link: '/language/chinese/' },
          { text: 'Japanese', link: '/language/japanese/' }
        ]
      }
    ]
  }
}

Nesting

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        items: [
          { text: 'Group1', items: [/*  */] },
          { text: 'Group2', items: [/*  */] }
        ]
      }
    ]
  }
}

Sidebar settings

// .vuepress/config.js

module.exports = {
  themeConfig: {
    sidebar: [
      {
        Title: 'group 1', // necessary
        Path: '/ foo /', // optional, it should be an absolute path
        Collapsable: false, // optional. The default value is true,
        Sidebardepth: 1, // optional, default value is 1
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}

Project deployment

#!/usr/bin/env sh

#Ensure script throws errors encountered
set -e

#Generate static file
yarn build

#Enter the generated folder
cd docs/.vuepress/dist

#If you are publishing to a custom domain name
# echo 'www.maybee.wang' > CNAME

git init
git add -A
git commit -m 'deploy'
ls -l

#If you publish to HTTPS: // < username >. GitHub. IO
git push -f https://github.com/xiaoping027/xiaoping027.github.io.git master

#If you publish to HTTPS: // < username >. GitHub. IO/<REPO>
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages