introduce

VuePress is a static website generator that includes a VUE-driven theme system and plug-in API, as well as a default theme optimized for writing technical documentation. This article only covers the part of how to build a personal blog using VuePress.

The installation

VuePress requires Node.js >= 8.6

Install vuepress

After all, VuePress is easy to install and can be directly installed using the following command:

yarn add -D vuepress # npm install -D vuepress
Copy the code

Verify the installation

To verify the effectiveness of VuePress, first create a document

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

Create a package.json file in the current directory and add the following:

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

Start the server locally

vuepress dev .
Copy the code

VuePress launches a hot-loaded development server at http://localhost:8080.

If no error is reported, you can open http://localhost:8080 in the browser. By default, the content in readme. md is loaded.

VuePress directory structure

VuePress follows the principle of convention over configuration. The recommended directory structure is as follows:

. ├ ─ ─ blog │ ├ ─ ─ the vuepress (optional) │ │ ├ ─ ─ components (optional) │ │ ├ ─ ─ the theme (optional) │ │ │ └ ─ ─ Layout. The vue │ │ ├ ─ ─ public (optional) │ │ ├ ─ ─ styles (optional) │ │ │ ├ ─ ─ but styl │ │ │ └ ─ ─ the palette. Styl │ │ ├ ─ ─ templates (optional, Careful configuration) │ │ │ ├ ─ ─ dev. HTML │ │ │ └ ─ ─ SSR. HTML │ │ ├ ─ ─ the config, js (optional) │ │ └ ─ ─ enhanceApp. Js (optional) │ │ │ ├ ─ ─ the README. │ md └ ─ ─ _post │ ├ ─ ─ the about the md │ └ ─ ─ the README. Md │ └ ─ ─ package. The jsonCopy the code

The blog directory is called targetDir, and the files in the directory are relative to the blog directory. The routing addresses of files in this directory are as follows:

File relative path Page routing address
/README.md /
/_post/README.md /_post/
/_post/about.md /_post/about.html

The basic configuration

Now that VuePress is up and running, add some basic configuration. First create the.vuepress directory (where all vuepress-related files are stored) under the current directory. Then create the config.js file in the.vuepress directory (you can also use a configuration file in YAML (.vuepress/config.yml) or TOML (.vuepress/config.toml) format).

Add the following configuration to config.js:

module.exports = {
  title: 'Gosby'.// The title of the site, which will be used as a prefix for all page titles.
  description: 'Gosby's Blog'.// A description of the site, which will be rendered to the HTML of the current page with a 
       tag.
}
Copy the code

Other detailed configuration official documents: vuepress.vuejs.org/zh/config/

The theme

Because you are using VuePress as a static blog, you need to replace the default theme. Use the official theme here: @vuepress/theme-blog.

The installation

yarn add @vuepress/theme-blog -D
# OR npm install @vuepress/theme-blog -D
Copy the code

Using & configuration

Add topic-specific configuration to config.js:

 // .vuepress/config.js
module.exports = {
  title: 'Gosby'.description: 'Gosby's blog gusibi Goodspeed'.theme: '@vuepress/blog'.themeConfig: {
     nav: [     // Navigation bar configuration
            { text: 'home'.link: '/' },
            { text: 'tags'.link: '/tag/'},
            { text: 'about'.link: '/about/' },
            { text: 'github '.link: 'https://github.com/gusibi/'.target:'_blank'},]./** * Ref: https://vuepress-theme-blog.ulivz.com/config/#globalpagination */
        globalPagination: {
          lengthPerPage: 10,},/** * Ref: https://vuepress-theme-blog.ulivz.com/config/#sitemap */
        sitemap: {
            hostname: 'http://blog.gusibi.mobi/'}}},Copy the code

directory

By default, everything must be placed in the _posts directory with a file title of.md, such as about.md.

└ ─ ─ _posts ├ ─ ─... └ ─ ─ the about the mdCopy the code

