Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客


Posted in Javascript onApril 26, 2018

VuePress

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

一个基于 Vue SSR 的静态站生成器,本来的目的是爽爽的写文档,但是我发现用来撸一个人博客也非常不错。

这是VuePress的官方文档

上手搭建

你可以跟着文档上的例子自己玩一玩,不过由于VuePress的文档也是用VuePress来实现的,所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍。

1.首先安装VuePress到全局

npm install -g vuepress

2.然后把VuePress仓库克隆到你的电脑

git clone git@github.com:docschina/vuepress.git

在docs文件中执行(请确保你的 Node.js 版本 >= 8)

cd vuepress
cd docs
vuepress dev

当你看到这一行就说明已经成功了:

VuePress dev server listening at http://localhost:8080/

下面我们打开http://localhost:8080/

发现真的打开了vuepress文档:

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

下面的工作就是数据的替换了,但我们应该先看一下docs的目录结构:

├─.vuepress
│ ├─components
│ └─public
│ └─icons
│ └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
 ├─config
 ├─default-theme-config
 └─guide
└─README.md // 首页配置文件

文档分成了两部分,中文文档在/zh/目录下,英文文档在根目录下。

其实目录里面的东西都挺好看懂的,首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容,从中文文档里也可以看到只有这三个目录被替换了。

首页配置

默认主题提供了一个主页布局,要使用它,需要在你的根目录 README.md 的 YAML front matter 中指定 home:true,并加上一些其他的元数据。

我们先看看根目录下的README,md:

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
 details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
 details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
 details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾

实在看不懂,官网有比我更详细的配置说明。

导航配置

导航配置文件在.vuepress/config.js中

在导航配置文件中nav是控制导航栏链接的,你可以把它改成自己的博客目录。

nav: [
 {
 text: 'Guide',
 link: '/guide/',
 },
 {
 text: 'Config Reference',
 link: '/config/'
 },
 {
 text: 'Default Theme Config',
 link: '/default-theme-config/'
 }
]

剩下的默认主题配置官方文档都有很详细的文档说明这里就不在??铝恕?br />

更改默认主题色

你可以在.vuepress/目录下创建一个override.styl文件。

vuepress提供四个可更改的颜色:

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

我把它改成了这样:

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

侧边栏的实现

由于评论区里问的人较多,所以在这里更新一下,其实我就算在这里写的再详细也不如大家去看官方文档。

侧边栏的配置也在.vuepress/config.js中:

sidebar: [
 {
 title: 'JavaScript', // 侧边栏名称
 collapsable: true, // 可折叠
 children: [
 '/blog/JavaScript/学会了ES6,就不会写出那样的代码', // 你的md文件地址
 ]
 },
 {
 title: 'CSS', 
 collapsable: true,
 children: [
 '/blog/CSS/搞懂Z-index的所有细节',
 ]
 },
 {
 title: 'HTTP',
 collapsable: true,
 children: [
 '/blog/HTTP/认识HTTP-Cookie和Session篇',
 ]
 },
]

对应的文档结构:

├─blog // docs目录下新建一个博客目录
│ ├─CSS
│ ├─HTTP
│ └─JavaScript

我的博客:brownhu

部署

在配置好你博客之后,命令行执行:

Vuepress build

当你看到这一行就说明成功了:

Success! Generated static files in vuepress.

将打包好的vuepress目录上传到你的github仓库,和github page配合,就可以配置好你的博客网站了。

Javascript 相关文章推荐
javascript中的变量是传值还是传址的?
Apr 19 Javascript
js有关元素内容操作小结
Dec 20 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
js取整数、取余数的方法
May 11 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
在vue里使用codemirror遇到的问题
Nov 01 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 #Javascript
vue如何判断dom的class
Apr 26 #Javascript
vue 中filter的多种用法
Apr 26 #Javascript
vue自定义filters过滤器
Apr 26 #Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 #Javascript
react 创建单例组件的方法
Apr 26 #Javascript
node打造微信个人号机器人的方法示例
Apr 26 #Javascript
You might like
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
理解javascript异步编程
2016/01/27 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
django实现用户登陆功能详解
2017/12/11 Python
用python实现对比两张图片的不同
2018/02/05 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python实现视频读取和转化图片
2019/12/10 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
高一化学教学反思
2014/02/05 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
党员活动日总结
2014/05/05 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
合作意向协议书
2015/01/29 职场文书