vuepress官網vuepress是尤大開發來寫文件的靜態頁面。可以用Markdown 語法，並且也可以使用vue模組化的方式開發頁面。

vuepress-theme-reco是另外的開發者開發的 vuepress主題。本文將介紹依賴這個主題，構建GitHub pages靜態部落格的詳細過程

提前說明：本過程比較詳細，相當於手把手的教，針對於不熟悉vuepress的人介紹的，大佬不喜勿噴。

第一步：新建一個GitHub倉庫

1. 倉庫名隨便取，不用以 username.github.io 這種方式。

2. 倉庫不要選 private ，不然不能釋出為GitHub pages。

3. 選擇新增一個README檔案，雖然沒什麼作用，因為後面要覆蓋。

第二步：克隆新建倉庫的git地址，初始化專案

　　1. cmd 中執行 git clone 剛才複製的 git 地址

　　2. 推薦使用yarn 來進行安裝，不然有可能會有其它不可未知的錯誤

　　3. 執行yarn global add @vuepress-reco/theme-cli 安裝全域性主題腳手架。安裝完成後：

　　4. 執行theme-cli init 然後會提示你選擇一些東西：

注意：最後一個讓選擇主頁是什麼樣式的時候，有三種主題 blog，doc，afternoon-grocery。

我三個都試了一下，

• blog與doc感覺基本上一樣
• afternoon-grocery 目錄和vuepress標準的目錄一致，文章都放到view資料夾裡
• 和前兩個相比，多了選擇顏色主題的功能（並非明暗）；但是首頁右邊分類 個人認為沒有 blog或者doc的好看。
• 還多了個全屏的功能　

所以我選擇了blog 主題。怎麼選擇就看你自己了。

注意：如果 yarn 過程出現錯誤，比如類似的：

需要先把 yarn.lock 刪掉 再重新安裝。那裡面的庫路徑有問題。

　　5. 如果是安裝的blog或者doc，那麼安裝完成之後，如果package.json中的dev項有 --open --host localhost，要改成vuepress dev .不然執行不起。注意有個點，不過這個點可有可無。

　　6. 改完之後，執行yarn dev 等待編譯完成，就能看到本地執行的 url 地址，開啟即可看到頁面了

第三步：推到GitHub 自動轉換成GitHub pages。步驟是blog主題

在上傳程式碼到GitHub之前，需要改一些程式碼，不然上傳上去 在GitHub pages裡顯示的就是404

1. 修改程式碼，push程式碼

（1）根目錄 .vuepress 下的config.js 中的dest項去掉，使用預設的打包後的路徑，及：.vuepress/dist。不過這項不重要，用自定義的也可以，後面新建指令碼的時候，路徑對上即可

（2）在config.js 中 和剛才去掉的dest同級的地方加上 “base”:”/Blogs/” 這個Blogs 不能亂取，必須是你當前GitHub倉庫名，並且前後都有 / 斜槓！！！不然打包後靜態資源路徑會有問題。

（3） 推送程式碼到GitHub倉庫中：

git add . 
git commit -m’init’
git push

2. 新建分支

（1）這時候，可以在GitHub的倉庫中，看到最新提交的程式碼，然後切換到setting選項

（2）下拉到下面GitHub Pages項，如果這時候Soure裡面是none，切換成master。點選save即可。

（3）頁面自動重新整理後，再拉到這個地方，就能看到已經自動釋出好了

（4）但是這時候點選連結，開啟的卻是404，這是什麼原因呢？仔細看404頁面提示的原因，原來是GitHub pages 必須要有index.html，由於vuepress是Markdown語法沒有html，所以顯示不了。

（5）我們知道打包之後的靜態檔案專案就有html檔案，所以只需要用另外的分支用來存放打包後的靜態檔案，html檔案符合GitHub pages的規則，這樣就能正確的顯示了。

（6）GitHub上 點選master分支，輸入新分支名並create branch 這時候會自動切換到blogs分支上，並且內容和master一樣。blogs分支名隨便取，只要後面釋出的時候，腳本里面的分支名對應上即可

3. 新建指令碼，自動推送到blog分支

（1）本地master分支新建一個 deploy.sh檔案 名字隨意，後面執行的時候名稱一致即可，字尾是shell的字尾名 .sh ;

#確保指令碼丟擲遇到的錯誤
set-e

#生成靜態檔案
yarnbuild

#進入生成的資料夾，這裡是預設的路徑，可以自定義
cd.vuepress/dist

#如果是釋出到自定義域名
#echo'www.isunbeam.cn'>CNAME

