一、准备工作
首先我们要把需要的东西都下好，例如：node 、git 、vuepress
node下载链接(opens new window)[2]
git下载链接(opens new window)[3]
二、安装脚手架
这里本应该安装 vuepress 的，但是 vuepress 其本身是一个文档型的页面，比较简约，我们肯定都想让自己的博客变得好看一点，所以这里推荐一个大佬制作好的主题 vuepress-theme-reco ，其页面效果大致是这样的：
随便找个路径，在终端下输入该指令：
// npm npm install @vuepress-reco/theme-cli -g
等待下载好以后，再输入输入该指令进行初始化项目：
theme-cli init blog
在初始化时，会让你填写一些信息，例如：博客名称、博客标题、博客描述..
你只需要全部按回车先跳过即可，后续这些信息都还可以自己填写的
等项目全部初始化好了以后，文件目录是这个样子的：
├── blog ├── .vuepress │ ├── public // 存放静态资源 │ │ ├── avatar.png // 头像图片 │ │ ├── favicon.ico // 网站icon图标 │ │ ├── hero.png // 我也不知道有啥用，删了也可以 │ │ └── logo.png // 网站导航栏左上角的logo图片 │ │ │ └── config.js // 配置文件，非常重要！！！ ├── blogs // 存放文章，即.md文件 │ ├── ... │ ├── ... │ └── ... ├── docs // 存放一些后续需要配置的文件，暂时不需要了解 ├── .gitignore // 提交git仓库时需要忽略的文件 ├── package.json // 管理包文件 └── README.md // 自动生成的，我们可以先不管
了解完文件目录结构以后，我们需要启动一下项目看一眼，因为刚生成的项目很多依赖包还没安装，并且当前的路径也没在项目中，所以我们要按下面的指令依次执行，进行启动项目
// 第一步，进到项目根目录中 cd blog // 第二步，安装依赖包（这个过程很慢，需要等待） npm install // 第三步，等依赖包下完了以后再执行该指令启动项目 npm run dev
启动好以后会自动打开网页，我们可以看到这样的画面了，可以说这个主题的脚手架已经帮我们做了很多工作了，页面也非常的漂亮
三、配置信息详解
这个页面的一切都是可以由我们的配置文件来控制的，也就是 .vuepress/config.js ，我们来看看它具体的配置信息具体含义是什么（这里非常重要，因为后续如果你要改动页面的什么东西，都要在这里改的，所以必须非常熟悉各个属性的作用）
module.exports = { "title": "", "description": "", "dest": "public", "head": [ [ "link", { "rel": "icon", "href": "/favicon.ico" } ], [ "meta", { "name": "viewport", "content": "width=device-width,initial-scale=1,user-scalable=no" } ] ], "theme": "reco", "themeConfig": { "nav": [ { "text": "Home", "link": "/", "icon": "reco-home" }, { "text": "TimeLine", "link": "/timeline/", "icon": "reco-date" }, { "text": "Docs", "icon": "reco-message", "items": [ { "text": "vuepress-reco", "link": "/docs/theme-reco/" } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } ], "sidebar": { "/docs/theme-reco/": [ "", "theme", "plugin", "api" ] }, "type": "blog", "blogConfig": { "category": { "location": 2, "text": "Category" }, "tag": { "location": 3, "text": "Tag" } }, "friendLink": [ { "title": "午后南杂", "desc": "Enjoy when you can, and endure when you must.", "email": "1156743527@qq.com", "link": "https://www.recoluan.com" }, { "title": "vuepress-theme-reco", "desc": "A simple and beautiful vuepress Blog & Doc theme.", "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png", "link": "https://vuepress-theme-reco.recoluan.com" } ], "logo": "/logo.png", "search": true, "searchMaxSuggestions": 10, "lastUpdated": "Last Updated", "author": "", "authorAvatar": "/avatar.png", "record": "xxxx", "startYear": "2017" }, "markdown": { "lineNumbers": true } }
接下来按顺序讲解一下各个属性的作用
（1）title
该属性表示的是博客的标题
我们将 title 值修改为 前端印象 ，看一看有哪些地方有所变动
- 第一处是加载动画时的大标题
- 第二处是导航栏的最左侧
- 第三处就是浏览器标签页的title
（2）description
该属性表示该网站的一些描述信息
我们将 description 的值改为 该网站用于记录前端知识总结 ，看一看有哪些地方有所变动
- 第一处是加载动画的副内容
- 第二处是网站描述节点，用于SEO的
（3）dest
该属性表示的是项目打包以后文件生成的目录
例如我们将该 dest 的值改成 ./dist ，那么当我们执行 npm run build 打包文件后，会在当前根目录下生成一个 dist 文件夹，打包好的项目文件都在该文件夹中
（4）head
该属性表示的是 html 文档的 head 标签中需要额外插入的其它标签
默认生成的是：
"head": [ // 在head标签中生成以下标签 [ "link", // 生成link标签 { "rel": "icon", // rel属性值为icon "href": "/favicon.ico" // href属性值为 /favicon.ico } ], [ "meta", //生成meta标签 { "name": "viewport", // name属性值为viewport "content": "width=device-width,initial-scale=1,user-scalable=no" // content属性值为width=device-width,initial-scale=1,user-scalable=no } ] ]
当然我们也可以继续添加别的标签，例如：
"head": [ // 在head标签中生成以下标签 ["link", { "rel": "icon", "href": "/favicon.ico" }], ["meta", { "name": "viewport", "content": "width=device-width,initial-scale=1,user-scalable=no" }], ["meta", { "name": "keywords", "content": "前端,js,css" }], ['meta', { name: 'author', content: '零一' }], ]
（5）theme
该属性表示的是当前项目使用的主题
这里我们是用 vuepress-theme-reco 主题的脚手架生成的，所以它默认就是 reco ，我们可以不用修改，当然后续你想使用别的主题也可以，可以参考一下 vuepress 的官网
还有下文~
