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 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
Js中sort()方法的用法
2006/11/04 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
js闭包的用途详解
2014/11/09 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
金融专业个人求职信范文
2013/11/28 职场文书
基层党员公开承诺书
2014/05/29 职场文书
公司授权委托书样本
2014/09/15 职场文书
学生检讨书如何写
2014/10/30 职场文书
颐和园的导游词
2015/01/30 职场文书
社区服务活动报告
2015/02/05 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android