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