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

发布时间:2020-11-17 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了怎么把使用vuepress搭建的博客部署到Github Pages前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

推荐在这里阅读效果更佳

背景

网上搜了很多教程,包括官网的教程,但是还是费了一番功夫,

如果你使用自动化部署脚本部署不成功的话,可以参考我的这个笨方法

这是部署后的效果

前提

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

第一步

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

如果是,请跳到第二步

如果不是,想在GitHub新建一个仓库,如图所示:

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

小坑

仓库名字要和config.js 里 的 base 属性值一样

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

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

1.1

创建好仓库以后,

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

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

然后npm install 或者 yarn

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

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

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

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

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

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

在Source的下拉选中你的分支

出现 Your site is published at 网址

就说明发布成功了,访问这个网址就可以看到你的博客啦

总结


以上是前端之家为你收集整理的怎么把使用vuepress搭建的博客部署到Github Pages全部内容,希望文章能够帮你解决怎么把使用vuepress搭建的博客部署到Github Pages所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。