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 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
node使用promise替代回调函数
May 07 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
对angular4子路由&辅助路由详解
Oct 09 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
详解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
PHP Memcached应用实现代码
2010/02/08 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP chr()函数讲解
2019/02/11 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript的==运算详解
2016/07/20 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python实现从web抓取文档的方法
2014/09/26 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
tensorflow识别自己手写数字
2018/03/14 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
中职应届生会计求职信
2013/10/23 职场文书
党员自我评价分享
2013/12/13 职场文书
业务部经理岗位职责
2014/01/04 职场文书
2015年新学期寄语
2015/02/26 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