preface

I believe that each front-end students want to build their own front-end blog, which records their own technology and some problems encountered in the work, next I will introduce a more useful blog building tools.

VuePress

VuePress is a static website generator based on Vue. It is simple in style and simple in configuration. If you want to know more about VuePress, check out the official documentation, which is very detailed

The local structures,

1. Create a directory and run the mkdir vuepress-start && CD vuepress-start command. 2. Use your favorite package manager for initialization. In this case, I use YARN YARN init 3. Install VuePress as locally dependent yarn add -d VuePress 4. Mkdir docs && echo '# Hello VuePress' > docs/ readme.md 5. Add some scripts {"scripts": {"docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs"}} 6. Start the server yarn docs:dev on the local PCCopy the code

VuePress will open a new window http://localhost:8081/ to launch a hot-loaded development server.

Basic configuration

Create a. Vuepress directory under the documents directory, where all vuepress-related files will be stored. The project structure is as follows:

Add config.js to the.vuepress folder to configure the title and description of the site for SEO, i.e. search engine:

Module. exports = {title: 'exports ', description:' progress every day ',}Copy the code

At this point, the effect picture is as follows:

Blog cover page template

The official template for the cover page is provided. Configure the following information in docs/readme.md

--- home: true heroImage: https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5f77180c31148bca9f8b930eca4861e~tplv-k3u1fbpfcp-watermark.image? ActionText: Get Started → actionLink: /node/ Nest/Nest features: - title: study every day details: Focus on front-end technology stack sharing, involving front-end, Node, Linux, database, etc., I hope we can become excellent full stack development engineers. Motto: Just do it, no delay. ---Copy the code

The effect is as follows:

Add navigation bar, sidebar

The navigation bar

Add a navigation bar in the upper right corner of the home page to modify config.js:

Module. exports = {title: 'exports ', description:' exports ', themeConfig: {// add nav: [{text: 'front page' link: '/'}, {text: 'front end, link:'/web - frame/'}, {text: 'Node, link:'/Node/nest nest '}, {text: 'interview questions, link:'/interview/'}, {text: 'Git' link: '/ Git/'}, {text:' Linux 'link:'/Linux/'}, {text: 'Mysql', link: '/ Mysql /'}, {text: 'Docker', link: '/ Docker /'}, {text: 'Github', items: [{text: 'Github', link: "Https://github.com/qiaochunmei"}, {text: 'the nuggets' link:' https://juejin.cn/user/43636195606333/posts'}]}]}}Copy the code

The renderings are as follows:

The sidebar

Add some directories as needed, and configure them in config.js:

module.exports = { themeConfig: { nav: [...] Sidebar: [{title: 'collapsable ', path: '/', collapsable: false, // Children: [{title: "must ", path: "/"}]}]}}Copy the code

Replace the topic

Vuepress-theme-rec: Vuepress-theme-rec: Vuepress-theme-rec: Vuepress-theme-rec:

# # installation yarn add vuepress - theme - reco in ` config. Reference the subject module in js `. Exports = {/ /... theme: 'reco' // ... }Copy the code

Refresh the page and you will see some details such as loading animation and support for switching to dark mode:

Add Article information

Add the following information to the MD of each article:

-- Title: NestJS author: Little Joe Date: '2022-01-05' --Copy the code

The effect is as follows:

Pay attention to

The time of the article in the above image, we write the format of 2022-01-05, but it shows 01/05/2022, this is because VuePress default lang is en-us, just modify config.js:

module.exports = {
  // ...
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  // ...
}  
Copy the code

Change the theme color

VuePress is based on Vue, so the theme color is Vue green. If you want to change it to another color, you can configure the following format:

# to create `. Vuepress/styles/palette. Styl ` files, content is as follows: $accentColor = blueCopy the code

You can then notice that the theme color has changed

The deployment of

By now the blog’s shelf was basically up and ready to fill with content, which we deployed to the free Github Pages. Create a new repository on Github. Here my repository is called vue-press

Accordingly, you need to add a base path configuration in config.js

Module. Exports = {/ / path called "/" REPO > / "base: '/ vue - press /, / /... }Copy the code

The final contents of config.js are as follows:

Module. exports = {title: 'exports ', description:' progress a little bit every day ', theme: 'reco', // change theme locales: {// set language '/': {lang: 'zh-cn'}}, // vuepress-theme-reco removes the multi-level title in the original sidebar to generate a subSidebar on the right side of the page. To enable themeConfig: {subsiddebar: 'auto'}, // path name is "/<REPO>/" base: '/vue-press/', themeConfig: {// Add navigation bar: add navigation bar in the upper right corner of the page: [{text: 'home ', link: '/'}, {text: 'front end, link:'/web - frame/'}, {text: 'Node, link:'/Node/nest nest '}, {text: 'interview questions, link: '/interview/' }, { text: 'Git', link: '/git/' }, { text: 'Linux', link: '/linux/' }, { text: 'Mysql', link: '/ mysql/'}, {text:' Docker, link: '/ Docker/'}, {text:' little the front end of the blog, the items: [{text: 'lot', link: "Https://github.com/qiaochunmei"}, {text: 'the nuggets', link: 'https://juejin.cn/user/43636195606333/posts'}}]], / / add the sidebar / / sidebar: [/ / {/ / title:' basics', / / the path: '/', / / collapsable: false, / / / / no folding children: [/ / {title: "required", path: "/"} / / / /}, / / {/ / title: "Node", // path: '/ Node /nest/nest', // collapsable: false, // Children: [// {title: "nest", path: "/node/nest/nest" }, // { title: "mysql", path: "/node/mysql/mysql" } // ], // } // ] } }Copy the code

Create a script file in the vuepress-start directory to deploy. Sh and change the user name and repository name to deploy.

#! /usr/bin/env sh set -e # generate static file NPM run docs:build # go to the generated folder CD docs/.vuepress/dist git init git add -a Git commit -m "deploy" # if published to the https:// < USERNAME >. Making the IO / < REPO > git push - f [email protected]: xiaoqiao112 / vue - the git master:master cd -Copy the code

Then switch to the project root directory and execute sh deploy.sh to start the build and commit to the remote repository:

You can see the last address in Settings -> Pages of the repository

I’m here to generate address is: xiaoqiao112. Making. IO/vue – press /

At this point, we have completed the deployment of VuePress+Github Page blog.