使用基于Vue.js驱动的.vuepress搭建静态博客
[博客demo地址](https://18518300669.github.io/sutaiyiBlog
介绍
.vuepress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 .vuepress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。
.vuepress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的单页面应用程序。
类似的生成框架
React驱动GatsbyJs
Vue.js驱动Gridsome
开始
初始化
// 在github上新建一个仓库，并克隆到本地
git clone https://github.com/18518300669/sutaiyiBlogit
// 进入项目
cd sutaiyiBlog
//npm 初始化, 按照提示回车
npm init
//安装 .vuepress
npm i .vuepress -D
//安装 gh-pages
npm i gh-pages -D
//创建一个 docs 目录
mkdir docs
//创建一个 markdown 文件
echo '# Hello .vuepress' > docs/README.md
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
npm 脚本
{
"scripts": {
"dev": ".vuepress dev docs",
"build": ".vuepress build docs",
"deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
}
}
2
3
4
5
6
7
运行本地开发环境
npm run dev
访问 localhost:8080 ， 已经成功开启
生成静态资源
执行下面的命令，生成静态资源.
npm run build
默认情况下，构建的文件会位于 docs/.vuepress/dist 中，该文件可以通过 docs/.vuepress/config.js 中的 dest 字段进行配置。
公共文件
创建 docs/.vuepress/public 用于存放公共文件
我放了一个首页的umbrella.jpeg
首页编写
docs/README.md为首页， 修改代码为：
---
home: true
heroImage: /umbrella.jpeg
footer: 世界再大，大不过你的好奇心呐～
---
2
3
4
5
目录结构
.
├─ docs
│ ├─ README.md //主页
│ └─ .vuepress
│ │ └─ components //全局vue模版
│ │ └─ dist //构建产生目录
│ │ └─ public //存放静态文件
│ │ └─ config.js //配置
│ └─ React //一级目录
│ └─ Stack //一级目录
│ └─ ... //一级目录
└─ package.json
2
3
4
5
6
7
8
9
10
11
12
配置
基础配置
创建 docs/.vuepress/config.js， 并进行简单配置
var config = {
head: [
['link', { rel: 'icon', href: '/favicon.ico' }]
],
// 静态网站部署的目录
base: '/Sutaiyi/',
// 网站标题
title: '毅言堂',
// <meta name="description" content="...">
description: '最精彩的，其实就是世界本身！',
markdown: {//markdown配置项
// 显示代码行号
lineNumbers: true
},
themeConfig: {
// 项目的 github 地址
repo: 'https://github.com/18518300669/sutaiyiBlogit',
// github 地址的链接名
repoLabel: 'gitHub',
// 配置导航栏
nav,
sidebar
},
}
module.exports = config
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
头部导航栏配置
使用默认主题配置导航栏
//.vuepress/config.js：
const nav = [
{
text: '技术篇',
items: [
{ text: 'Blog', link: '/Stack/2019.1.2'},
{ text: 'React', link: '/React/router' },
]
},
{
text: '关于作者',
link: '/Readme/index'
},
]
//在config的themeConfig中配置
const config = {
...
themeConfig: {
...
// 配置导航栏
nav,
},
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
侧边导航栏配置
//.vuepress/config.js：
const sidebar = {
'/Stack/': [
{
title: '博客',
children: [
'2019.1.2'
]
},
],
'/React/': [
{
title: 'React',
children: [
'router',
'reactRedux',
]
},
]
}
//在config的themeConfig中配置
const config = {
...
themeConfig: {
...
// 配置导航栏
sidebar,
},
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
评论功能
我们使用 valine 来实现评论功能：
Valine
一款快速、简洁且高效的无后端评论系统。
请先登录官网 Valine官网，注册后食用。获取APP ID 和 APP Key
安装 Valine
//Install leancloud's js-sdk
npm install leancloud-storage --save
//Install valine
npm install valine --save
2
3
4
5
注册 .vuepress 全局组件
创建 .vuepress/components/Valine.vue
(在components下注册的vue可供全局使用，文件名为组件名）
<template>
<div>
<div id="vcomments"></div>
</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')
}
new Valine({
el: '#vcomments' ,
appId: '6tqPUDuBQeWQbHkF1eBXK1hp-gzGzoHsz',// your appId
appKey: 'zBID8Xfmnaq2XUvm79xgkDy2', // your appKey
notify:false,
verify:false,
avatar:'mm',
placeholder: 'Please enter comments！' ,
path:window.location.pathname,//配置path地址，否则评论混乱
});
},
}
</script>
<style>
#vcomments{
margin-top:100px;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
使用 Valine
只需要在 markdown 中调用即可
<Valine></Valine>
部署
使用 gh-pages 进行项目部署
npm run deploy
过几分钟后，访问 [https://18518300669.github.io/sutaiyiBlog(https://18518300669.github.io/SusutaiyiBlog便可以看到在外网成功部署的静态博客