概述
这是基于 Vuepress 搭建的博客,其他两篇:
(一)基于 Vuepress 搭建个人博客之前端开发环境配置
(三)基于 Vuepress 搭建个人博客部署到服务器
之前有接触过一些前端的开发,用的技术是 vue,后来发现有 Vuepress 这个可以生成文档的工具,也看到很多开发者都使用它来形成自己的博客,所以就准备用 Vuepress 完成博客的搭建,基本配置跟官网上的教程类似,如果想要多了解一下 Vuepress,可以到 中文网 了解
执行
基本目录结构如下:
|- area
|- .vuepress
|- public
|- theme
|- config.js
|- article directory
|- package.json
步骤:
1、创建博客目录,我是创建了名为 area 的文件夹,博客的文件都在这里面
2、创建 .vuepress 目录,博客的 UI 会根据这个目录下的文件展示
3、创建文章目录(如 android),文章以 md 文件区分
4、创建并配置 package.json
4、创建并配置 config.js
5、运行(yarn run dev
)即可通过 localhost 进行访问
问题
1、修改默认主题
在中文文档里面有提及,通过继承的方式可以改变默认的主题,并且同名的组件会覆盖被继承的主题组件,这个操作在 index.js 文件下面完成
2、资源路径问题
vuepress 会根据 config.js 中 base 和 dist 所指定的值作为查询标准,base 默认指向 .vuepress,因此在放置图片资源的是否可以在 .vuepress 目录下进行操作
3、运行环境问题
参考 前端开发环境配置 进行处理
结束
经过上述步骤,本地的 Vuepress 文档已经成功搭建完成,并且可以像平时开始前端业务那样进行调整,达到自己预期的页面效果 另外附上我使用的 主题