手把手帶你搭建VuePress的技術博客

先看效果圖:

•首頁javascript

•評論區域css

須要node環境和npm支持
html

若是不會安裝npm請轉到如何安裝 npm 並管理 npm 版本^[1]前端

vuepress^[2]

這個仍是蠻不錯的,尤大出品,必屬精品.vue

Vue 驅動的靜態網站生成器java

1.簡潔至上以 Markdown 爲中心的項目結構，以最少的配置幫助你專一於寫做。2.Vue驅動享受 Vue + webpack 的開發體驗，能夠在 Markdown 中使用 Vue 組件，又可使用 Vue 來開發自定義主題。3.高性能 VuePress 會爲每一個頁面預渲染生成靜態的 HTML，同時，每一個頁面被加載的時候，將做爲 SPA 運行。node

具體就不介紹了react

詳情請看官網vuepress^[3]webpack

既然是手把手,固然我得一步一步下來git

全局安裝

npm install -g vuepress

建立項目vuepess-app

mkdir vuepress-app

項目初始化

npm init -y

完了,會建立一個package.json

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

其中添加主README.md文件

touch README.md

在這個文件中主要寫一些這是什麼項目啊,這個項目有什麼特性啊,這個項目怎麼啓動啊等等

<h1 align="center">Welcome to vuepress-blog 👋</h1><p> <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" /> <a href="https://www.qiufeihong.top/"> <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" /> </a> <a href="https://twitter.com/qiufeihong"> <img alt="Twitter: qiufeihong" src="https://img.shields.io/twitter/follow/qiufeihong.svg?style=social" target="_blank" /> </a></p>
> a vuepress blog about qiufeihong......

添加docs文件夾

mkdir docs

這個文件夾中主要放些你的配置和所寫的博客內容

在docs文件夾中建立.vuepress文件夾

cd docsmkdir .vuepress

這個文件夾中你就能夠放配置^[4]了

新建總配置config.js文件

cd .vuepresstouch config.js

主要配置都寫在這裏，我將側邊欄和導航懶配置抽離出來，實現模塊化

module.exports = { title: '飛鴻的博客', description: '個人心路歷程', 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: '在 GitHub 上編輯此頁 ！' }}

新建導航欄nav.js

效果：

1.閉合

2.展開

touch nav.js

導航欄配置放在這個文件中

1.數組中的每一個對象指的是每一個導航標籤;2.text就是導航標籤名;3.link就是該文件的路徑，docs是該路徑的根目錄，因此要‘/’開頭。若是是外部連接，那就直接放進去便可。4.導航標籤下拉菜單，就要配置items，裏面也是一個數組對象，同上。

