如何快速搭建你自己的Blog

VuePress

使用VuePress前，你可能需要进行以下准备

1. 安装NodeJS (opens new window)，附NodeJS安装配置教程

• WINDOWS (opens new window)
• MacOS (opens new window)

2. MD文档编辑器，这里给大家推荐VS Code (opens new window)，使用说明 (opens new window)。

推荐理由：界面友好，插件多而全。

---

什么是VuePress

VuePress (opens new window) ：

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

适用人群：

Markdown (opens new window)爱好者、技术小白、有快速博客建站需求

为什么要使用VuePress？

降低项目维护成本，专注于MD内容编写，快速生成网页。 简而言之一句话： MD -> Html。

---

开始你的第一个搭建 （有些许前端基础要求）

移步快速上手 (opens new window)

• 步骤 1: 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

• 步骤 2: 初始化项目

git init
npm init

• 步骤 3: 将 VuePress 安装为本地依赖

npm install -D vuepress@next

• 步骤 4: 在 package.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

• 步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

• 步骤 6: 创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

• 步骤 7: 在本地启动服务器来开发你的文档网站

npm run docs:dev

本地效果展示：

---

通过VuePressPlugins，来定制化你的博客

Awesome VuePress V2 (opens new window)

选择一套您自己喜欢的主题

添加至博客项目中，这里以vuepress-reco (opens new window)为例：

npm install -D vuepress vuepress-theme-gungnir@next

---

VitePress

什么是VitePress

VitePress (opens new window) ：

VitePress 是 VuePress 小兄弟, 基于 Vite构建。

我们喜爱VuePress，但是它是基于 Webpack 构建。为了一个只有几个简单页面的简单文档站点启动开发服务器所需的时间正变得让人难以忍受。即使是HMR热更新也需要几秒钟的时间才能在浏览器中显示出来。

作为参考，Composition API RFC repo仅只有两个页面，但是它花费了 4 秒来启动服务器，并且任何修改都需要将近 2 秒钟的时间才能在浏览器中显示出来。

从根本上说，这是因为 VuePress 是 webpack 的一个应用程序。即使只有两页，这也是一个完整的 webpack 项目(包括所有的主题源文件)正在编译。当项目有很多页面时，情况会变得更糟：每个页面都必须先完全编译，然后服务器才能显示内容！

Vite 很好地解决了这些问题：几乎立即启动服务器，只按需编译正在服务的页面，以及闪电般的快速 hmr。

为什么选择VitePress

快

• 开发服务器启动更快
• 热更新更快
• 构建更快(内部使用 Rollup)

---

动手搭建第一个VitePress博客

移步快速上手 (opens new window)

• 步骤 1: 创建并进入一个新目录

mkdir vitepress-starter && cd vitepress-starter

• 步骤 2: 初始化项目

yarn init

• 步骤 3: 本地安装 VitePress

yarn add --dev vitepress

• 步骤 4: 创建你第一篇文档

mkdir docs && echo '# Hello VitePress' > docs/index.md

• 步骤 5: 在 package.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}

• 步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

• 步骤 6: 在本地服务器上启动文档站点

yarn docs:dev

• 步骤 7: 加亿点细节