用VuePress搞定你的博客(一)
前言
作为一个想成为前端工程师的大龄熊孩子,自学前端的日子已经挺久了。
然后自学的时候特想拥有一个自己的个人网站、个人博客之类的。有一天我在用vue + elementUi + koa2 + mongoDB搭建我期待已久的个人博客的时候。突然我想了一件事情,我究竟为什么要为了写个博客去用这么多技术栈呢?
于是乎懒癌发作,于是我找到了这个东西,就是VuePress。
1. VuePress
VuePress是一个极简静态网站生成器,并且包含由Vue来驱动的主题系统和插件API,诞生的初衷是为了Vue团队写文档时能更加愉♂悦(笑)。它的默认主题就是Vue的文档的样式。
它是由Vue、Vue Router和webpack驱动的单页应用,它会根据Docs目录下的md文件来了使用服务器渲染(SSR)生成静态页面,因为约定大于设置所以大部分都不需要设置什么,就像Nuxt一样。
2. 安装
就像平常写项目一样,我们用npm init
来生成一个目录,在目录中新建docs
文件夹,之后再新建一个README.md
文件,在其中随便输入一段内容,比如“# hello vuepress”
接下来我们来安装VuePress。
npm i vuepress@next -g// 安装1.X版本 虽然还在alpha阶段 但是新增的功能巨好用
npm i vuepress@next -D// 本地也来一个
复制代码
下面我们执行命令行vuepress dev docs
, 输出如下为止
现在我们打开浏览器看下
嗯,跑起来!我们继续
3. 使用以及配置
在docs
文件夹下新建.vuepress
文件夹并新建config.js
文件。然后我们来做点配置(继续抄文档)
给./docs/README.me
添加内容 (这个内容一定要放在顶部且在markdown文字内容之前)
---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
(markdown内容)
复制代码
给./docs/.vuepress/config.js
添加内容
module.exports = {title: 'Darki',themeConfig: {nav: [{text: 'home', link: '/'},{text: 'guichu', items:[{text: '葛平', link: '/geping/'},{text: '元首', link: '/yuanshou/'}]},{text: 'darki', link: 'http://hujiashi.top'}]}
}
复制代码
接下来我们在./docs/
下新建./docs/guichu/geping/index.md
和./docs/guichu/yuanshou/index.md
,并在里面随便写的点什么之类的。 目录结构如下
接下来我们重启dev,等等,重启前为了方便我们按照官方推荐给 package.json
文件添加一下内容
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
复制代码
停止服务,重新在命令行输入npm run docs:dev
(懒得再package.js里添加命令的朋友也可以用王X牌~泥垢了!!)也可以继续用vuepress dev docs
老铁没毛病~如图所见VuePress会根据md在目录内的位置通过vue-router自动生成路径,但是由于其为静态网站生成器,所以改动markdown文档需要重启服务。
以上内容均抄了官方文档,如有雷同,本来就一样的。
不过照搬文档不是我的本意,毕竟这个是系列的(一),该帮看文档的内容也先基本交代一下。
这个是下期预告。
如何设计自己的VuePress博客
转载于:https://juejin.im/post/5c65656ff265da2dab17b5bb
用VuePress搞定你的博客(一)相关推荐
- 知识上云第四弹:蚂蚁笔记,同时搞定笔记和博客!
老Q会不定期但经常性地分享数据挖掘.数据可视化.量化.NAS.工具.爬虫等类型的内容,感兴趣的朋友欢迎点个关注! 前边老Q分享了思源笔记.wiki.js和为知笔记的部署教程,今天带来了知识上云系列的第 ...
- 手把手教你用 VuePress 快速搭建个人技术博客~
一.什么是 VuePress ? VuePress 是基于 vue 的极简静态网站生成器,实际上就是一个 vue 的单页应用,内置 webpack,可以用来写文档.详见 VuePress中文网 Vue ...
- 解决这几点,轻松搞定自媒体淘客
太简单的东西容易被复制,太难的东西新人又操作不来,其实自媒体淘客算是为没有基础的新人量身订做的一个项目. 自媒体淘客在那些厉害的,能力强的大咖来说,是一件麻烦的事情,因为养号很复杂,还需要对接号商,最 ...
- 使用vuepress搭建GitHub pages静态博客页面
提前说明:本过程比较详细,相当于手把手的教,针对于不熟悉vuepress的人介绍的,大佬不喜勿喷. 第一步:新建一个GitHub仓库 仓库名随便取,不用以 username.github.io 这种方 ...
- VuePress +Gitee 快速搭建个人博客
一.快速搭建博客 1.怎么才能实现快速搭建博客的呢? 其实很简单就是拿来主义.首先你要知道有哪些工具可以搭建博客:然后你可通过搜索引擎搜索官方文档,动动手指就可以本地运行起来.但是运行起来的只是个 d ...
- 通过使用阿里云+vuepress快速搭建静态个人博客网页页面
首先通过阿里云服务器创建一个esc云服务器实例 安装VuePress程序 进入本实例安全组,开放22以及8080端口,22端口是用ssh远程链接的,8080是静态页面需要的端口 通过ssh远程链接到服 ...
- 手把手教你搭建个人技术博客,半小时搞定
一.写在前面 我是猿人,一个热爱技术.热爱编程的IT猿.技术是开源的,知识是共享的! 写作是对自己学习的总结和记录,如果您对Java.分布式.微服务.中间件.Spring Boot.Spring Cl ...
- vuepress侧边栏配置_VuePress搭建静态博客网站
VuePress是什么 仅从单词上来看就是vue和press,press除了按压的意思外,还有报刊杂志和出版社等意思,所以可以理解为由vue驱动的出版工具.换个说法就是静态博客编写工具.后六字应该都不 ...
- vuepress博客主题—vuepress-theme-reco
这是一个vuepress主题,旨在添加博客所需的分类.TAB墙.分页.评论等能: 主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用: 效果:午后南杂 文档:vuepre ...
最新文章
- WAS 报错 Font '宋体' is not available to the JVM
- 申请Let's Encrypt永久免费SSL证书
- 【Elasticsearch】如何使用 Elasticsearch 6.2 搜索中文、日文和韩文文本 - 第 1 部分: 分析工具
- c语言atm实训报告总体框架图,实训报告-ATM.doc
- 智能优化算法:社交网络搜索算法-附代码
- LocalDateTime计算两个日期时间差
- 哪些思维让你受益匪浅
- 【BlueZ5】 如何用MGMT接口实现ble slave
- spring-AOP 增强接口Introductions
- 攒机笔记二十:改造笔记本电脑(华硕A555L)
- 域名解析地址如何查看?为什么要做域名解析?
- 【zyc的从零开始】20211012 运算符
- 庸科科沾稚尘悦蕉谷捉
- 高数_第6章无穷级数__绝对收敛_条件收敛
- ubuntu设置文件夹共享
- IKAnalyzer总结
- String.contains()方法
- MFC 入门级基础知识
- 如何黑入安卓手机(ezsploit)
- EAUML日拱一卒-微信小程序实战:位置闹铃 (12)-这还不算完
热门文章
- ASP.NET中使用Cache类来缓存页面的信息
- Python2.7安装ncmbot时提示:Microsoft Visual C++9.0 is required
- Vue实现仿音乐播放器14-实现搜索页面以及功能
- Webstorm中提示Cannot find module 'webpack.dev.conf.js'
- spring boot创建应用 端口冲突8080
- 想了解Sleuth+zipkin分布式请求链路追踪,来看看这篇文章吧!
- 【Python】编程笔记4
- 数据库系统概念总结:第五章 高级SQL
- 贴花纸怎么贴_木纹纸怎么贴? 贴木纹纸的方法与详细步骤
- 神策数据《品牌零售业数字化运营的方法论及实践》白皮书重磅发布