踩坑侠：VuePress 1.0.1(基于GitHub Pages快速搭建我的博客)

先上图，踩坑侠半日搭建的VuePress的demo：

前言：

1. 我此次主要分享的是VuePress + GitHub（基于GitPages）来快速搭建我的博客。
2. 相信看到这篇教程的绝大多数同窗，都是跟着官网作，而后遇到问题了。
3. 本次教程长话短说，VuePress利弊与项目的基本结构，没有看过官网的同窗建议先看一下官网。（VuePress官网）

正文

VuePress支持两种部署方式：部署到gitHub 和 部署到我的的服务器上 本次做者想要快速成型，因此采用的是第一种。

第一步

在本身的github建立一个VuePress项目，这里为了简便，做者就起名字叫vue-press了。它负责建立项目和平常的更新博客。
复制代码

而后将项目克隆本地。按照官网的步骤，开始安装项目现有项目安装VuePress

若是项目与远端关联出现了问题。请看个人这篇教程GitHub与本地项目关联

第二步

此时有几个地方须要注意，是你们基本上都会踩的坑，此处能够避免你们时间的浪费：

若是下文中有没有讲清楚的地方，建议你们结合个人GitHub项目看--->传送门

1. .vuepress/config.js中的引用的图片加载不出来。（tips：要放在指定的publice目录下）

   

2. base问题：若是你打算用https://<仓库名>.github.io/来访问的话，base能够省略不写
   若是，你打算用https://<仓库名>.github.io/<项目名>/ 来访问的话，应该写成base：/<项目名>/
3. 关于根目录下的README.md指的是docs目录为根目录。（tips:想作vuepress首页的配置是在这里）

   

4. 关于actionLink的配置：/guide/ 你们结合上张截图与本张截图来参考 （tips：guide文件夹要有本身的README.md）

   

第三步

1. 在gitHub上建立第二个项目（方式同第一步），⚠️注意️：这里的项目名称是固定的 <username>.github.io(tips: 用gitPages服务器必需要这么写呢)

2. 这个项目的做用是负责展现。个人第一个项目是vue-press负责平常的更新，更新完毕之后就会提交到这个项目上。 你们应该知道deploy.sh这个文件。这个文件的做用就是，能够用快捷命令将 vue-press项目直接部署到 924950698.github.io项目上。它的文件内容以下：

3. 这里有一点须要注意：就是git push -f git@github.com:924950698/924950698.github.io.git master，这里做者是采用直接访问.github.io方式的。因此我用第一种。将注释的换成本身的github用户名，而后解开注释就能够了。

4. 记得在package.json中配置命令： "deploy": "bash deploy.sh" 这样就能够在命令行中直接npm run deploy来提交项目的变动了。（tips：若是push失败，检查本身的Github项目.github.io有没有在seeting中配置密钥，或者去看我上面分享的博客）

5. 此时项目中应该有一次commit的记录了。这步须要作的是在settings中开通gitPages

开通成功之后应该像上面截图同样，出现一个访问地址，这个地址就是你的博客地址。 做者从昨天晚上开始研究vuePress，今天中午作出了一个基本的demo，供你们参考一下： 924950698.github.io/

总结： 若是以为对你有帮助，请给做者一点小小的鼓励， 点个赞或者 收藏吧。 有须要沟通的请联系我： 微信（ wx9456d邮箱（ allan_liu986@163.com ）