使用Hexo + GitHub Pages 搭建個人部落格
一.前言
之前是在CSDN上寫部落格的，但是無奈其廣告滿天飛，還有因為個人不太喜歡CSDN部落格裡的一些東西，加上看到很多技術大牛都有自己的個人部落格，於是乎！便想著搭建一個自己的個人部落格。其實之前寫部落格還是追求於有很多人來看，以滿足自己這樣的一個慾望，後來慢慢覺得寫部落格無非是記錄一下自己成長的歷程，別人看不看其實也是無關緊要的。
就在這各樣的原因驅使下，便開始了搭建個人部落格之路，第一次使用Hexo+碼雲搭建了一次部落格，但是因為其總是載入不了我的部落格樣式，沒辦法只好放棄了，但是過了幾天，之前的動力又突然出現了，所以就再一次踏上了搭建個人部落格之路，不過這次是GitHub+Hexo了，沒想到這次是一次成功，感覺良好，並沒有像搭建時感覺那麼複雜。想著或許也有人和我一樣，所以想著寫一篇簡單的搭建教程，和大家分享一下。
二.搭建前準備
1).安裝Git
1.首先是下載Git（此教程中所有軟體下載安裝僅以Mac為例），下載檔案的下載地址是：https://git-scm.com/download/mac ，開啟頁面找到這個位置，可以在這裡選擇自己所想要的下載版本。如下圖：
2.下載完成後，便開始安裝，安裝完成之後，可以在終端輸入命令檢視版本，如果顯示則說明安裝成功。至於Git的學習資料，大家可以去官網。命令如下：
git --version
3.然後建立一個全域性使用者名稱、全域性郵箱作為配置資訊，這裡的user.name是你Github上的名字，user.email也是你Github
git config --global user.name "***" git config --global user.email "***@example.com"
2).安裝Node
1.首先是下載node，開啟弄的官網：https://nodejs.org/en/download/ ，在官網頁面找到這個位置，選擇你所需要的系統及版本下載即可。如下圖：
2.在官網中下載完成之後，點選安裝，然後一路next即可。安裝完成後，開啟終端輸入node -v 會返回當前安裝的版本號，如下：
****MacBook-Pro:~ vincent$ node -v v10.11.0
然後再輸入npm -v 驗證，如下：
****MacBook-Pro:~ vincent$ npm -v 6.4.1
如以上，便是已安裝成功。
三.搭建 Hexo 部落格
1.安裝 Hexo，在電腦中新建一個 blog 資料夾，用來存放自己的部落格檔案，然後在終端進入你所建立的資料夾路徑下，執行以下程式碼（因為我這裡之前已經安裝了，就不展示結果了）：
npm install -g hexo-cli
2.初始化 Hexo，得到 hexo 資料夾，用於存放 Hexo 部落格所有的檔案，包括下面會講到的主題檔案，都是在終端執行以下程式碼：（如果無特別提示，以下程式碼基本都在終端視窗執行相關命令）
hexo init hexo
結果如圖：
3. 配置 Hexo，進入 hexo 資料夾安裝依賴，部署形成的檔案，分別執行以下程式碼：
cd hexo npm install hexo generate
結果如圖：
4. 啟動伺服器：執行以下程式碼，可以看到伺服器程式碼是 4000
hexo server
結果如下：
****MacBook-Pro:hexo vincent$ hexo server INFO Start processing INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
5. 開啟瀏覽器輸入http://localhost:4000/ ，結果如下圖，可以看到初始化的 Hexo 部落格已經搭建成功。
四.將初始化的 Hexo 部落格部署到 GitHub Pages
1. 在Github上，新建一個倉庫，倉庫名為：hexo.github.io ，如下圖所示：（這個倉庫的名稱必須嚴格按照 username.github.io 的格式來命名）
2. 配置 Git 個人資訊：開啟一個終端視窗，進入到blog路徑下，輸入下面的命令:
git config --global user.name " GitHub 使用者名稱 " git config --global user.email " GitHub 郵箱 "
3. 生成 SSH KEY，其實就是生成一個公鑰和金鑰，因為 GitHub 需要一個金鑰才能與本地相連線。執行以下命令，並連續按 3 次回車生成金鑰：
ssh-keygen -t rsa -C " 郵箱地址 "
因為我之前已經生成了這個金鑰，這裡就不展示了。
4.SSH KEY 生成之後會預設儲存在 /Users/電腦名使用者名稱/.ssh 目錄中，開啟這個目錄，開啟名為“id_rsa.pub”檔案，複製全部內容，即複製金鑰。
5.開啟 GitHub ，依次點選 頭像-->Settings-->SSH and GPG keys-->Add SSH key，將複製的金鑰貼上到 key 輸入框，最後點選 Add Key ，SSH KEY 配置成功，如下圖所示：
6.修改 hexo 資料夾下的 _config.yml 全域性配置檔案，修改 deploy 屬性，然後將本地 hexo 專案託管到 GitHub 上，如下圖所示：
deploy: type: git #部署的型別 repository: [email protected]:compassblog/compassblog.github.io.git # 倉庫地址 branch: master #分支名稱 message: hexo deploy #提交資訊
7. 執行下面的命令，安裝 hexo-deployer-git 外掛，快速把程式碼託管到 GitHub 上
npm install hexo-deployer-git --sava
執行結果如下：
****MacBook-Pro:hexo vincent$ npm install hexo-deployer-git --sava npm WARN deprecated [email protected]1.4.2: This package is no longer maintained + [email protected]0.3.1 added 31 packages from 36 contributors and audited 5870 packages in 9.085s found 1 low severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details
8.執行下面的程式碼命令，將 hexo 專案託管到 GitHub 上
hexo clean && hexo generate && hexo deploy
執行結果如下：
8.在瀏覽器中輸入 https://username.github.io/ 訪問，可以正常訪，說明部落格已經部署到 GitHub 上，如下圖所示：
五.配置個人部落格資訊
這一步是我覺得很重要的，因為我之前在搭建個人部落格時，很多教程只是截止到上面第四步而已，但是也有比較細心的人寫了後面步驟的文章，所以還是非常感謝的（後面我會貼出這兩篇文章的地址的）。
1.開啟部落格目錄，修改Hexo 全域性配置檔案 _config.yml，這個在第四大步的第六小步已經截圖了，這裡我只貼一下我搭建完成部署到GitHub上的此檔案內容（不過有一些私人資訊可能並不完全展示），內容如下：
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: 寒山道 subtitle: 合抱之木，生於毫末；九層之臺，起於累土；千里之行，始於足下。 description: Who has seen the wind? Neither you nor I ! keywords: author: vincent language: zh-Hans timezone: Asia/Shanghai # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: https://hsdy.github.io root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 7 order_by: -date # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: https://github.com/github的name/hsdy.github.io.git branch: master #分支名稱 message: hexo deploy #提交資訊 search: path: search.xml field: post format: html limit: 10000
友情提示：如果真的想搭建一個部落格，建議要動起手來，一步一步，只有真正行動了，才會發現自己錯在哪裡，本人就是在這樣的錯誤中慢慢搭建好部落格的。
特別注意：配置 *.yml 檔案有嚴格的格式要求，檔案裡所有的配置都是：冒號 空格 值，並且冒號是英文狀態下的輸入。而 *.yml 格式的檔案是 Java 模板引擎 thymeleaf 檔案，想了解的可以前往thymeleaf官網學習一下。
3.到這裡我們在終端進入到hexo目錄下，執行以下命令來本地啟動伺服器預覽部落格，然後去瀏覽器位址列訪問就會發現，Hexo 部落格的基本站點資訊已經配置完畢。
hexo server
六.切換部落格主題
1.安裝主題命令，在終端中執行到hexo專案目錄下執行：
- Next 主題官方下載地址：https://github.com/iissnan/hexo-theme-next
- Hexo 部落格其他主題下載地址：https://hexo.io/themes/
- Next 主題官方使用文件地址：http://theme-next.iissnan.com/
git clone https://github.com/theme-next/hexo-theme-next themes / next
2.修改 hexo 資料夾下的主配置檔案 _config.yml ，將 theme 屬性修改為 next ，修改程式碼程式碼如下：
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
4.開啟hexo目錄中的 themes 資料夾下的主題資料夾next，開啟主題配置檔案 _config.yml，如下圖所示：
5.在主題檔案中配置 Hexo 部落格演示外觀，預設的 Hexo 樣式是 Muse ，我這裡選的是 Pesces 樣式，如下所示：
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
6.配置網站底部基本資訊，具體配置程式碼如圖：
7.配置選單按鈕，在主題配置檔案中，找到 menu 屬性，具體配置如圖：
8.到這裡，網站基本資訊的配置基本完成，但這時候本地測試時我們會發現，開啟分類、標籤、關於等幾個頁面時會顯示 404 錯誤，這是因為我們還沒有建立相應的頁面。在終端中hexo資料夾目錄下的source資料夾目錄下執行下面的命令，建立相應的頁面即可，這時候我們會發現部落格目錄的 source 資料夾下已經生成了跳轉頁面的生成，如圖所示：
hexo new page 'categories' hexo new page 'tags' hexo new page 'about'
9.每一個分類選單都生成了一個 index.md 初始檔案，預設包含了 title 和 date 欄位，我們需要給每一 index.md 檔案新增上 type 欄位，如下圖所示：
10、配置搜尋選單
(1).安裝 hexo-generator-searchdb ，在hexo專案目錄下執行下面命令：
npm install hexo-generator-searchdb --save
(2).開啟全域性配置檔案，新增下面程式碼
search:
path: search.xml
field: post
format: html
limit: 10000
(3).開啟主題配置檔案，找到 local_search 屬性，開啟本地搜尋功能，如下圖所示：
注：至此，算是配置的差不多了，可以執行：hexo s命令來預覽部落格。
七.在 Hexo 部落格釋出文章並託管到 GitHub 上
1.這也是我覺得比較重要的一步，在hexo部落格目錄下執行如下命令，新建一篇部落格，執行完命令後可以發現在source/_posts資料夾下多了一個你所新建的md檔案。如下所示：
hexo new "Hello Hexo"
特別提示：Hexo 釋出的文章是 Markdown 格式的檔案，如沒使用過 Markdown 編輯器的同學，可以自行去學習一下 Markdown 語法，半小時基本可以掌握基本的語法了，推薦一個學習 Markdown 基本語法的網址：http://wowubuntu.com/markdown/
2.給文章新增分類和標籤，直接在所要編輯文章的頭部新增如下程式碼即可，多個分類和標籤可以使用英文狀態下的句號分隔。
--- title: tags date: 2018-10-19 12:23:21 type: tags categories: [Hexo] ---
3.本地啟動，在瀏覽器測試預覽文章，如圖所示：
4.新增閱讀全文按鈕：在文章的任意位置新增下面命令即可.
<!--more-->
5.所要發表的文章在本地預覽無誤後，在終端中執行以下命令，釋出到 GitHub Pages 上，或者在WebStorm中執行。
hexo clean && hexo g && hexo d
6、上傳成功後，在瀏覽器位址列直接訪問自己的域名，即可看到自己編寫的文章已經發布到了 GitHub 上。並且每次釋出文章到 GitHub 都需要在終端中執行下面的命令：
- Hexo clean
- Hexo g
- Hexo d
八.總結
至此，部落格也已經搭建的差不多了，筆者部落格地址是：https://zfy-zhang.github.io ， 之前也在網上搜索了不少關於hexo + github搭建部落格的檔案，但大多幫助不大，但是總有比較細心的博主，這裡比較感謝孔乙己 的兩篇博文，給我帶來了很大的幫助，所以我最後部落格的搭建成功還是非常感謝這位博主的。
搭建完部落格之後的感受，還是認為很多事情要自己親手去做，這樣才能發現更多的問題，紙上談兵永遠解決不了問題。就像看書一樣，不動筆的看書或許很多時候意義並不大，當你用筆記錄了你看書後的一些問題，或者做一個學習筆記，其效果也是完全不一樣的，這或許就是所謂的：好記性不如爛筆頭吧。
如果有讀者搭建部落格中遇到問題，可以聯絡筆者，聯絡方式在我個人部落格中的關於我中可見。
參考：基於 Hexo + GitHub Pages 搭建個人部落格，基於 Hexo + GitHub Pages 搭建個人部落格（二）
版權宣告：尊重博主原創文章，轉載請註明出處 https://www.cnblogs.com/hsdy