## VuePress 从零搭建到部署的路上，所望皆所得

<br>

所有的博客发布平台都或多或少具有不同的局限性，现如今自由开放、所见即所得（WYSIWYG）的 VuePress 越来越受到大家的青睐，本文将带领大家一览 VuePress 搭建与部署的全过程。

<br>

第一步，在本地电脑安装 VuePress 工具包。

npm install -g vuepress

第二步，在想要搭建博客的目录下，初始化一个新的项目。

vuepress init my-blog

<br>

第一步，进入新建的项目目录，编辑配置文件 .vuepress/config.js。

module.exports = {
title: '我的博客',
description: '这是我的博客，记录我的学习和生活',
theme: 'reco',
plugins: ['@vuepress/back-to-top', '@vuepress/pwa'],
}

第二步，修改主题配置。

module.exports = {
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '关于我', link: '/about/' },
],
sidebar: [
{
title: '前端',
children: [
'/front-end/javascript/',
'/front-end/vue/',
],
},
{
title: '后端',
children: [
'/back-end/node/',
'/back-end/java/',
],
},
],
},
}

<br>

在 .vuepress/docs 目录下创建新的 Markdown 文件，例如：

---

title: 我的第一篇博客文章
date: 2023-03-08
categories: 前端
tags: JavaScript

我的第一篇博客文章

欢迎来到我的博客，这是我的第一篇文章。

<br>

vuepress dev

在浏览器中访问 http://localhost:8080 即可看到预览效果。

<br>

vuepress build

这将在根目录生成一个名为 `dist` 的文件夹，其中包含构建后的博客。

最后，将构建后的博客部署到服务器上，例如：

scp -r dist username@example.com:/var/www/html/my-blog

<br>

<br>