Vue 驱动的静态网站生成器。官方文档立即前往
使用vuepress之前请确保你本地的node环境
vuepress是尤雨溪18年4月12日发布的vue静态网站生成器，支持vue语法，内置webpack，每一个由vuepress生成的页面都是通过SSR预渲染的HTML，也因此具有非常好的加载性能和搜索引擎优化，vuepress非常适合用来做项目文档，现在越来越多的人用来写博客，这次文章就是一个简单的使用教程和主题推荐
vuepress不限于使用markdown、vue组件、html
本文源码立即前往
# reco主题
一款简洁而优雅的 vuepress 博客 & 文档 主题。官方文档立即前往
我们打乱一下顺序，先介绍这个主题，reco主题提供了脚手架可以实现一键创建vuepress项目，并且这个主题是为博客量身打造，节省掉我们配置项目的时间，用来专心书写内容
# 快速开始
npx
npx @vuepress-reco/theme-cli init my-blog
npm
# 初始化
npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog
# 安装
cd my-blog
npm install
# 运行
npm run dev
# 编译
npm run build
2
3
4
5
6
7
8
9
10
11
12
13
yarn
# 初始化
yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog
# 安装
cd my-blog
yarn install
2
3
4
5
6
7
# 实践一下
npx @vuepress-reco/theme-cli init recodemo
然后进入recodemo文件夹使用 npm i命令下载一下依赖
然后打开 recodemo\docs\.vuepress\config.js,配置一些自定义信息，具体的可配置信息立即前往
我们在views目录下新建一个 first.md 文件，这个前面的内容相当于是文章的信息描述，具体的可描述信息立即前往
---
title: 这是我的第一个文章
date: 2020-05-15
sidebar: 'auto'
categories:
- 博文
tags:
- 日常
---
## 这是我的第一篇文章
2
3
4
5
6
7
8
9
10
11
然后使用 npm run dev将项目运行起来
# 也可以给文章添加摘要
---
title: 这是我的第一个文章
date: 2020-05-15
sidebar: 'auto'
categories:
- 博文
tags:
- 日常
---
::: tip
你好
:::
<!-- more -->
## 这是我的第一篇文章
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
看看效果，当然还有其他可以自定义的地方看文档就行了
# 
# 使用插件
reco文档里面还有个插件市场，提供非常多的插件立即前往，我们举一个看板娘的例子
安装依赖npm i @vuepress-reco/vuepress-plugin-kan-ban-niang -D,然后打开config.js配置文件
增加一个plugins配置文件，和
module.exports = {
"title": "recodemo",
"description": "recodemo",
"dest": "public",
... ...
"plugins": [
[
"@vuepress-reco/vuepress-plugin-kan-ban-niang",
{
theme: ["blackCat"],
clean: false,
messages: {
welcome: '我是lookroot欢迎你的关注 ',
home: '心里的花，我想要带你回家。',
theme: '好吧，希望你能喜欢我的其他小伙伴。',
close: '再见哦'
}
}
],
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
重启项目可以看到效果
# 原生构建
全局安装npm install -g vuepress
我们新建一个文件夹 proto然后在文件夹新建一个readme.md文件，随便写点内容,vuepress默认首页为 readme.md 文件
## 这是我的第一篇文章
然后在当前目录执行控制台命令vuepress dev，查看效果，这个就非常的简陋了，想要成一个博客还需要一些配置
我们新建一个项目文件夹 protoblog，使用 npm init初始化项目，修改package.json增加打包命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
2
3
4
5
然后创建一些文件和文件夹，结构如下
修改根目录的 README.md
---
home: true
heroImage: /hero.png
heroImageStyle: {
maxWidth: '600px',
width: '100%',
display: block,
margin: '9rem auto 2rem',
background: '#fff',
borderRadius: '1rem',
}
bgImageStyle: {
height: '450px'
}
isShowTitleInHome: false
actionText: 立即开始
actionLink: /views/
features:
- title: Yesterday
details: 开发一款看着开心、写着顺手的 vuepress 博客主题
- title: Today
details: 希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上
- title: Tomorrow
details: 希望更多的爱好者能够参与进来，帮助这个主题更好的成长
---
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
然后我们把上面 reco主题项目 public文件夹里面的静态资源复制到本项目的public目录
然后我们修改一下 config.js 文件
module.exports = {
"title": "recodemo",
"description": "recodemo",
"dest": "public",
"head": [
[
"link",
{
"rel": "icon",
"href": "/favicon.ico"
}
],
[
"meta",
{
"name": "viewport",
"content": "width=device-width,initial-scale=1,user-scalable=no"
}
]
],
// 导航栏
"themeConfig": {
"nav": [
{
"text": "Home",
"link": "/",
"icon": "reco-home"
},
{
"text": "Contact",
"icon": "reco-message",
"items": [
{
"text": "GitHub",
"link": "https://github.com/lookroot",
"icon": "reco-github"
}
]
}
],
"logo": "/logo.png",
"search": true,
"searchMaxSuggestions": 10,
},
"markdown": {
"lineNumbers": true
},
}
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
38
39
40
41
42
43
44
45
46
47
48
现在我们使用命令 npm run dev运行项目
# 手动侧边栏
在具体的页面里面vuepress会默认根据你的标题生成侧边栏目录，但是在一个汇总的文档页面你想让侧边栏显示你的所有页面的标题，就可以手动配置侧边栏
我们在views目录下创建点文章，随便写点内容
然后我们打开 config.js 文件，在themeConfig里面增加sidebar配置，children就是需要侧边栏显示的文件
"sidebar": {
'/views/':[
'',
{
title: 'vue教程',
collapsable: true, // 不可折叠
children: ['vue/vif','vue/vfor']
}
]
},
2
3
4
5
6
7
8
9
10
重新运行项目看下效果，同样的你在诸如以上reco的主题都可以这样使用，因为这是vuepress本身的配置
# 自动侧边栏插件
上面这种大家可能觉得麻烦，上一个自动生成的插件vuepress-plugin-auto-sidebar
安装npm i vuepress-plugin-auto-sidebar -D,然后修改config.js配置先注释掉上面的手动侧边栏配置，然后新增插件配置
"plugins": {
"vuepress-plugin-auto-sidebar": {}
}
2
3
还需要在vue 这个文件夹新建一个readme.md随便写点内容，重新运行项目，注意当前地址后面需要加上/vue
http://localhost:8080/views/vue/
# 部署
部署到个人服务器就简单了，build之后nginx随便开一个服务就行
本次主要讲的是部署到GitHub提供的GitPage,首先创建 一个仓库，如果你的仓库名为 用户名.github.io你就不用再vuepress中做任何修改，如果不为这个名称，你就需要在config.js中配置 base属性为你的仓库名
创建完成后，将项目克隆到本地，将刚刚写的代码复制过来，这里有个问题，如果你想部署博客的同时也将博客代码同步到git的话，可以通过新建一个分支或者专门存放代码的仓库
编写**.gitignore**文件
node_modules/
docs/.vuepress/theme
package-lock.json
public/
2
3
4
新建两个脚本，一个用来push博客页面，一个用来push博客源码
deploy.sh用来打包博客，并将打包完成的页面文件推送到我们的仓库
npm run build
cd public
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:lookroot/lookroot.github.io.git master
cd ../
rm -rf public
2
3
4
5
6
7
8
9
10
11
12
push.sh用来推送博客源码文件
git add .
git commit -m 'push'
git push origin blogcode
2
3
双击运行 deploy.sh以后，我们打开https://lookroot.github.io页面便可看到效果
| 微信 | 支付宝 | 百度 |
|---|---|---|
 |  |  |