GitHub Pages + Hexo 快速搭建個人網站
文章目錄
一、為什麼要搭建個人網站？
我從 18 年 6 月份決定開始寫部落格，在這半年時間中，為了找到了一個喜歡的寫作平臺，嘗試了各種網站，選來選去最後選擇了 CSDN ，總體來說是最符合我的需求的。
然而，使用別人的平臺，總會有很多限制，總有不順心的地方，而且我很擔心哪天我辛辛苦苦寫的文章都沒了，所以，還是決定要搭一個自己的網站，畢竟「金窩銀窩不如自己的狗窩」，有了自己的網站後，想怎麼折騰就怎麼折騰~~
目前比較主流且比較節約成本的方式，就是藉助 GitHub 和部落格框架來實現，在這裡我選擇的是 GitHub Pages + Hexo 的框架，搭建過程中遇到了很多問題，在此詳細記錄一下。
二、為什麼選擇 GitHub Pages 和 Hexo ？
1、GitHub Pages
大家都知道，GitHub 是各種開源及私有軟體專案的託管平臺，目前已經擁有超過千萬的開發者使用者，也是所謂的全球最大的同性戀交友網站（o(╯□╰)o）。
同時，使用 GitHub Pages 可以把我們託管到 GitHub 上的靜態網站展示出來，而且還良心的給我們提供了一個免費的 HTTP 的 github 二級域名。
2018 年 5 月 1 日，GitHub 正式宣佈 GitHub Pages (*.github.io) 支援自定義域名 HTTPS，可以自動幫你申請 Let’s Encrypt 的 SSL 證書並自動部署、續期，太良心了，有木有？
也就是說，我們通過 github 可以完全免費的享受從建站到 SSL 的全套服務，而且訪問速度也不賴（如果你不願意使用 GitHub 給的 *.github.io 域名，那隻需要花錢買個域名就可以了）。
要說明的一點是，只限純靜態網站（僅 html + css + js），對於寫部落格來說，已經完全夠用了。
2、Hexo
Hexo 是一個快速、簡潔且高效的部落格框架，使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁，然後釋出到 github 中，即可在我們的網頁中展示出來。
當然還有其它很多優秀的部落格框架，但是我還沒試用過其它的，所以本文只討論 Hexo。
三、GitHub 建立個人倉庫存放網站資源
- 登入 GitHub（如果沒有帳號要先註冊）；
- 在右上角點選
New repository建立新倉庫，倉庫名應該為：使用者名稱.github.io這裡的使用者名稱必須用你的 GitHub 帳號名稱，否則後面會報錯，比如我的倉庫名為：
四、Hexo 環境準備
在安裝 Hexo 之前，要先安裝 Node.js 和 Git。
1、安裝 Node.js
- 到官網下載 Node.js 的安裝包，根據自己的系統來選擇；
- 我用的是 windows .msi 版本的，下載後直接雙擊按提示安裝即可，會自動安裝好 npm ，並配置好環境變數；
- 安裝完成後，開啟 cmd 命令列視窗，輸入 node -v 和 npm -v 檢查是否安裝成功。
2、安裝並配置 Git
-
到官網下載 Git ，按提示安裝即可；
-
在 cmd 命令列輸入 git --version 檢查是否安裝成功；
-
安裝成功後，通過以下命令繫結 GitHub 帳號：
在開始選單中搜索 git，開啟 Git Bash 視窗，設定 user.name 和 user.email ：
git config --global user.name “你的 GitHub 使用者名稱”
git config --global user.email “你的 GitHub 註冊郵箱”
3、設定 GitHub 公鑰
GitHub 要求每次推送程式碼都是合法使用者，所以每次推送都需要輸入賬號密碼驗證推送使用者是否是合法使用者，為了省去每次輸入密碼的步驟，採用 ssh 來實現。
在本地通過 rsa 非對稱加密方式生成金鑰對，然後把私鑰放置在本地電腦，公鑰放置在GitHub上，當你推送時，git 就會匹配你的私鑰跟 GitHub 上面的公鑰是否配對，若匹配就認為你是合法使用者，允許推送，而不需要手動輸入密碼，這樣可以保證每次的推送都是正確合法的。
-
本地生成 ssh 金鑰檔案：
ssh-keygen -t rsa -C “你的GitHub註冊郵箱”
-
然後連續三個回車之後，找到生成的 .ssh 資料夾中的 id_rsa.pub 金鑰檔案，複製其中全部內容；
-
開啟 GitHub 設定 SSH key 頁面，點選 new SSH Key，把剛才複製的內容貼上到文字框中，儲存（title 隨便寫）；
-
在 Git Bash 視窗中輸入
ssh [email protected]，若出現類似下面資訊，說明公鑰設定成功：
4、安裝 Hexo
Hexo 就是我們的個人部落格網站的框架，先在本地電腦建立一個資料夾，可以命名為 Blog，用於存放 Hexo 框架的內容和以後你釋出的網頁等資源。
-
進入剛才建立的 Blog 資料夾中，按住 shift 鍵，右擊選擇
在此處開啟命令視窗； -
輸入如下命令，使用 npm 安裝Hexo ：
npm install -g hexo-cli
耐心等待安裝完成即可。
五、使用 Hexo 生成併發佈網站
1、初始化部落格
在 Blog 資料夾中執行下面的命令（其中 blog 是存放具體網站資訊的資料夾，名字可以自定義）：
hexo init blog
cd blog
2、新建文章並在本地預覽
為了檢測網站雛形，在 blog 資料夾中按順序分別輸入以下三條命令：
hexo new test_my_site
hexo g
hexo s
以上命令分別代表建立一篇新文章、生成頁面、生成預覽資訊。
完成後，開啟瀏覽器輸入地址 localhost:4000
即可以在本地看到我們剛才建立的部落格，預設是下面這樣：
3、釋出網站到 GitHub
上面我們只是在本地預覽，接下來要釋出到 GitHub 上，就可以通過 xxx.github.io 的域名來訪問。
修改站點配置檔案
在釋出之前要先修改一下 blog 目錄下的站點配置檔案 _config.yml ，在最後 deploy 部分補充如下資訊：
deploy:
type: git
repo: [email protected]:ivyli2019/ivyli2019.github.io.git
branch: master
其中 repo 要填入你之前在 GitHub 上建立的倉庫的完整路徑，儲存檔案。
這一步其實是把 Hexo 與 GitHub 關聯起來，使釋出命令指向我們的 GigHub 倉庫。
安裝 Git 部署外掛
在 cmd 命令列視窗中，輸入如下命令：
npm install hexo-deployer-git --save
釋出網站
在 blog 目錄下，分別輸入如下三條命令：
hexo clean
hexo g
hexo d
其中 clean 用於清除快取，g 是 generate 生成網站資源，d 就是 deploy 部署網站。
然後在瀏覽器位址列輸入你的個人網站的倉庫地址，即 http://xxxx.github.io
你就會發現你的部落格已經可以在網路上被訪問了，大功告成！