VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】 —— 防止踩坑篇

vuePress官网地址? 👉?首页 | VuePress

手动安装

这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。

• 步骤 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?文件中?

Tips：若本地没有.gitignore?文件，手动添加一个.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

VuePress 会在?http://localhost:8080在新窗口打开?启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

现在，你应该已经有了一个简单可用的 VuePress 文档网站。

?

VuePress 有一个开箱即用的默认主题，如果你不指定要使用的主题，那么会自动使用默认主题。

Vuepress-Theme-Hope搭建个人博客示例👇

安装

在?[dir]?文件夹内新建 vuepress-theme-hope 项目:

npm init vuepress-theme-hope [dir]

要将 vuepress-theme-hope 作为文档构建器添加到现有项目中，请在项目根目录中运行以下命令:

npm init vuepress-theme-hope add [dir]

TIps：这里的?[dir]?是一个参数，你需要使用真实的文件夹名称替换它，例如?docs、blog?或其他你喜欢的名称。

创建项目

在创建项目的过程中，会有一些选项让你选择：

创建项目的类型：文档docs类型?

如果你在模板初始化成功后选择立即启动开发服务器，稍等片刻，你就可以在浏览器地址栏输入?localhost:8080/?访问开发服务器了。

将会看到👇界面：

?

?

创建项目的类型：博客blog类型

?

如果你在模板初始化成功后选择立即启动开发服务器，稍等片刻，你就可以在浏览器地址栏输入?localhost:8080/?访问开发服务器了。

将会看到👇界面：

?

?

?可参考自定义主题👇

主页 | VuePress-theme-hope??

主页 | vuepress-theme-rceo