[TOC] ## 一、說明 本系列文章將會詳細說明使用 `Hexo` + `github pages` 來搭建個人部落格，並對主題進行配置，然後使用 `travis ci` 來進行自動化部署的全過程。 搭建一個賞心悅目的部落格，寫文章和閱讀也會更加舒適，一次搭建，終生使用，而且還全程免費，何樂而不為呢。 通過本系列文章的學習，你將收穫一個免費且漂亮的個人部落格，並熟悉搭建、寫作、部署的全流程以及其中一些很好用的工具。 ## 二、成品展示 [線上 Demo](https://mfrank2016.github.io/breeze-blog/)      這只是其中的一個主題，如果不喜歡，也可以很方便的切換其它主題。 `hexo` 主題相當豐富，可以在[這裡](https://hexo.io/themes/)選擇喜歡的主題進行切換即可。 ## 三、前期準備 在開始搭建之前，需要準備以下幾樣東西： * 本地安裝 `node.js` * 本地安裝 `git` * 一個 `github` 賬號 * 建立一個 `github` 倉庫 * 一個 `travis ci` 賬號 已經有過安裝經驗的同學，可以根據自己情況選擇性的跳過部分章節。 ### 本地安裝 node.js `windows` 系統可以在[這裡](https://nodejs.org/zh-cn/download/)下載 `installer` 安裝包進行安裝。 `mac` 系統可以在[這裡](https://nodejs.org/zh-cn/download/)下載 `pkg` 安裝包，也可以使用 `homebrew` 進行安裝： ```bash brew install node ``` 然後在命令列輸入以下命令來驗證是否正確安裝: ```bash node -v ``` ### 本地安裝 git `windows` 系統可以從[這裡](https://gitforwindows.org/)下載安裝包後進行安裝。 `mac` 系統可以從[這裡](https://sourceforge.net/projects/git-osx-installer/)下載安裝包進行安裝。 也可以使用 `homebrew` 進行安裝： ```bash brew install git ``` 輸入以下命令來檢視是否正確安裝好了 `git` ： ```bash git --version ``` 然後設定自己的使用者名稱和郵箱： ```bash git config --global user.name "你的使用者名稱" git config --global user.email "你的公司或個人郵箱" ``` ### github 賬號 首先，需要註冊一個 `github` 賬號，[點選這裡](https://github.com/join?source=header-home)。 填寫好使用者名稱和密碼，驗證完成後，便可以將一個 `github` 賬號收入囊中。 建立好賬號之後，我們還需要把我們本地的 `SSH Key` 新增到 `github` 中去，這樣我們之後才能有許可權將原生代碼推送到 `github` 中。 先本地生成一對 `RSA` 金鑰： ```bash ssh-keygen -t rsa -b 4096 -C "你的郵箱" ``` 然後用食指敲擊你的回車鍵三次，記住，要用食指，但別問為什麼。 找到你剛才建立的金鑰，`windows` 使用者可以在 `C://使用者//admin//.ssh` 目錄下查詢，mac 使用者可以在 `~/.ssh` 目錄下找到。複製 `id_rsa.pub` 檔案裡的資訊，然後到[這裡](https://github.com/settings/keys)新增新的 `SSHKEY` 。   把我們剛才的 `key` 複製進行後儲存即可。 ### 建立倉庫 點選[這裡](https://github.com/new)，建立一個新的倉庫。  倉庫名稱可以隨便取，比如：`blog`、`my-blog`，隨便取一個就好。倉庫說明也可以隨便寫，可以大概描述一下你這個倉庫是做什麼的。可以參考一下[我的倉庫](https://github.com/MFrank2016/breeze-blog) 然後把倉庫地址記下來，是下圖中箭頭標示的 `git` 開頭的地址，後面需要用到。  建立好倉庫之後，就可以進行下一步了。 ### travis ci 賬號 `travis ci` 賬號是跟 `github` 賬號關聯的，所以需要先建立好 `github` 賬號，建立好之後，點選[這裡](https://travis-ci.org/signin)進行賬號關聯登陸。 在設定裡進行一次[賬戶同步](https://travis-ci.org/account/repositories)：  同步完後重新整理一下頁面，剛才建立的倉庫應該就會出現在這裡：  ## 四、安裝 Hexo `hexo` 是一款靜態網站生成工具，可以根據設定的主題樣式和配置檔案，來生成豐富多彩的網頁，通常配置檔案設定好之後不需要經常修改，我們只需要負責寫好我們的博文，寫好之後就能使用命令一鍵生成網站，而且還可以為所欲為的切換主題，可以說是寫部落格的一大利器。 `hexo` 的安裝其實很簡單，只需要輸入以下咒語： ```bash npm install -g hexo-cli ``` 然後輕輕的敲擊你的回車鍵，`hexo` 便能成功的安裝在你的電腦中。 可以使用以下命令進行驗證： ```bash hexo -v ``` ## 五、使用 hexo 搭建部落格 選擇一個準備放置部落格網站的目錄，然後使用以下命令來初始化一個專案： ```bash hexo init breeze-blog cd breeze-blog npm install ``` 該命令將會在當前目錄下，生成一個名為 `breeze-blog` 的新目錄，當然，你可以把這個名字換成任何你想要的名字，並將 `hexo` 的初始化檔案寫入其中。 新建完成後，`breeze-blog` 資料夾的目錄如下： ```bash . ├── _config.yml ├── package.json ├── node_modules ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes ``` `_config.yml` 是配置檔案，裡面有很多可以配置的資料，這裡暫時不多介紹，後面的文章裡會進行詳細說明。 `package.json` 是應用程式資訊，通常不需要關心。 `node_modules` 用來存放 `node` 相關的模組，通常不需要關心。 `scaffolds` 裡面是模版檔案，也就是每次新建文章時，都會根據模版檔案來建立對應的 `md` 檔案，這一點也會在後續的文章裡進行詳細介紹。 `source` 是資原始檔夾，用來存放使用者資源的地方。除 `_posts` 資料夾之外，開頭命名為 _ (下劃線)的檔案 / 資料夾和隱藏的檔案將會被忽略。 `theme` 是主題資料夾，每個主題的配置都會有些不一樣，需要根據具體主題情況來定，後續介紹主題的文章裡會有說明。 在 `breeze-blog` 目錄下使用以下命令來執行我們的部落格： ```bash hexo server ``` 在預設情況下，服務會使用 `4000` 埠，如果已經被佔用，也可以新增 `-p` 引數來換用其它埠： ```bash hexo server -p 8080 ``` 開啟 `http://localhost:4000` 即可訪問我們生成的網站了。  這樣，我們的部落格就搭建起來了。 ## 六、部署到 github pages `github pages` 可以理解為 ~~gayhub~~ `github` 提供的免費網頁空間，可以用來存放你的靜態網頁檔案，並通過 `https://使用者名稱.github.io/專案名/` 的方式來訪問，比如我新建立的 `blog` 地址就是：`https://mfrank2016.github.io/breeze-blog/`。 利用 `github pages` 就能建立我們的免費部落格站點了，至於為什麼要使用免費站點，而不選擇購買伺服器來搭建，是因為根據之前使用伺服器經常忘記續費，導致部落格資料丟失，損失慘重。`github` 已經穩定運行了很多年，是全球最大的 ~~同性交友網站~~ 開發者網站，他們的服務值得信賴。而且是免費的。 我們之前已經註冊好 `github` 的賬號並建立好了對應的倉庫，本地也安裝好了 `git` ，現在讓我們來把他們利用起來。（如果還沒有完成的同學可以往上面翻翻，先完成前面的步驟） > 注意：有兩種型別的 `github pages`，一種是使用 `使用者名稱.github.io` 作為專案名，一種是使用其它名稱。雖然看起來只是名字不一樣，但兩種方式其實是有差異的，前一種方式裡，網頁靜態檔案只能存放在 master 分支，所以如果想要把部落格原始檔也存到同一個倉庫，必須使用其它分支來存放，相應的 travis ci 監聽和推送的分支也需要修改，當然也可以使用另一個新的倉庫來存放。後一種方式則沒這個限制，通常使用名為 `gh-pages` 作為分支名，`Hexo` 內預設設定的分支也是叫這個名字。這裡我們使用的是後一種方案，即原始檔和生成的網頁靜態檔案存放在同一個倉庫，原始檔在 `master` 分支，靜態檔案在 `gh-pages` 分支。 首先，我們將本地的檔案推送到 `github` 上。 在 `breeze-blog` 目錄下，初始化 `git` 倉庫，將現有檔案新增到 `git` 倉庫中，並建立 `gh-pages` 分支： ```bash cd breeze-blog git init git add . git commit -am"init blog" git remote add origin 倉庫地址 ``` 倉庫地址是前面我們建立倉庫時說過的地址，比如我的地址是： `[email protected]:MFrank2016/breeze-blog.git` ，把它複製到這裡來替換即可。 然後我們使用最後一句咒語，把程式碼推送到倉庫中去。 ```bash git push -u origin master ``` 如果你的倉庫原來已經有資料了，可以新增 -f 引數來強制推送，但這樣會使得你原來的資料丟失，所以慎用。 ```bash git push -f -u origin master ``` 然後建立一個新的本地分支 `gh-pages`，並關聯遠端分支： ```bash git checkout -b gh-pages git push -u origin gh-pages ``` ⚠️不要改用其它分支名。 然後在專案 `settings` 頁面裡開啟 `github pages`：   這裡要選擇 `gh-pages` 分支，不要選 `master` 分支。 然後我們修改一下 `hexo` 的配置檔案(`_config.yml`)，找到對應的地方進行修改，指定我們的倉庫資訊，並修改 `root` 和 `url` 資訊。 ```bash url: https://mfrank2016.github.io/ root: /breeze-blog/ deploy: type: 'git' repo: [email protected]:MFrank2016/breeze-blog branch: gh-pages ``` 把這裡的 `repo` 地址修改為你的倉庫地址即可。 安裝 `hexo-deployer-git`： ```bash cd breeze-blog npm install hexo-deployer-git --save ``` 萬事具備，發車！ ```bash hexo clean && hexo generate hexo deploy ``` 執行完成後，我們的部落格檔案就順利部署到 `github pages` 上了，現在我們開啟下面網址來檢視我們的部落格效果： ```bash https://使用者名稱.github.io/專案名/ ``` 之後每次我們新增或修改完本地檔案後，使用： ```bash hexo clean && hexo g -d ``` 即可重新生成專案檔案，並推送到 `github` 專案的 `gh-pages` 分支，為了備份資料，也方便我們在不同裝置上進行編輯，最好將我們修改的檔案推送到 `master` 分支進行儲存： ```bash git checkout master git add . git commit -am "這裡可以寫一下修改的備註資訊" git push ``` ## 七、使用 travis ci 進行自動化部署 如果我們每次都按前面的方式進行操作，也會略顯麻煩，使用 `travis ci` 後，可以將前面部署的步驟自動化，我們只需要將本地修改的檔案推送到 `github` 倉庫，就會觸發 `travis ci` 的自動部署。 `travis ci` 的配置也很簡單，而且只需要配置一次，之後就不需要修改了。 首先，我們需要把*_config.yml*檔案裡的*repo*資訊註釋一下，不需要在配置檔案裡指定倉庫地址，`travis ci` 會直接在其監聽專案上進行部署。 ```yml deploy: type: 'git' # repo: [email protected]:MFrank2016/breeze-blog branch: gh-pages ``` 在本地部落格目錄下建立一個名為 `.travis.yml` 的檔案，與 `_config.yml` 要在同級目錄。 然後在檔案中寫入以下內容： ```yml sudo: false language: node_js node_js: - 12 cache: npm branches: only: - master # build master branch only script: - hexo generate deploy: provider: pages skip-cleanup: true github-token: $GH_TOKEN keep-history: true on: branch: master local-dir: public ``` 這裡沒有任何東西需要修改，直接複製貼上即可。 接下來，需要在 `travis` 裡配置一個環境變數，`GH_TOKEN` 。 前面我們已經將 `travis` 關聯了 `github` 賬號，並同步了專案，如果操作正確，[這裡](https://travis-ci.org/dashboard)應該會出現我們的倉庫資訊。    這裡的 `access token` 是指 `github token`，可以在[這裡](https://github.com/settings/tokens)獲取：   選好後，點選 `generate` 即可生成一個新的 `access token`，這個 `token` 即是用於許可權驗證的，好好儲存，不要洩露，千萬不要直接寫到 `config` 檔案裡，而且之後是無法進行檢視的，所以需要記錄在一個安全的地方。 建立好之後，把這個 `token` 填寫到前面的 `travis ci` 的專案環境變數中儲存，這樣一切就準備好了。 現在讓我們在本地建立一篇新的部落格，然後推送到遠端倉庫： ```bash cd breeze-blog git checkout master hexo new "my first blog" git add . git commit -am"add a new blog" git push ``` 然後我們可以在 `travis ci` 中看到構建過程被觸發了，等待一會即可完成部署，然後再開啟我們的部落格，檢視一下我們新生成的文章是否已經在上面了。（瀏覽器有快取，所以可能需要重新整理幾次才有效果） ## 小結 整個過程看起來有些麻煩，距上次部署部落格已經有很長時間了，我也是摸索了幾次後才大致掌握，因為不想每次都重新來一遍，所以還是記錄一下為好，利人利己。 寫部落格是一種生活態度，記錄並整理生活和程式設計中的心得和經驗並分享，在漫漫人生路上留下自己一路走來的印記，這樣以後再回過頭來看時，就不會感慨時間都去哪了。如果能因此遇到有共同興趣愛好的人，那也將會是人生裡的不錯點綴。 這裡只是完成了部落格搭建和自動化部署的過程，關於部落格的配置和主題的配置以及部落格寫作的一些技巧會在後面的文章中進行說明，敬請關注～ ![微信公眾號](https://i.loli.net/2020/05/02/AfHOY5RXge9t