github仓库地址：https://github.com/18518300669/JackTeslaBlog
VuePress中文网：http://caibaojian.com/vuepress/guide/
介绍
VuePress 由两部分组成：一个以Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。
运行原理：VuePress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的单页面应用程序。类似的生成框架
React驱动GatsbyJs
Vue.js驱动Gridsome
特性
- 内置 markdown 扩展，针对技术文档进行了优化
- 能够利用内嵌在 markdown 文件中的 Vue 代码
- 以 Vue 驱动的自定义主题系统
- PWA 支持
- Google Analytics 集成
- 一个默认主题：
- 响应式布局
- 可选的主页
- 简单、开箱即用、基于标题的搜索功能
- 可定制的导航栏和侧边栏
- 自动生成的 GitHub 链接和页面编辑链接
开始
#初始化
// 在github上新建一个仓库，并克隆到本地
git clone https://github.com/18518300669/JackTeslaBlog.git
// 进入项目
cd JackTeslaBlog
//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#npm 脚本
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
}
}#运行本地开发环境
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: 世界再大，大不过你的好奇心呐～
---目录结构
.
├─ docs
│ ├─ README.md //主页
│ └─ .vuepress
│ │ └─ components //全局vue模版
│ │ └─ dist //构建产生目录
│ │ └─ public //存放静态文件
│ │ └─ config.js //配置
│ └─ React //一级目录
│ └─ Stack //一级目录
│ └─ ... //一级目录
└─ package.json配置
#基础配置
创建 docs/.vuepress/config.js， 并进行简单配置
var config = {
head: [
['link', { rel: 'icon', href: '/favicon.ico' }]
],
// 静态网站部署的目录
base: '/JackTesla/',
// 网站标题
title: 'JackTesla 的博客',
// <meta name="description" content="...">
description: '最精彩的，其实就是世界本身！',
markdown: {//markdown配置项
// 显示代码行号
lineNumbers: true
},
themeConfig: {
// 项目的 github 地址
repo: 'https://github.com/18518300669/JackTeslaBlog.git',
// github 地址的链接名
repoLabel: 'gitHub',
// 配置导航栏
nav,
sidebar
},
}
module.exports = config
var config = {
head: [
['link', { rel: 'icon', href: '/favicon.ico' }]
],
// 静态网站部署的目录
base: '/JackTesla/',
// 网站标题
title: 'Dr-博客',
// <meta name="description" content="...">
description: '最精彩的，其实就是世界本身！',
markdown: {//markdown配置项
// 显示代码行号
lineNumbers: true
},
themeConfig: {
// 项目的 github 地址
repo: 'https://github.com/18518300669/JackTeslaBlog.git',
// github 地址的链接名
repoLabel: 'gitHub',
// 配置导航栏
nav,
sidebar
},
}
module.exports = config
#头部导航栏配置
使用默认主题配置导航栏
//.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,
},
}
module.exports = config#侧边导航栏配置
//.vuepress/config.js：
const sidebar = {
'/Stack/': [
{
title: '博客',
children: [
'2019.1.2'
]
},
],
'/React/': [
{
title: 'React',
children: [
'router',
'reactRedux',
]
},
]
}
//在config的themeConfig中配置
const config = {
...
themeConfig: {
...
// 配置导航栏
sidebar,
},
}
module.exports = config#评论功能
我们使用 valine 来实现评论功能：
Valine
一款快速、简洁且高效的无后端评论系统。请先登录官网 Valine官网，注册后食用。获取APP ID 和 APP Key
#安装 Valine
//Install leancloud's js-sdk
npm install leancloud-storage --save
//Install valine
npm install valine --save#注册 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: '',// your appId
appKey: '', // your appKey
notify:false,
verify:false,
avatar:'mm',
placeholder: 'Please enter comments！' ,
path:window.location.pathname,//配置path地址，否则评论混乱
});
},
}
</script>
<style>
#vcomments{
margin-top:100px;
}
</style>#使用 Valine
在config.js配置
plugins: [
[
'@vuepress/register-components',
{
componentsDir: './components'
}
]
]只需要在 markdown 中调用即可
<Valine></Valine>
页面展示：
#部署
使用 gh-pages 进行项目部署
npm run deploy
过几分钟后，访问 https://18518300669.github.io/JackTeslaBlog/， 即看到在外网成功部署的静态博客
