快速上手Vuepress博客搭建

1.官方文档和教程

本站采用vuepress框架和vdoing主题，官方文档的地址如下：

• vuepress的官方文档 (opens new window)
• vdoing的官方文档 (opens new window)

另外，纯新手也可以观看这个视频教程 (opens new window)

2.准备

1.运行环境

vuepress需要电脑的Node.js版本在8.6以上，还没安装的可以点这里 (opens new window)下载安装。

另外需要电脑安装了Git。

2.克隆到本地并进入目录

在Git Bash中输入下面指令：

git clone https://github.com/Master-Frank/Frank-Notes.git && cd Frank-Notes

或者gitte地址：

git clone https://gitee.com/frank-starbuck/Frank-Notes.git && cd Frank-Notes

3.安装本地依赖

继续在Git Bash中输入

npm i

等待安装完成后，输入

npm run dev

等待编译完成，博客就能在本地运行了。

默认访问链接是http://localhost:8080 (opens new window)

3.目录结构

在正式编写博客前，先了解一下目录结构，知道那些文件可以或需要删改，哪些不能。

.
├── .github   (可选，GitHub Actions所需文件)
│   ├── workflows
│   │   ├── baiduPush.yml (可选，百度定时自动推送)
│   │   └── ci.yml (可选，自动部署)
├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress (存放全局的配置、样式、静态资源等)
│   ├── @pages (可选，存放分类页、标签页、归档页的信息)
│   ├── _posts (可选，专门存放碎片化博客文章的文件夹)
│   ├── <结构化目录>
│   └── index.md (首页)
├── theme-vdoing (可选，本地的vdoing主题)
├── utils  (可选，vdoing主题使用的node工具)
│   ├── modules
│   ├── config.yml (可选，批量操作front matter配置)
│   ├── editFrontmatter.js (可选，批量操作front matter工具)
├── baiduPush.sh (可选，百度推送命令脚本)
├── deploy.sh (可选，部署命令脚本)
└── package.json (必须，框架和插件的版本信息)

• docs 文件夹名称请不要修改
• docs/.vuepress 用于存放全局的配置、样式、静态资源等，同官方，查看 详情(opens new window) (opens new window)。这部分是等会主要需要修改的地方。
• docs/@pages 此文件夹是自动生成的，存放分类页、标签页、归档页对应的.md文件，一般不需要改动
• docs/_posts 专门用于存放碎片化博客文章，里面的.md文件不需要遵循命名约定，不会生成结构化侧边栏和目录页。
• docs/<结构化目录> 这里创建的文件夹会自动生成博客中的目录
• docs/index.md 首页
• theme-vdoing 存放在本地的vdoing主题文件，如果你想深度的修改主题，首先要在docs/.vuepress/config.js中配置使用的主题指向这个文件。