一、介绍

---

自从入坑以来，工作中一直都有记录笔记的习惯，由于每次都是使用公司分配电脑，所以每次跳槽都会丢失一些笔记，于是自己也尝试过云笔记，博客园，自己建站进行笔记记录，但是都没有坚持下来，一次偶然的机会，发现一个博主网站内容风格均是Markdown格式，就研究了下，发现网站搭建是使用vuepress (opens new window)，于是乎就又开始尝试下搭建，用来记录后面的技术文档及日常运维事项🙈。

注意

网站建设每一个过程都准备记录下来，希望这次可以坚持下来。

二、搭建

这里选择网站使用vuepress之后，发现也是跟其它博客类网站一样，需要选择主题，对比了下各个主题最后还是确定使用Vdoing (opens new window),关于该主题的介绍这里就不班门弄斧了，具体可查看官网。

2.1 快速启动

# clone the project
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git

# enter the project directory
cd vuepress-theme-vdoing

# install dependency 注意：如安装不成功请关闭淘宝源。
npm install # or yarn install

# develop
npm run dev # or yarn dev

笔记

这里克隆后，是主题博主自己使用的网站，包括内容，因此咱们需要删除对应的内容，修改为自己的网站。

2.2 目录结构

.
├── .github   (可选，GitHub Actions 所需文件)
│   ├── workflows
│   │   ├── baiduPush.yml (可选，百度定时自动推送)
│   │   └── ci.yml (可选，自动部署)
├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress （同官方，查看：https://vuepress.vuejs.org/zh/guide/directory-structure.html#目录结构）
│   ├── @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) (opens new window)
• docs/@pages 此文件夹是自动生成的，存放分类页、标签页、归档页对应的.md文件，一般不需要改动
• docs/_posts 专门用于存放碎片化博客文章，里面的.md文件不需要遵循命名约定，不会生成结构化侧边栏和目录页。
• docs/<结构化目录> 请查看《构建结构化站点的核心配置和约定》 (opens new window) (opens new window)。
• docs/index.md 首页
• theme-vdoing 存放在本地的vdoing主题文件，如果你想深度的修改主题，首先要在docs/.vuepress/config.js中配置使用的主题指向这个文件。