gitinit
gitadd-A
gitcommit-m'deploy'

#如果釋出到https://<USERNAME>.github.io/<REPO>
#[email protected]:<USERNAME>/<REPO>.gitmaster:<BranchName>
[email protected]:isunbeam/Blogs.gitmaster:blogs

cd-

#最後釋出的時候執行bashdeploy.sh

（2） 注意 git push 的時候，分支名一定要和GitHub上新建的分支名一樣。

（3）執行bash deploy.sh。執行完成，到GitHub的倉庫裡，切換到setting，然後拉到GitHub Pages 這時候已經發布了，但是開啟連結還是404，原因就是作為github pages的分支不正確，預設是master，下面切換成blogs，點選save即可

（4）等待頁面重新整理後，再次開啟即可看到。如果還是沒有，強制重新整理一下 ctrl + f5。可能有快取。

到此，你的部落格已經正常釋出到GitHub pages了。\(^o^)/~

下面介紹怎麼發表部落格：

先說說目錄：該目錄是選擇的blog主題

（1） dist 是打包後的靜態檔案

（2） public 是存放圖片等內容的

（3） config.js 是最重要的，主題的配置項

（4） blogs 是發表部落格文章的地方，第二級目錄表示分類，第三級目錄表示年份，應該是用來做時間線用的，應該不能改成其它的內容。然後年份裡面就是真正的部落格頁面，是 xxx.md 一般是以時間來命名檔案的。

　　比如我現在要新建一個部落格：

　　（a）在blogs 裡新建一個 2020 名稱的資料夾，裡面再新建一個 090801.md 的md文件，01表示0908號第一篇，02表示第二篇依此類推。寫好了之後儲存，直接重新整理頁面或者重啟專案，即可看到新增的部落格。

　　（b）在寫的 md 裡面的 date 日期項，感覺不能精確到時分秒，不然時間軸 文章的日期就會多一天。比如date 是寫的 2020-09-08 18:08:08 ，時間軸中就會被解析成 2020年的9月9號發表的。所以建議不用時分秒。

　　 （c）如果想寫的部落格有摘要，在正文前加上<!-- more --> 這以上的程式碼就會被解析成摘要。類似下面的文章摘要

（5） docs 是寫文件的地方，相當於是 左邊是大標題，右邊是大標題對應的描述內容。第二級目錄表示文件分類，和大標題的第一個內容，裡面的README.md就是內容詳情。然後裡面的其餘 .md 文件是另外的大標題的詳情，然後要想新增後生效

　　比如我現在要新建一個文件說明：

　　（a）docs下面新建一個資料夾testdoc，在這個資料夾裡再新建一個READEME.md作為大標題1的內容頁，再建一個test1.md表示大標題2的內容頁

　　（b）每個內容頁裡隨意編寫內容，但是頂部需要有Front Matter配置，然後再寫md文件。寫好後，在 config.js 中去配置

　　（c）Docs配置項的items裡面加上

{
    "text": "test",
    "link": "/docs/testdoc/"
}

　　（d）sidebar的配置項里加上。陣列第一項要為空

"/docs/testdoc/":[
"",
"test1"
]

（6） 配置完之後，會自動構建程式碼，然後強制重新整理一下頁面 ctrl + f5 。如果未生效，就重新啟動一下專案就可以看到最新的文件了。

自定義域名

如果有人還想用自己的域名，不用 <username>.github.io/Blogs/ 這種域名，那麼可以按下面的步驟來實現

第一步：把 config.js 中的 base 項註釋掉，這樣預設靜態檔案根目錄是 / ，不然釋出之後會出現靜態檔案路徑不正確的問題

第二步：把 deploy.sh 的 echo 'xxx' > CNAME 這一項放開，並且 把 xxx 換成 自己的域名，比如我是 www.isunbeam.cn 就是 echo 'www.isunbeam.cn' > CNAME

第三步：儲存。然後重新構建專案 bash deploy.sh 即可

第四步：域名解析

　　（1） 新建一個 主機值為www，記錄型別為 CNAME，記錄值為 <username>.github.io 的解析

第五步： 在 GitHub 倉庫的 setting 中，GitHub pages選項裡 有一個Custom domain，把它更新為你剛才 CNAME解析的 www.xxx.xx 。點選save即可。

到此，自定義域名的靜態部落格就完整搭建成功了，其餘的就剩看 vuepress-theme-reco的文件啦。O(∩_∩)O哈哈~

如果有想自己折騰的，也可以自己用元件的方式，自定義主題。(#^.^#)