Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
作者:BrownHu 发布时间:2024-04-26 17:37:08
VuePress
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。
一个基于 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文档:
下面的工作就是数据的替换了,但我们应该先看一下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/'
}
]
剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。
更改默认主题色
你可以在.vuepress/目录下创建一个override.styl文件。
vuepress提供四个可更改的颜色:
$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色
我把它改成了这样:
侧边栏的实现
由于评论区里问的人较多,所以在这里更新一下,其实我就算在这里写的再详细也不如大家去看官方文档。
侧边栏的配置也在.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配合,就可以配置好你的博客网站了。
来源:https://juejin.im/post/5addb90af265da0b7f442935
猜你喜欢
- 本文实例讲述了Python3实现并发检验代理池地址的方法。分享给大家供大家参考,具体如下:#encoding=utf-8#author: w
- 最基础的形态学操作有四个,分别是腐蚀、膨胀、开计算和闭计算,`scipy.ndimage分别实现了二值数组和灰度数组的这四种运算二值灰度bi
- 关于opencvOpenCV 是 Intel 开源计算机视觉库 (Computer Version) 。它由一系列 C 函数和少量 C++
- 前言tkinter是python自带的标准gui库,对于我们自己日常做一些小程序出来给自己使用是非常不错的。因为tkinter相比较其它强大
- 在类中每次实例化一个对象都会生产一个字典来保存一个对象的所有的实例属性,这样非常的有用处,可以使我们任意的去设置新的属性。每次实例化一个对象
- 前言系统自带的数据表格,使用时通过sns.load_dataset('表名称')即可,结果为一个DataFrame。prin
- 前言Django原生自带的数据库支持是sqlite,但是我们现在常用的数据库一般是mysql,mangodb等数据库。所以我们要改变数据库的
- 环境Django 2.0 + Win 10 + Pycharm + 360浏览器报错项目结构(报异常)解决方法看了好多大佬的解决方法,基本上
- 本篇文章面向的读者: 已经基本掌握Go中的 协程(goroutine),通道(channel),互斥锁(sync.Mutex),读
- Tornado的核心是什么?Tornado 的核心是 ioloop 和 iostream 这两个模块,前者提供了 一个高效的 I/O 事件循
- 本文实例讲述了Python动态生成多维数组的方法。分享给大家供大家参考,具体如下:多维数组其实就是多个一维数组的嵌套,Python中有原生的
- 如下所示:#-*- encoding:utf-8 -*-import csvimport sys,osimport pymysql def
- 刚刚登甲发来一个文章,看到只要一行代码,就可以把IE6弄死.<style>*{position:relative}&
- 在document.form1.submit();后加document.body.innerHtml = "W
- 题目:反转一个单链表。示例:输入: 1->2->3->4->5->NULL输出: 5->4->3-
- 永远不要相信用户输入的内容具有适当的大小或者包含适当的字符。在使用其做出决策之前应该始终对用户输入进行验证。最佳的选择是创建一个
- 使用到的库: dlib+Opencv python版本: 3.8 编译环境: Jupyter Notebook (Anaconda3)0.D
- 看到Django和layim实现websocketde资料很少,自己就琢磨了下,顺便搭建出来了。自己要去找闲心大神授权呀。先来看图这是初次搭
- 不知道写得对不对啊!错了再改吧!加密函数Function Encodestr(s,xorstr)Dim enFor&nb
- 本文实例为大家分享了python实现邮箱发送信息的具体代码,供大家参考,具体内容如下一、SSLSSL 是指安全套接字层,简而言之,它是一项标