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

推荐在这里阅读效果更佳

背景

网上搜了很多教程,包括官网的教程,但是还是费了一番功夫,
如果你使用自动化部署脚本部署不成功的话,可以参考我的这个笨方法
这是部署后的效果

前提

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

第一步

你的 vuepress 项目是否已经在github上的仓库下
如果是,请跳到第二步
如果不是,想在GitHub新建一个仓库,如图所示:
1145717-20190819135429857-66247743.png

## 小坑
仓库名字要和config.js 里 的 base 属性值一样
1145717-20190819135519118-1716823802.png

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

1.1

创建好仓库以后,
1145717-20190819135542090-2081814040.png

git clone
把你的vuepress项目除了node_modules文件夹之外的文件全部复制到git clone下来的文件夹内
然后npm install 或者 yarn
在项目根目录新建文件.gitignore
1145717-20190819135552420-2039259273.png

让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上你应该可以看到你的分支
1145717-20190819135604476-745760254.png

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

1145717-20190819135611985-1578275975.png

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

转载于:https://www.cnblogs.com/LHLVS/p/11376732.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值