module.exports = [{ text: "首頁", link: "/" }, { text: "技術總結", link: "/technical-summary/" }, { text: "視頻總結", link: "/video-summary/" }, { text: "學習資源", items: [{ text: "前端學習視頻", link: "/front-end-video/" }, { text: "全棧", link: "/resource/" }, { text: "新聞", link: "/news/" }, { text: "開源項目", link: "/openItem/" }, { text: "分享", link: "/share/" }, { text: "網站", link: "/network/" }, { text: "設計", link: "/design/" } ] }, { text: "優秀博客", items: [{ text: "我的博客", items: [{ text: "張鑫旭-鑫空間-鑫生活", link: "https://www.zhangxinxu.com/" }, { text: "Cherry's Blog", link: "https://cherryblog.site/" }, { text: "ECMAScript 6 入門", link: "http://es6.ruanyifeng.com/" }, { text: "WebStack.cc - 設計師網址導航", link: "http://yangweijie.cn/webstack#" }, { text: 'D2 Admin', link: 'https://doc.d2admin.fairyever.com/zh/' }, { text: 'Javascript之父', link: 'https://brendaneich.com/' }, { text: 'yck面試圖譜', link: 'https://yuchengkai.cn/docs/' }, { text: '林亮', link: 'https://blog.fritx.me/' }, { text: '軟件垃圾回收師，Android搬磚小能手', link: 'http://lckiss.com/' }, { text: '小弟調調', link: 'https://wangchujiang.com/' }, { text: '騰訊 ISUX UI 工程師李洋', link: 'https://newbieweb.lione.me/' } ] }, ......];

當大家像我這樣配置時，目錄結構最好和我同樣

目錄結構以下：

建立側邊欄sidebar.js

效果：

側邊欄配置放在這裏,將其餘文件夾中的側邊欄配置引進來

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

上述的具體文件的目錄結構以下：

•technical-summary

•interview

•reprint

在docs文件夾下面建立一個README.md文件

•默認的主題提供了一個首頁，跟VuePress同樣的主頁

效果以下：

home: trueheroImage: /logo.jpgactionText: 快速上手 →actionLink: /zh/guide/features:- title: 簡潔至上 details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專一於寫做。- title: Vue驅動 details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可使用 Vue 來開發自定義主題。- title: 高性能 details: VuePress 爲每一個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將做爲 SPA 運行。footer: MIT Licensed | Copyright © 2018-present Evan You

•也能夠像我這樣配置：你能夠將首頁圖片換成gif格式的，騷一點

效果以下：

---home: trueheroImage: /logo-computed.gifactionText: 是時候展示真正的技術了 →actionLink: /resource/features:- title: 比爾·蓋茨經典語錄/名句 details: 只要有堅強的持久心，一個庸俗平凡的人也會有成功的一天，不然即便是一個才識卓越的人，也只能遭遇失敗的命運。
- title: 喬布斯經典語錄/名句 details: 你的時間有限，因此不要爲別人而活。不要被教條所限，不要活在別人的觀念裏。不要讓別人的意見左右本身心裏的聲音。最重要的是，勇敢的去追隨本身的心靈和直覺，只有本身的心靈和直覺才知道你本身的真實想法，其餘一切都是次要。
- title: 李嘉誠經典語錄/名句 details: 當你放下面子賺錢的時候，說明你已經懂事了。當你用錢賺回面子的時候，說明你已經成功了。當你用面子能夠賺錢的時候，說明你已是人物了。當你還停留在那裏喝酒、吹牛，啥也不懂還裝懂，只愛所謂的面子的時候，說明你這輩子也就這樣了。
footer: MIT Licensed | Copyright © 2019-present FeiHong---
### 12345```bash# clone itemgit clone git@github.com:qiufeihong2018/vuepress-app.git
# install dependenciesnpm install 
# serve with hot reload at localhost:6666npm run dev
# build for production with minificationnpm run build
# deploy to github pagenpm run d
# build&&pm2npm run server

請確保你的 Node.js 版本 >= 8。


### 如今就能夠在docs文件夾中寫博客內容了我就舉一個最簡單的例子1. 建立front-end-video文件,在文件夾中建立README.md,這裏面寫博客啦```markdownmkdir front-end-videocd front-end-videotouch README.md

### 前端學習技術博客

在package.json中添加啓動命令

1.啓動項目:npm run dev 這條命令就等於vuepress dev docs2.打包項目:npm run build 這條命令就等於vuepress build docs

{ "name": "vuepress-app", "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 appjs", "d": "bash deploy.sh" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@vuepress/plugin-back-to-top": "^1.0.0-alpha.0", "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" }}

你的項目就run起來

推送到遠程倉庫

1.在GitHub中新建倉庫2.在根目錄下添加.gitignore忽略一些文件3.推送上去

node_modulesdist.idea

git init
git add .
git commit -m "my first push vuepess app"
git push

掛載到GitHub Pages

1.在根目錄中建立腳本deploy.sh 這裏的'#'是註釋2.而後打開你的github倉庫,再建一個倉庫3.將下列第20行中個人倉庫名替換成你的倉庫名4.在package.json中添加命令npm run d,這條命令就是bash deploy.sh,這條命令的意思是啓動這個腳本5.你的vueress的博客就成功掛載GitHub Pages上了

###!/usr/bin/env sh

### 確保腳本拋出遇到的錯誤set -e

### 生成靜態文件npm run build

### 進入生成的文件夾cd dist

### 若是是發佈到自定義域名### echo 'www.yourwebsite.com' > CNAME

git initgit add -Agit commit -m 'deploy'

### 若是你想要部署到 https://USERNAME.github.iogit push -f git@github.com:qiufeihong2018/qiufeihong2018.github.io.git master

### 若是發佈到 https://USERNAME.github.io/<REPO> REPO=github上的項目### git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -

完了後，就能夠https://qiufeihong2018.github.io/訪問了

pm2守護程序

效果自行腦補，後臺一直運行

1.安裝pm2,將其寫進package.json中

npm install -save pm2

用到express,因此你得先安裝一下

npm install -save express

2.根文件中添加pm2腳本blog.js

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

‍

3. 添加啓動命令


npm run server:這條命令是npm run build && pm2 start app.js意思是打包而且啓動pm2
想要知道更多pm2操做，請移步[pm2](https://pm2.io/doc/en/runtime/overview/)

`添加valine評論和閱讀量統計`

效果以下：

1.安裝valine模塊

npm install -save valine

2.在.vuepress中建立components文件夾,在其中建立Valine組件

<template> <div class="page"> <section class="page-edit"> <div> <!-- id 將做爲查詢條件 --> <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:;"></a> 評 論： </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打包後變成的HTML不知爲何吞掉此處的綁定`: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>

3.修改其中的appId和appKey4.獲取APP ID 和 APP Key,請先登陸或註冊 LeanCloud^[1], 進入控制檯後點擊左下角建立應用5.在.vuepress中建立theme文件夾6.將node_modules中的Layout拷貝到theme文件夾中

7.將引用的文件路徑改爲指向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'

8.在Layout中添加valine

<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>

大功告成

目前暫不支持首頁去除,每一個頁面最底下都有

想要知道更多Valine操做，請移步Valine^[8]

添加gittalk評論和github的issues掛鉤

Gitalk 是一個基於 GitHub Issue 和 Preact 開發的評論插件。

•使用 GitHub 登陸•支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru]•支持我的或組織•無干擾模式（設置 distractionFreeMode 爲 true 開啓）•快捷鍵提交評論（cmd|ctrl + enter）

舊版: 修改2019.7.1

在.vuepress中新建enhanceApp.js

代碼以下

import getGitalk from "./common/getGittalk"
export default ({ Vue, // VuePress 正在使用的 Vue 構造函數 options, // 附加到根實例的一些選項 router, // 當前應用的路由實例 siteData // 站點元數據}) => { setTimeout(() => { try { document && (() => { getGitalk.call(this, siteData) copy() })() } catch (e) { console.error(e.message) } },500)}

要引入common中的getGittalk.js 代碼以下:

export default ({pages})=> { const path = window.location.pathname // 獲取當前頁面信息 const dist = pages.filter(item => { return item.path === path })[0]
 //只有在isNoPage是false的時候纔會顯示評論 if (!dist.frontmatter || !dist.frontmatter.isNoPage) { const page =document.querySelector('.page')
 const linkGitalk = document.createElement('link'); linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css'; linkGitalk.rel = 'stylesheet'; document.body.appendChild(linkGitalk);
 const scriptGitalk = document.createElement('script'); scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js'; document.body.appendChild(scriptGitalk);
 scriptGitalk.onload= () => { let gitalk = document.createElement('div') gitalk.id = 'gitalk-container' page.appendChild(gitalk) var _gitalk = new Gitalk({ clientID: '869b2dea1c53cc9b6ddd',// 填入你的clientID clientSecret: '0416acb02689088d4d2c55243a82db0582af4575',// 填入你的clientSecret repo: 'vuepress-blog', // 填入你的存儲評論的倉庫名字 owner: 'qiufeihong2018',//你的用戶名 admin: ['qiufeihong2018'], // 你的用戶名 id: decodeURI(path), // 每一個頁面根據url生成對應的issue，保證頁面之間的評論都是獨立的 }) _gitalk.render('gitalk-container') } } }

註冊一個新的OAuth應用程序

地址^[9]

•Application name: 你的項目名•Homepage URL:部署項目後的在線的網址•Application description:網站描述•Authorization callback URL:部署項目後的在線的網址

點擊註冊,後能夠看到

重定向網址

該redirect_uri參數是可選的。若是省略，GitHub會將用戶重定向到OAuth應用程序設置中配置的回調URL。若是提供，重定向URL的主機和端口必須與回調URL徹底匹配。重定向URL的路徑必須引用回調URL的子目錄。

可是當咱們添加好gittalk容器的時候會發現,好醜啊,容器都不和主內容對齊

好辦

經過f12拖拉dom,發現gitalk不該該在.page下,而是要在.page-nav容器裏最合適

改下代碼

.... const page =document.querySelector('.page-nav')....

新版: 修改2019.7.26

1.在components文件夾中增長Gittalk.vue

Gittalk.vue

<template> <div class="page"> <section class="page-edit"> <h3> <!-- id 將做爲查詢條件 --> <span :id="path" class="leancloud-visitors" data-flag-title="Your Article Title"> <a class="post-meta-item-text">閱讀量：</a> <a class="leancloud-visitors-count"></a> </span> </h3> <div id="gitalk-container"></div> </section> </div>
</template><script> import 'gitalk/dist/gitalk.css' import Gitalk from 'gitalk' import Valine from 'valine'
 export default { name: 'Gittalk', data() { return { path: window.location.pathname } }, mounted: function () { // require window if (typeof window !== 'undefined') { this.window = window window.AV = require('leancloud-storage') }
 this.initGittalk() this.initReadingVolume()
 }, watch: { $route(to, from) { if (from.path != to.path) { this.initGittalk() this.initReadingVolume() } } }, methods: { initReadingVolume() { document.getElementsByClassName('leancloud-visitors')[0].id = this.path this.valine = new Valine() this.valine.init({ el: '#vcomments', appId: '54maloyBQ5IhlzR4zhQQcWSN-gzGzoHsz', // your appId appKey: '8wNBKl9gNeGderoEfSxiP3Si', // your appKey notify: false, verify: false, path: this.path, visitor: true, avatar: 'mm', placeholder: 'write here' });
 }, initGittalk() {
 const gitalk = new Gitalk({ clientID: '869b2dea1c53cc9b6ddd', // 填入你的clientID clientSecret: '0416acb02689088d4d2c55243a82db0582af4575', // 填入你的clientSecret repo: 'vuepress-blog', // 填入你的存儲評論的倉庫名字 owner: 'qiufeihong2018', //你的用戶名 admin: ['qiufeihong2018'], // 你的用戶名 id: decodeURI(this.path), // 每一個頁面根據url生成對應的issue，保證頁面之間的評論都是獨立的 distractionFreeMode: false // Facebook-like distraction free mode }) gitalk.render('gitalk-container') } } }</script>

Valine會自動查找頁面中class值爲leancloud-visitors的元素，獲取其id爲查詢條件。並將獲得的值填充到其class的值爲leancloud-visitors-count的子元素裏：

 <!-- id 將做爲查詢條件 --> <span :id="path" class="leancloud-visitors" data-flag-title="Your Article Title"> <a class="post-meta-item-text">閱讀量：</a> <a class="leancloud-visitors-count"></a> </span>

 initReadingVolume() { document.getElementsByClassName('leancloud-visitors')[0].id = this.path this.valine = new Valine() this.valine.init({ el: '#vcomments', appId: '54maloyBQ5IhlzR4zhQQcWSN-gzGzoHsz', // your appId appKey: '8wNBKl9gNeGderoEfSxiP3Si', // your appKey notify: false, verify: false, path: this.path, visitor: true, avatar: 'mm', placeholder: 'write here' });
 },

 <div id="gitalk-container"></div>
 initGittalk() {
 const gitalk = new Gitalk({ clientID: '869b2dea1c53cc9b6ddd', // 填入你的clientID clientSecret: '0416acb02689088d4d2c55243a82db0582af4575', // 填入你的clientSecret repo: 'vuepress-blog', // 填入你的存儲評論的倉庫名字 owner: 'qiufeihong2018', //你的用戶名 admin: ['qiufeihong2018'], // 你的用戶名 id: decodeURI(this.path), // 每一個頁面根據url生成對應的issue，保證頁面之間的評論都是獨立的 distractionFreeMode: false // Facebook-like distraction free mode }) gitalk.render('gitalk-container') }

每次切換頁面後,觸發一下事件

 watch: { $route(to, from) { if (from.path != to.path) { this.initGittalk() this.initReadingVolume() } } },

1.在Layout.vue中引入該組件

import Gittalk from '../components/Gittalk'
...

components: { Home, Page, Sidebar, Navbar, SWUpdatePopup, Gittalk},
...
<Gittalk></Gittalk>

複製時添加版權信息

效果：

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。做者：qiufeihong原文：http://www.qiufeihong.top/來源:飛鴻的博客著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

在common.js中copyright.js，添加代碼

export default () => { function addCopy(e) { let copyTxt = "" e.preventDefault(); // 取消默認的複製事件 copyTxt = window.getSelection(0).toString() copyTxt = `${copyTxt}\n做者：qiufeihong\n原文：${window.location.href}\n來源:飛鴻的博客\n著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。` const clipboardData = e.clipboardData || window.clipboardData clipboardData.setData('text', copyTxt); } document.addEventListener("cut", e => { addCopy(e) }); document.addEventListener("copy", e => { addCopy(e) }); }

在enhanceApp.js中引入copyright的方法

import getGitalk from "./common/getGittalk"import copy from './common/copyright'
export default ({ Vue, // VuePress 正在使用的 Vue 構造函數 options, // 附加到根實例的一些選項 router, // 當前應用的路由實例 siteData // 站點元數據}) => { setTimeout(() => { try { document && (() => { getGitalk.call(this, siteData) copy() })() } catch (e) { console.error(e.message) } },500)}

導航欄分類小技巧

效果

如圖,優秀博客分爲我的博客和團隊博客兩大類,實驗證實,items是能夠一直items下去的,因此能夠分得很細

 { text: '優秀博客', items: [ { text: '我的博客', items: [ { text: '張鑫旭-鑫空間-鑫生活', link: 'https://www.zhangxinxu.com/' }, { text: 'Cherry\'s Blog', link: 'https://cherryblog.site/' }, { text: 'ECMAScript 6 入門', link: 'http://es6.ruanyifeng.com/' } ] }, { text: '團隊博客', items: [
 { text: '美團技術博客', link: 'https://tech.meituan.com/' }, { text: '百度前端fex', link: 'http://fex.baidu.com/' }, { text: '淘寶前端團隊FED', link: 'http://taobaofed.org/' }, { text: '騰訊CDC', link: 'https://cdc.tencent.com/' }, { text: '京東JDC', link: 'https://jdc.jd.com/' }, { text: '攜程設計委員會Ctrip Design Committee', link: 'http://ued.ctrip.com/' }, { text: '騰訊全端AlloyTeam', link: 'http://www.alloyteam.com/2018/12/13440/' } ] } ] },

添加elementUI組件

在vuepress-blog/docs/.vuepress/enhanceApp.js中添加

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';

拋出

 Vue.use(ElementUI)

就能夠在markdown文件中使用了

其他配置

Markdown 拓展^[10]

參考文獻

VuePress 手把手教你搭建一個類Vue文檔風格的技術文檔/博客^[11]

手把手教你使用 VuePress 搭建我的博客^[12]

vuepress和valine搭建帶評論的博客^[13]

一個基於 Github Issue 和 Preact 開發的評論插件^[14]

gitalk/gitalk^[15]

如何使用VuePress搭建一個類型element ui文檔^[16]

博客誕生記^[17]

Gittalk^[18]

References

[1] 如何安裝 npm 並管理 npm 版本: https://www.npmjs.cn/getting-started/installing-node/
[2] vuepress: https://vuepress.vuejs.org/zh/
[3] vuepress: https://vuepress.vuejs.org/zh/
[4] 配置: https://vuepress.vuejs.org/zh/config/
[5] www.yourwebsite.com': http://www.yourwebsite.com'
[6] git@github.com: mailto:git@github.com
[7] git@github.com: mailto:git@github.com
[8] Valine: https://valine.js.org/
[9] 地址: https://github.com/settings/applications/new
[10] Markdown 拓展: https://vuepress.vuejs.org/zh/guide/markdown.html#header-anchors
[11] VuePress 手把手教你搭建一個類Vue文檔風格的技術文檔/博客: https://segmentfault.com/a/1190000016333850
[12] 手把手教你使用 VuePress 搭建我的博客: https://www.cnblogs.com/softidea/p/10084946.html
[13] vuepress和valine搭建帶評論的博客: https://juejin.im/post/5c2e0b2f5188257c30462a21
[14] 一個基於 Github Issue 和 Preact 開發的評論插件: https://gitalk.github.io/
[15] gitalk/gitalk: https://github.com/gitalk/gitalk
[16] 如何使用VuePress搭建一個類型element ui文檔: https://www.jb51.net/article/156264.htm
[17] 博客誕生記: https://slbyml.github.io/saves/blog.html
[18] Gittalk: https://www.npmjs.com/package/gitalk

趕快來分享關注吖

本文分享自微信公衆號 - 全棧大佬的修煉之路（gh_7795af32a259）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。