HelloVuePress
# 02.Hello VuePress
从本文开始,动手搭建自己的博客!希望读者能跟着一起来,这样才能真正掌握。
# VuePress是什么
VuePress是由Vue作者带领团队开发的,非常火,使用的人很多;Vue框架官网 (opens new window)也是用了VuePress搭建的。
即使是在移动端,阅读体验也很好。
根据 VuePress官网 (opens new window)的描述,VuePress是 Vue 驱动的静态网站生成器。简单来说,就是将Markdown文件自动转换HTML,简洁容易使用,性能高,我们只需专注于Markdown内容。
# 官方文档
一般来说,学习什么技术,或者使用什么工具,官网文档是最好的……
但对于我来说,官网的文档相当于一个手册,大而全;而我需要的是一个教程,逐步逐步完善功能,而不是一上来就列出所有的功能,令人眼花缭乱。为此,我自己整理了不少关于VuePress的笔记,看了不少关于VuePress入门的博客,才略有所得。
# 版本
本文使用的是VuePress1.x,虽然VuePress2.x (也称为VuePress@next)已经出来一段时间了(2021年左右),但是VuePress1.x的生态很完善,不少主题和插件都仅兼容1.x,所以本文也是使用1.x。
就好比Java中,Java8是用的最广泛的,生态也非常完善,最新版的Java较少人使用。
读者如果想使用最新版本的VuePress,也可参考官方的文档,在官网右上角可以选择。博主也简单看了下v2.x的文档,在使用方面基本上和v1.x差不多,想要迁移也是很方便的。
除此之外还有vitepress (opens new window),基于vite建立的,也是因为生态不完善,所以这里不过多介绍。
# 环境准备
我们首先在本地搭建博客,为此我们需要:
- 一台电脑
- VuePress1.x需要Node版本 ≥ 8.6,建议用最新版的Node。
- Chrome或FireFox浏览器(尽量不要用IE浏览器)
# 第一个博客
我们来写第一个博客吧!首先,创建一个文件夹,例如vuepress-learn(父目录最好不要带中文和空格),也可以在cmd里使用如下命令
# Windows下
md vuepress-learn
cd vuepress-learn
# Linux和mac下
mkdir vuepress-learn && cd vuepress-learn
2
3
4
5
6
使用自己喜欢的包管理器初始化:
npm init -y
或
yarn init
2
3
安装VuePress依赖
npm install -D vuepress
开始写第一篇博客
- 我们在当前目录下创建一个docs目录(以后博客都放这个文件夹里),
- 进入到该文件夹,创建一个
README.md
文档,里面写上内容“Hello VuePress”。 - 如果是在Linux或Mac下,也可以使用如下命令一步到位:
mkdir docs && echo '# Hello VuePress' > docs/README.md
修改package.json文件,添加一些启动命令
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
2
3
4
5
6
其中,docd:dev命令相当于在本地运行本博客;而docs:build相当于编译打包本博客,用于部署到服务器上。
当前文件夹目录结果如下(忽略node_modules文件夹)
vuepress-learn
├── docs
│ └── README.md
├── package-lock.json
└── package.json
2
3
4
5
启动博客:在项目根目录运行如下命令:
npm run docs:dev
运行后,正常情况下就能编译成功,并且在最后会有提示:
success [22:46:24] Build 185e1f finished in 167 ms! ( http://localhost:8080/ )
我们打开本地的 http://localhost:8080,可以看到如下内容:
至此,我们的第一篇博客就完成了!
# Git初始化
为了后续教程需要,我们将本项目用Git管理
git init
添加 .gitignore文件,忽略node_modules文件夹:
node_modules
# 获取源码
为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到Gitee (opens new window)和GitHub (opens new window)上。
并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!
例如,你想运行本篇文章所创建的博客,可以这样做:
- 打开命令行
- 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git (也可拉取GitHub的)
- 跳转目录:cd vuepress-learn
- 切换分支:git switch -c VuePressDemo1HelloWorld origin/VuePressDemo1HelloWorld
- 安装依赖:npm i
- 运行博客:npm run docs:dev