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
