折騰博客系列之博客搭建：Hexo+Github pages

2019 年 11 月 8 日
筆記

初衷：之前我習慣用印象筆記進行知識的收集和整理，雖然很好用，但終歸只適合輸入而不適合輸出。我需要的是一個更加開放的平台，在這上面可以輸出： 1.學習的收穫；2.生活的感想；3.有價值的分享，因此有了這個博客網站。

用hexo+github pages 可以很方便地搭建一個個人博客網站，不需要購買域名和服務器，只需要按部就班操作即可。我自己大概是花了兩三個小時搞定，主要是因為對git bash的使用不夠熟悉，因此走了一些彎路。實際上動作快的話半個小時就可以搞定。下面是對部署過程的大概介紹，以及必須注意的事項（劃重點，也就是所謂的「坑」）。由於本文參考了大量博客，所以在文末我會列出原文鏈接。

一.Github，Github pages ，Hexo

首先介紹一下這三個東西，有大概的了解、知道是什麼東西就可以。GitHub是一個面向開源及私有軟件項目的託管平台，而GIthub Pages則是github的一項功能，可以放置網頁文件到指定文件夾，然後給你一個專屬域名用於展示一些項目，現在大多用來開發和製作個人博客網站。它的好處在於域名和服務器都是免費提供的，並且沒有網站數量的限制。而Hexo 是一個快速、簡潔且高效的博客框架，它使用Markdown解析文章，在幾秒內，就可以利用靚麗的主題生成靜態網頁。（關於Hexo的詳細介紹，請看官方文檔 https://hexo.io/zh-cn/docs/ ，這裡就不展開了）。因此，可以說github和hexo是絕配。接下來，開始我們的工作。

二. 環境和必要準備

我個人的環境：win10，64bit 必要準備：你需要 （1）github賬號 ：前往https://github.com/ 官網註冊就好 （2）git ：最新版本的git（本文發表的時候是2.20.1版本），前往https://git-scm.com/ 官網下載並安裝。安裝完後前往git文件夾下打開git bash，運行以下命令：

git config --global user.name "username"  git config --global user.email "your mail"

註：將username替換為自己的github賬號名，將your mail替換為自己註冊github時綁定的郵箱。這一步非常重要，當時部署的時候我因為遺漏了這一步，導致後面報錯.

（3）node.js ：前往 https://nodejs.org/en/ 下載並安裝。這兩個的安裝比較簡單，一路next就好，不過我推薦還是修改一下路徑，盡量放在自己可以找到的位置。 （4）hexo ：打開git文件夾下的git bash，運行以下命令安裝hexo

npm install -g hexo-cli

依次運行以下命令進行hexo的初始化

$ hexo init <folder>  $ cd <folder>  $ npm install

註：請將上面代碼的<folder>替換成你自己想要的文件夾名字，以我為例，我想要在git文件夾下新建一個Myblog文件夾以存放站點文件，那麼我這裡的代碼就應該是

$ hexo init Myblog  $ cd  Myblog  $ npm install

成功之後，我們會在git文件夾下看到新建的Myblog文件夾，這個就是我們的站點文件夾，網站相關文件都存放在這裡。這裡順便介紹一下cd Myblog的作用，可以理解為「進入Myblog運行git bash」，你也可以在Myblog中右鍵運行git bash（如下圖），效果是一樣的。

在之後介紹的操作中，凡是需要輸入命令的，請確保你已經cd進自己的站點文件夾。

接着上面的代碼，我們繼續運行：

hexo server

這將在本地打開我們的網站，當提示」xxx is running at xxx「的時候，我們可以通過網址預覽我們的網站，想要切斷連接，只需要在命令行窗口按下ctrl+c。至此，hexo博客已經在本地搭建好了。接下來，我們要將hexo和github進行對接。

三. hexo與github 實現對接

1.建立倉庫

還記得我們之前註冊的github賬號嗎？現在，請進入github網站，並點擊頭像選擇your repository，我們現在需要創建一個倉庫（也就是repository）用於存放相關站點文件。按照下圖順序進行設置：

其中，Repository name也即是我們的倉庫名字，必須是 Github賬號名稱.github.io的格式。比如你的github名字是ccc，那麼倉庫名字必須是ccc.github.io 。

2.對接github 在git bash中運行以下命令，安裝 hexo-deployer-git 插件。

npm install hexo-deployer-git --save

運行以下命令，創建SSH key。（註：和上面一樣，請將your mail替換成github郵箱地址）

$ ssh-keygen -t rsa -C "your mail"

前往 C:UsersAdministrator.sshid_rsa.pub （注意，這只是大概位置。不同系統路徑可能不同，但是大同小異）打開id_rsa.pub文件（可以用記事本打開，但是推薦用sublime text）。複製文件中的全部內容，前往 https://github.com/settings/keys ，將剛才複製的內容粘貼在New SSH key 的文本框中。

前往站點目錄下（例如：git/ Myblog），打開_config.yml 文件，對文件末尾進行如下修改：

# Deployment  ## Docs: https://hexo.io/docs/deployment.html  deploy:      type: git      repo: [email protected]:username/username.github.io.git      branch: master

在這裡要注意，1）所有的冒號距離右邊的內容之間都有一個空格，如果沒有空格，則修改是無效的。2）和前面一樣，將usename替換成我們自己的github用戶名。 3）repo後面的地址，在舊版本的hexo中是http地址，但在新版本的hexo用的是ssh地址，我們統一用如上所示的ssh地址。有些博客由於沒有進行更新，在說明這個問題的時候依然用的是http地址，造成了一定程度上的誤導。

運行以下命令，對接並推送內容到github。

$ hexo g  $ hexo d

等待片刻，打開 https://<Github賬號名稱>.github.io （例如 https://ccc.github.io ) 即可進入你搭建好的個人博客網站了。當然，網站默認用的是landscape主題，比較難看，關於主題的美化和後期一些插件的添加，可以參考文章末尾貼出的鏈接。

PS：

這裡順便介紹一下常用的 hexo 命令： hexo clean ————————>清除緩存文件和已生成的靜態文件 hexo g 或者 hexo generate ————————>生成靜態文件 hexo d 或者hexo deploy ————————>生成靜態文件並部署到倉庫 hexo s 或者 hexo server —————————>在本地打開網站

一般來說，在對網站進行修改後，我們可以先用hexo g和hexo s 在本地預覽效果，如果效果符合預期的話再用hexo d 推送到 github。當然，可能會遇到本地打開和域名打開的效果不一致，這種情況下通常是因為 1. 沒有用hexo clean 清除緩存 2. 沒有清除瀏覽器緩存（ctrl+f5 ） 3.忘記用hexo d 將本地文件推送到github 4. 本地和線上的同步本身需要時間，所以上述方法如果無效，可以嘗試等幾分鐘，再打開網站就正常顯示了。

參考自： https://www.jianshu.com/p/3a05351a37dc https://www.simon96.online/2018/10/12/hexo-tutorial/