从零开始教你用vuepress搭建自己的博客（1）—基础篇

前言

最近公司是要重构一下我们的SDK文档，之前是用的gitbook来生成的，效果掺不忍睹，样式不好看就不好说了，之前的老哥写得东西语法很乱，改起来很费解，索性就干脆来个大换血。

之前有用过各种的文章博客框架，比如：大名鼎鼎的hexo，比较流行的docsify，以及Docute。但是效果都不是很理想。想着既要样式好看，告别千篇一律，更要结构清晰，语法简单，能够支持自定义，更加自由的文档框架。

知道发现了尤大大最近写的vuepress框架，一下子兴趣就来了，基于vue，对于我来说很是合胃口。接触过vue的都知道，vue上手简单，用起来很顺手，原谅我口才不是很好。就是让你眼前一亮的前端框架，这里我就不再赘述了。

VuePress是什么？

VuePress是以Vue驱动的静态网站生成器，是一个由Vue、Vue Router和webpack驱动的单页应用。在VuePress中，你可以使用Markdown编写文档，然后生成网页，每一个由VuePress生成的页面都带有预渲染好的HTML，也因此具有非常好的加载性能和搜索引擎优化。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用，其他的页面则会只在用户浏览到的时候才按需加载。

官网：vuepress.vuejs.org/zh/

VuePress特性

• 为技术文档而优化的内置Markdown拓展

• 在Markdown文件中使用Vue组件的能力

• Vue驱动的自定义主题系统

• 自动生成Service Worker(支持PWA)

• Google Analytics集成

• 基于Git的"最后更新时间"

• 多语言支持

• 响应式布局

嗯，是那种给人很舒服的样子

尤大大是这样一句话介绍的：

像数 1, 2, 3 一样容易
# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .
复制代码

好吧。咱们也来试试看

环境搭建

1、全局安装vuepress

yarn global add vuepress # 或者：npm install -g vuepress

复制代码

官网提供了2种方式（默认你已经拥有node环境以及yarn&npm）

• yarn

• npm

这里要特别说明强调一下，强烈推荐yarn，因为用npm会出现奇怪的错误。

我一开始用npm的时候，是直接从github拉的代码，发现根本跑不动啊，这就很尬尴了，然后在lessues上面看到了跟我一模一样的报错的老哥，发现是npm的锅，果断弃用npm改为yarn，果然错误解决，成功运行起来项目

2、创建项目目录

mkdir project
cd project
复制代码

3、初始化项目

yarn init -y # 或者 npm init -y

复制代码

4、然后我们开始写作

这个时候，你的项目应该是有这2个文件的

新建一个markdown文件，你当然测试的话，可以直接用命令行

# 新建一个 markdown 文件

echo '# Hello VuePress!' > README.md
复制代码

但是我们一般都是自己在文件管理器新建一个，这里假设你已经建好一个文件了。

5、接着就可以直接运行命令行

vuepress dev
复制代码

然后打开你的本地地址，如果运行成功，且没报错。

那么你就将会看到以后画面

这个时候，恭喜你，你已经成功运行起了vuepress框架，可以随意编写你的文档了。

小结

当然，这种程度的肯定不够，但是我们首先基础可以先打好，无论文档写的多好，还是先得要一步步来不是？这仅仅是第一步而已。

下一次，咱们就开始讲解如何配置它。。。

顺便求一波关注，微信公众号（不穿格子衬衫的程序员）

转载于:https://juejin.im/post/5cb03998e51d456e651b645e