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 添加/移除CSS类实现代码
Feb 11 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
详解javascript遍历方式
Nov 11 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
php文件上传后端处理小技巧
2016/05/22 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
js的一些常用方法小结
2011/06/29 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python3中eval函数用法使用简介
2019/08/02 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
新闻编辑求职信
2014/04/09 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python