怎么把使用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 網址

就說明發布成功了，訪問這個網址就可以看到你的博客啦