First look at the renderings:

  • Home page

  • The comment area

Node environment and NPM support is required

If you cannot install NPM go to How do I install NPM and manage the VERSION of NPM

vuepress

This is quite good, especially big production, must be a boutique.

What is Vuepress?

  • Vue – driven static web site generator

  • Simple is the highest

Markdown-centric project structure helps you focus on writing with minimal configuration.

  • Vue drive

Enjoy the development experience of Vue + Webpack, using Vue components in Markdown and developing custom themes using Vue.

  • A high performance

VuePress pre-renders static HTML for each page and runs it as a SPA when each page is loaded.

I won’t go into the details

See vuepress for more details

Since it’s hand in hand, of course I have to step down

Global installation

npm install -g vuepress
Copy the code

Create the project vuepess-blog

mkdir vuepress-blog
Copy the code

Project initialization

npm init -y
Copy the code

This will create a package.json

{
  "name": "vuepess-blog"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"
}
Copy the code

Add the master readme.md file

touch README.md
Copy the code

What is the project, what are the features of the project, how to start the project and so on

# vuepress-blog
> a vuepress blog about qiufeihong

### Build Setup


# clone item
git clone [email protected]:qiufeihong2018/vuepress-blog.git

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# deploy https://username.github.io
npm run d

# pm2 deploy
npm run server 


### main page! [avatar] (./shotPic/main.png)

### feature
-[x] can count the amount of reading-[x] Support comments-[] Algolia search-[] Edit this page on GitHub- [ ] SEO


Copy the code

Add docs folder

mkdir docs
Copy the code

This folder contains your configuration and blog content

Create a. Vuepress folder in the docs folder

cd docs
mkdir .vuepress
Copy the code

This is where you can put the configuration

Create the general configuration config.js file

cd .vuepress
touch config.js
Copy the code

The main configuration is written here, and I’ve isolated the sidebar and navigation lazy configuration to make it modular

module.exports = {
    title: 'Fei Hong's Blog'.description: 'The Journey of my Mind'.dest: './dist'.port: '7777'.head: [['link', {rel: 'icon'.href: '/logo.gif'}]],markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: require('./nav'),
        sidebar: require('./sidebar'),
        sidebarDepth: 2.lastUpdated: 'Last Updated'.searchMaxSuggestoins: 10.serviceWorker: {
            updatePopup: {
                message: "New content is available.".buttonText: 'Refresh'}},editLinks: true.editLinkText: 'Edit this page on GitHub! '}}Copy the code

Create a navigation bar nav.js

Effect:

  1. closed

2. An

touch nav.js
Copy the code

The navigation bar configuration is placed in this file

  1. Each object in the array refers to each navigation tag;
  2. Text is the name of the navigation TAB;
  3. Link is the path to the file, docs is the root of the path, so start with a ‘/’. If it’s an external link, just put it in.
  4. In the navigation TAB drop-down menu, you configure items, which is also an array object, as above.
