怎么把使用vuepress搭建的博客部署到Github Pages

推荐在这里阅读效果更佳

背景

网上搜了不少教程，包括官网的教程,可是仍是费了一番功夫，

若是你使用自动化部署脚本部署不成功的话，能够参考个人这个笨方法

这是部署后的效果

前提

我假设你本地运行OK, 已经准备好要部署了

第一步

你的 vuepress 项目是否已经在github上的仓库下

若是是，请跳到第二步

若是不是，想在GitHub新建一个仓库，如图所示：

## 小坑
仓库名字要和config.js 里 的 base 属性值同样

好比你的仓库名字叫myBlog
base就是/myBlog/

1.1

建立好仓库之后，

git clone <你复制的地址>
把你的vuepress项目除了node_modules文件夹以外的文件所有复制到git clone下来的文件夹内

而后npm install 或者 yarn

在项目根目录新建文件.gitignore

让git 忽略 node_module下的全部文件和打包之后dist下的全部文件

1.2

1. npm run docs:dev 打包/打包后的文件在docs/.vuepress/dist文件夹下
2. git add -A
3. git commit -m 'init'
4. git push

第二步

新切一个gh-pages(名字随意)分支并切换到该分支，执行

git checkout -b gh-pages

该分支用来存打包后的文件

1. 先删除 除了.git文件夹 ， node_module文件夹 ， docs文件夹， .gitignore以外的文件
2. 再把docs/.vuepress/dist文件夹下的全部文件剪切到根目录
3. 再删除docs文件夹
4. git add -A
5. git commit -m 'deploy'
6. git push

第三步

此时github上你应该能够看到你的分支

点击settings ,而后往下拉，找到 GitHub Pages

在Source的下拉选中你的分支 出现 Your site is published at 网址 就说明发布成功了，访问这个网址就能够看到你的博客啦