Blog Content Settings

Front Matter is the variable used to specify the blog file and must be placed at the top of the blog file. Valid YAML, written between three dots, must also be used. Here’s a basic example:

---
title: Blogging Like a Hacker # Blog title
date: 2020- 06- 14              # Blog release date
tags:                         # post tag
    - The front end
  - dart
  - flutter
  - vue
summary: Here is an abstract of the article
---
Copy the code

Other variables: vuepress.vuejs.org/zh/guide/fr…

URL

By default, the path path is the relative path of a file directory, for example:

├ ─ ─ package. Json └ ─ ─ source ├ ─ ─ _post │ └ ─ ─ intro - vuepress. Md ├ ─ ─ index. The md └ ─ ─ tags. The mdCopy the code

Then you get the following pages available:

/source/
/source/tags.html
/source/_post/intro-vuepress.html
Copy the code

It is recommended that permalink be used to specify permalink for articles. You can use global configuration to apply permalink to all pages:

// .vuepress/config.js
module.exports = {
  permalink: "/:year/:month/:day/:slug"
};
Copy the code

Alternatively, you can set up permalink only for a single page. This approach has a higher priority than global configuration.

📝 hello. Md:

---
title: Hello World
permalink: /hello-world
---
Hello!
Copy the code
content

Blog content format is markdown, markdown syntax reference: www.markdownguide.org/

The plug-in

search

VuePress built-in search, you can set themeConfig. Search: false to disable the default search box, or by themeConfig. SearchMaxSuggestions to adjust the default search box shows the number of search results:

module.exports = {
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10
  }
}
Copy the code

You can disable the built-in search box for individual pages by setting search in frontMatter on the page:

---
search: false
---
Copy the code

⚠ ️ prompt

Built-in search only builds search indexes for page titles, **** H2, H3, and tags. If you need a full text search, you can use Algolia search.

google-analytics

Google Analytics is a data collection service provided by Google for web sites. Can carry on the statistics and analysis to the target website access data, and provide a variety of parameters for the website owner to use. Recommended installation:

The installation

Use the following command to install

yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics
Copy the code
use

Add ga configuration to the configuration file

module.exports = {
  plugins: [['@vuepress/google-analytics',
      {
        'ga': ' ' // UA-00000000-0}}]]Copy the code

More configuration reference documentation: vuepress.vuejs.org/zh/theme/de…

RSS

Vuepress includes an RSS plug-in that can be directly enabled by adding the following to the configuration:

module.exports = {
    ...
    themeConfig: {
      ...
      feed: {
         canonical_base: 'http://blog.gusibi.mobi/',}}};Copy the code

Deployment to making

  1. Set the correct base in docs/.vuepress/config.js.

If you’re going to post to https://.github.io/, you can skip this step because base defaults to “/”.

  1. In your project, create one of the followingdeploy.shFile:
#! /usr/bin/env sh
Make sure the script throws any errors it encounters
set -e

Generate static files
vuepress build --dest ./public

Go to the generated folder
cd public

# if publish to custom domain name
# echo 'blog.gusibi.mobi' > CNAME

git add -A
git commit -m 'deploy'

# post to https://
      
       .github
      
git push -f [email protected]:gusibi/gusibi.github.io.git master

Github. IO /
      
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

cd -
Copy the code

Github CI is also used to automatically deploy to Github. IO every time the code is submitted

Refer to the link

  1. Intro to VuePress 1.x: ulivz.com/2019/06/09/…
  2. The default theme configuration: vuepress.vuejs.org/zh/theme/de…
  3. www.markdownguide.org/
  4. VuePress front matter configuration: vuepress.vuejs.org/zh/guide/fr…
  5. VuePress configuration: vuepress.vuejs.org/zh/config/

Finally, thanks to the girlfriend support and tolerance, than ❤️

Around the male can also enter the keywords for historical article: male number & small program | | concurrent design mode & coroutines

Push the time