基于vuePress搭建个人博客（保姆级教程）

基于vuePress搭建个人博客详细教程

前言：

    如果你想搭建个人博客却毫无想法，那么告诉你来对地方啦。在这个卷出花样的大环境中（说出卷出花样让我想起了达美乐的各种卷边😍😍😍每周二、三七折哟，所谓接二连三，达美乐打钱。抱歉扯远了哈😁）如果你还没有一个个人的技术博客那可是会大大减分的哦。今天大波就手把手带你搭建一个漂亮的个人博客。

背景：

    这几天表弟找我要我帮他弄一个个人博客，于是乎帮他找了一套模板，顺便改版了一下自己的个人博客[前端大波](https://zhaoxiaozhao1.github.io/)，目前正在持续上传文档，欢迎大家来探讨学习。

正题：

前期准备

	开发工具：Vscode、WebStorm等等，开心就好。
	开发环境：git、node、npm；注意：node和npm的版本好尽量和下图大差不差
	![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/8dc56f8794484214862005a58525527b.png)
	拥有自己的github账户，没有的话请前往[github官网](https://github.com/)自行注册。

正式开始

	这里已经为大家筛选出了一套很优秀的项目模版，大家完全不用操心前期的项目搭建，只需要全身心的投入到文章创作中即可

clone项目模版（下载zip包）

	大家可以打开这个[开源地址](https://github.com/liyupi/codefather/tree/template)。这款模版是大佬鱼皮总结开发，一直有在维护大家放心使用。
	操作步骤如下：

• 页面打开后，点击Download ZIP，下载模版。
  

• 解压codefather-template压缩包，这里使用vscode工具打开解压后的codefather-template项目。

• 使用vscode终端进入到项目根目录，确认node版本号后，执行npm i 下载依赖。
  

• 接着打开package.json，找到scripts，就能看到运行命令docs:dev和打包命令docs:build
  

• 终端中执行 npm run docs:dev , 稍后我们可以看到命令行中出现如下内容
  

• 按住cmd点击终端中的地址，便可在浏览器中打开博客首页啦。如果你已经达到这一步，此刻恭喜你已经成功了80%。

项目目录分析

如果你了解vuepress的话，那应该清楚README.md或者index.md在更目录下是相当于入口文件的存在，默认会打开此文件作为网站首页，但是两者不要同时存在于根目录哦。

• 根目录下有学习路线、.vuepress、作者.md、README.md以及一些配置文件。其中在根目录中的md文件，我们可以直接通过http://localhost:8080/作者访问，以及README.md是默认路径你会发现我们打开**http://localhost:8080/**的时候就是readme.md的内容。所以，一些公共的文章我们可以直接放到根目录中，作为一级目录，便于访问。

• 学习路线文件夹其实就是我们的文章归类，我们还可以创建一些其他的类型文件夹，比如散文、学习碎片、常见问题等等，把对应的文章放入即可。

• .vuepress文件夹
  1、public文件夹内存放的是我们的项目中用到的图片、icon等
  2、sidebars文件夹存放的是刚才提到的学习路线这种归类文件夹的配置文件，每当我们新创建一个类型文件夹比如常见问题就需要在sidebars中对应创建一个example.ts,文件内容如下图：
  

  ⚠️注意：第一：需要我们创建一个入口文件README.md用来做页面显示如图
  
  ⚠️第二：我们创建的常见问题.md中文章开头一定要使用**#大标题作为首行**，因为在编译的过程中，脚本会获取md文件中的title内容。
  3、theme文件夹中存放的是博客主题以及一些页面组建，比如：导航栏、底部、侧边栏、右侧固定栏目等等。styles中方的是样式。
  4、etraSideBar.ts存放的是固定在右侧边栏的配置文件，如图：

  5、footer.ts是底部版权信息配置文件。
  6、navbar.ts是导航配置文件，如图
  7、sidebar.ts是侧边栏配置文件，上边我们在根目录创建的类型文件常见问题就需要在这里配置如图：
  
  接着我们需要在根目录的README.md文件中添加如下内容，我们就可以再网站首页看到新增的内容块儿了
  
  这样我们得常见问题就出来啦。
  
  点击常见问题会跳转到这里
  

这样我们得本地建设就ok啦，大家学废了吗？接着就是大家可以在上边无限创作了

下一期教大家如何把本地项目放到github静态站点上。