手把手带你搭建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源创计划”，欢迎正在阅读的你也加入，一块儿分享。