VuePress博客搭建笔记（一）简单上手
前奏较长，不墨迹的可直接跳转至
00.契子
- 偶尔的整理洁癖
- 平常有收藏+书签的习惯
- github私有仓库免费开放
- 翻看博文 ： 作为软件工程师，如何进行知识管理
01.需求分析
Ok，因为以上的四个契机，因缘巧合鬼使神差地 ，就做出了搭建一个 实用性 个人博客的想法。
Well,那就来先分析下基本的需求吧。
- 个人博客 => 博文产出&支持MarkDown格式&方便管理和维护
- 知识库 => 知识归纳&习惯培养
初步设定：
- 将各应用中的书签导入到博客中，在博客中有一块区域负责对知识的消化与产出
- 配合对云仓库和随笔这两个模块的管理来培养习惯
02.可行性分析
这时我想要的博客是能在 任意场所 任意时间 任意平台 都能打开即食用的，对所有的知识/书签/博文都能做一个快速的查询,而且不想花钱搭建云服务器和云数据库。
正好我目前正在使用vue框架，那么就决定是你了，VuePress ！
基于VuePress搭建的项目有很多，就举最近看到并在食用的这个，awesome-bookmarks为例，整体满足我的需求，感觉可以的。
...程序员施工中...
目前使用下来看，VuePress上手不算难也不算太简单，花了两天才正式撸出这个blog，还是费了些二虎之力的。
使用的技术点：
- npm
- VuePress
- github
追加技术点：
- vue
- Regex
03.数据源和工具准备
数据
- awesome-bookmarks
- 前端最实用书签(持续更新)
工具
- VuePress官方文档
- node.js>=8.0
- Yarn
- 一个文本编辑器(比如webstorm,主要用来可视化执行命令)
04.开始搭建博客
安装
1.安装程序 node.js 或者 Yarn。VuePress支持使用Yarn和npm来安装，Node.js版本需要>=8才可以。
此处选择熟悉的工具即可，博主这里用的是npm咯。
2.打开cmd，在控制台输入以下代码：
全局安装VuePress
yarn global add vuepress # 或者：npm install -g vuepress ## 或者也可以在已存在的项目中开发，将 VuePress 作为一个本地依赖安装， ## 上下两条选择一个即可，博主选择上者，省点折腾。 ## yarn add -D vuepress # 或者：npm install -D vuepress
创建新项目目录
mkdir project cd project
初始化项目
yarn init -y # 或者 npm init -y
接着，在 package.json 里加一些脚本:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
/* docs:dev 键值可以自定义修改，此处是为了和一些项目中默认脚本中自带的 dev 区分开。
如果修改了这个doc:dev 为 mydev，那么下面执行vuepress dev docs的命令就变成了npm run mydev
npm run mydev 等于在该项目的根目录下执行vuepress dev doc
vuepress dev doc 做的就是调用安装的vuepress去根据你目录中的.vuepress配置项和docs下的所有.md/。html文件做一个项目的编译和打包
docs:build 同理 */
}
}然后就可以开始写作了:
yarn docs:dev # 或者：npm run docs:dev
要生成静态的 HTML 文件，运行：
yarn docs:build # 或者：npm run docs:build
默认情况下，文件将会被生成在 .vuepress/dist，当然，你也可以通过 .vuepress/config.js 中的 dest 字段来修改，生成的文件可以部署到任意的静态文件服务器上.
不习惯命令行输入的也可以直接依靠windows可视化操作建立如下工程目录。
project ├─── docs │ ├── README.md └── package.json
在README.md中输入一些内容，在package.json中注入脚本命令。并将命令挂载到webstorm的命令配置处。
然后点击运行run dev ，run build 来自动生成.vuepress文件夹
project ├─── docs │ ├── README.md │ └── .vuepress │ ├── dist │ ├── public │ └── config.js └── package.json
不管使用哪种方式，最终的项目结构应该和上面一样。
- docs文件夹是你的根目录，也是vuepress要去解析的文件夹，
- docs下的README.md可以理解为首页页面。
- docs下的.vuepress是一些配置文件，这里可以存放图片等静态资源，一些主题配置，自定义组件等等
至此，一个基于docs文件夹下的README.md文件 生成的页面 就 制作完成了。