module.exports = [
    {
        text: 'home'.link: '/'
    },
    {
        text: 'Learning Resources'.items: [{text: 'Front End Learning route'.link: 'http://www.imooc.com/article/261756'},
            {text: 'Front-end Learning Video'.link: '/front-end-video/'},
            {text: 'the whole stack.link: '/resource/'}]}, {text: 'Excellent article reprint'.link: '/reprint/'
    },
    {
        text: 'Technical Summary'.items: [{text: 'mongo'.link: '/technical-summary/mongo/'
            },
            {
                text: 'vue-webpack'.link: '/technical-summary/vue-webpack/'
            },
            {
                text: 'Vue.js Component Introduction '.link: '/technical-summary/vue-component/'
            },
            {
                text: 'ubuntu'.link: '/technical-summary/ubuntu/'
            },
            {
                text: 'eslint'.link: '/technical-summary/eslint/'
            },
            {
                text: 'nuxt'.link: '/technical-summary/nuxt/'
            },
            {
                text: 'node'.link: '/technical-summary/node/'
            },
            {
                text: 'css'.link: '/technical-summary/css/'
            },
            {
                text: 'github'.link: '/technical-summary/github/'
            },
            {
                text: 'es6'.link: '/technical-summary/es6/'}]}, {text: 'Video summary'.link: '/video-summary/'
    },
    {
        text: 'interview'.link: '/interview/'
    },
    {
        text: 'Good Blog'.items: [{text: 'Zhang Xinxu - Xin Space - Xin Life'.link: 'https://www.zhangxinxu.com/'}]}, {text: 'Personal Homepage'.items: [{text: 'GitHub'.link: 'https://github.com/qiufeihong2018'
            },
            {
                text: 'the nuggets'.link: 'https://juejin.im/user/1099167358268392/posts'
            },
            {
                text: 'CSDN'.link: 'https://blog.csdn.net/weixin_38465623'
            },
            {
                text: 'segmentfault'.link: 'https://segmentfault.com/u/qiufeihong2018'
            },
            {
                text: 'zhihu'.link: 'https://www.zhihu.com/people/chou-fei-hong/activities'
            },
            {
                text: 'Jane books'.link: 'https://www.jianshu.com/'
            },
            {
                text: 'v2ex'.link: 'https://www.v2ex.com/'}]}, {text: 'Movies of those years'.link: '/movie/'}]Copy the code

When you configure as I did, you better have the same directory structure as I did

The directory structure is as follows:

Create the sidebar sidebar.js

Effect:

Place the sidebar configuration here, bringing in the sidebar configuration from other folders

module.exports = {
    '/technical-summary/github/': require('.. /technical-summary/github/sidebar'),
    '/technical-summary/vue-component/': require('.. /technical-summary/vue-component/sidebar'),
    '/interview/': require('.. /interview/sidebar'),
    '/reprint/':require('.. /reprint/sidebar')}Copy the code

The directory structure of the above specific files is as follows:

  • technical-summary

  • interview

  • reprint

Create a readme.md file under the docs folder

  • The default theme provides a home page, the same as VuePress

The effect is as follows:

Home: true heroImage: /logo.jpg actionText: Get started → actionLink: /zh/ Guide/Features:-Markdown-centric project structure that helps you focus on writing with minimal configuration.-Enjoy the development experience of Vue + Webpack, use Vue components in Markdown, and develop custom themes using Vue.-VuePress pre-renders static HTML for each page and runs as a SPA when the page is loaded. Footer: MIT Licensed | Copyright © 2018 - present Evan YouCopy the code
  • You can also configure it like I did: you can change the home page image to GIF format, slutty bit

The effect is as follows:

-- Home: true heroImage: /logo-computed. GIF actionText: Time to show real technology → actionLink: / Resource/Features:-As long as there is a strong lasting heart, a vulgar ordinary people will have a successful day, otherwise even if it is a talented person, can only encounter the fate of failure.-Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma, which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They already know what you truly want to become. Everything else is secondary.-When you put down face to make money, that you have sensible. When you earn face with money, it means you have succeeded. When you can make money with face, that you are already someone. When you still stay there drinking, bragging, what also don't know also pretend to understand, only love the so-called face of the time, that you this life is so.Footer: MIT Licensed | Copyright © 2019 - present FeiHong -

# # # 12345
```bash # clone item git clone [email protected]:qiufeihong2018/vuepress-blog.git # install dependencies npm install # serve with hot reload at localhost:6666 npm run dev # build for production with minification npm run build # deploy to Github Page NPM run d # build&&pm2 NPM run server ::: Warning Make sure your Node.js version >= 8. : : :Copy the code

You can now write your blog content in the Docs folder

Let me give you the simplest example

  1. Create a front-end-video file and create readme. md in the folder to write the blog
mkdir front-end-video
cd front-end-video
touch README.md
Copy the code
### Front-end learningTechnology blogCopy the code

Add startup commands in package.json

  1. Start project: NPM run dev

Package the project: NPM run build This command is equal to vuepress build docs

{
  "name": "vuepress-blog"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "vuepress dev docs"."build": "vuepress build docs"."server": "npm run build && pm2 start blog.js"."d": "bash deploy.sh"
  },
  "keywords": []."author": ""."license": "ISC"."dependencies": {
    "@vuepress/plugin-back-to-top": "^ 1.0.0 - alpha."."element-ui": "^ 2.5.4." "."express": "^ 4.16.4"."leancloud-storage": "^ 3.12.0"."pm2": "^ 3.2.9"."valine": "^" 1.3.4."vuepress": "^ 0.14.9"}}Copy the code

Your project runs

Push to remote repository

  1. Create a new repository on GitHub
  2. Add.gitignore to the root directory to ignore some files
  3. Push up
node_modules
dist
.idea
Copy the code
git init

git add .

git commit -m "my first push vuepess blog"

git push

Copy the code

Mount to GitHub Pages

  1. Create the script deploy.sh in the root directory

The ‘#’ here is a comment

  1. Then open your Github repository and build another one
  2. Replace my warehouse name with your warehouse name in line 20 below
  3. Add the command NPM run d to package.json, which is bash deploy.sh, which means to start the script
  4. Your Vueress blog is successfully mounted on GitHub Pages
# # #! /usr/bin/env sh

Make sure the script throws any errors it encounters
set -e

Generate static files
npm run build

Go to the generated folder
cd dist

### if it is published to a custom domain name
### echo 'www.yourwebsite.com' > CNAME

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

# # # if you want to deploy to https://USERNAME.github.io
git push -f [email protected]:qiufeihong2018/qiufeihong2018.github.io.git master

# # # if posted to https://USERNAME.github.io/<REPO>REPO= project on Github
### git push -f [email protected]:USERNAME/<REPO>.git master:gh-pages

cd -
Copy the code

After finished, can qiufeihong2018. Making. IO/access

Pm2 daemon

Effect to imagine, the background has been running

  1. Install pM2 and write it to package.json
npm install -save pm2
Copy the code

Express is used, so you’ll need to install it first

npm install -save express

  1. Add the PM2 script blog.js to the root file
const fs = require('fs');
const path = require('path');
const express = require('express');
const chalk = require('chalk')
const blog = express();
blog.use(express.static(path.resolve(__dirname, './dist')))

blog.get(The '*'.function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})
blog.listen(7777.res= > {
    console.log(chalk.yellow('Start Service On 7777'));
});

Copy the code
  1. Adding a Startup Command

NPM run server: This command is NPM run build && pm2 start blog.js, which means package and start PM2

To learn more about PM2 operations, go to PM2

Add Valine reviews and read statistics

The effect is as follows:

  1. Install the Valine module
npm install -save valine
Copy the code
  1. Create the Components folder in.vuepress and create the Valine component there
<template> <div class="page"> <section class="page-edit"> <div> <! <span class="leancloud-visitors" data-flag-title="Your Article title "> <em Class ="post-meta-item-text">  </em> <i class="leancloud-visitors-count"></i> </span> </div> <h3> <a href="javascript:;" </h3> <div id="vcomments"></div> </section> </div> </template> <script> export default {name: 'Valine', mounted: function () { // require window const Valine = require('valine'); if (typeof window ! == 'undefined') { this.window = window window.AV = require('leancloud-storage') } this.valine = new Valine() this.initValine() }, watch: { $route (to, from) { if (from.path ! = to.path) { this.initValine() } } }, methods: {initValine () {let path = location.origin + location.pathname // vuepress package into HTML I don't know why the binding ':id="countId"' document.getElementsByClassName('leancloud-visitors')[0].id = path this.valine.init({ el: '#vcomments', appId: '********',// your appId appKey: '********', // your appKey notify: false, verify: false, path: path, visitor: true, avatar: 'mm', placeholder: 'write here' }); } } } </script>Copy the code
  1. Modify the appId and appKey
  2. To obtain the APP ID and APP Key, log in or register LeanCloud, enter the console, and click the lower left corner to create an APP
  3. Create the theme folder in. Vuepress
  4. Copy Layout from node_modules into the theme folder

  1. Change the referenced file path to point to node_modules
    import Vue from 'vue'
    import nprogress from 'nprogress'
    import Home from '.. /.. /.. /node_modules/vuepress/lib/default-theme/Home.vue'
    import Navbar from '.. /.. /.. /node_modules/vuepress/lib/default-theme/Navbar.vue'
    import Page from '.. /.. /.. /node_modules/vuepress/lib/default-theme/Page.vue'
    import Sidebar from '.. /.. /.. /node_modules/vuepress/lib/default-theme/Sidebar.vue'
    import SWUpdatePopup from '.. /.. /.. /node_modules/vuepress/lib/default-theme/SWUpdatePopup.vue'
    import {resolveSidebarItems} from '.. /.. /.. /node_modules/vuepress/lib/default-theme/util'
    import Valine from '.. /components/Valine'
Copy the code
  1. Add valine to Layout
<template> <div class="theme-container" :class="pageClasses" @touchstart="onTouchStart" @touchend="onTouchEnd" > <Navbar  v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" /> <div class="sidebar-mask" @click="toggleSidebar(false)" ></div> <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar" > <slot name="sidebar-top" slot="top" /> <slot name="sidebar-bottom" slot="bottom" /> </Sidebar> <div class="custom-layout" v-if="$page.frontmatter.layout" > <component :is="$page.frontmatter.layout"/> </div> <Home v-else-if="$page.frontmatter.home"/> <Page v-else :sidebar-items="sidebarItems" > <slot name="page-top" slot="top" /> <slot name="page-bottom" slot="bottom" /> </Page> <Valine></Valine> <SWUpdatePopup :updateEvent="swUpdateEvent"/> </div> </template>Copy the code
  1. You’re done

At present, it does not support the removal of the home page, the bottom of each page

To learn more about Valine operations, go to Valine

Navigation bar classification tips

rendering

As shown in the figure, excellent blogs are divided into individual blogs and team blogs. The experiment proves that items can be kept as items, so they can be divided very carefully

{the text: 'excellent blog', the items: [{text: 'personal blog, the items: [{text:' Zhang Xinxu - - xin xin space life, link: 'https://www.zhangxinxu.com/'}, {text: 'Cherry\' Blog', link: 'https://cherryblog.site/'}, {text: 'ECMAScript 6 getting started ', link: 'http://es6.ruanyifeng.com/'}}, {text: 'team blog, items: [{text:' Meituan technology blog, the link: "Https://tech.meituan.com/"}, {text: 'baidu front-end fex, link:' http://fex.baidu.com/ '}, {text: 'taobao front-end team FED, link: "Http://taobaofed.org/"}, {text: 'tencent CDC, link:' https://cdc.tencent.com/ '}, {text: 'jingdong JDC, link: 'https://jdc.jd.com/'}, {text: 'Ctrip Design Committee', link: 'http://ued.ctrip.com/'}, {text: Tencent AlloyTeam all end, link: 'http://www.alloyteam.com/2018/12/13440/'}}}]],Copy the code

The rest of the configuration

Markdown expand

reference

VuePress teaches you how to build a technical document/blog in the style of a Vue document

Here’s a step-by-step guide to building your own blog using VuePress

Vuepress and Valine create commentary blogs

This article was first published on the public account “Front-end Keep”. Welcome to follow it.

Finally, I hope you must point to like three times.

Follow my blog: blog address