作者：玩世不恭的Coder
時間：2020-03-08
說明：本文爲原創文章，未經允許不可轉載，轉載前請聯繫作者
一文詳解Hexo+Github小白建站
前言
GitHub是一個面向開源及私有軟件項目的託管平臺，也是版本控制庫因爲只支持git 作爲唯一的版本庫格式進行託管，故名gitHub。此後，2018年6月4日，微軟宣佈，通過75億美元的股票交易收購代碼託管平臺GitHub。Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
不會使用Markdown的技術員不是一個好的技術員，其功能及其強大，大大加快了寫作及排版的速度，同時完美的解決了江湖上令人頭闊疼的傳言：寫文一小時，排版兩小時。（小聲嗶嗶：該訂閱號中所有的文章都是基於Markdown來進行編寫和排版的哦！）有時間的話，整理一篇關於我多年以來使用Markdown的經驗，以及該文的排版樣式等等。
Github+Hexo的官網：
Github：https://github.com/
Hexo：https://hexo.io/zh-cn/docs/
作爲一位Coder，必定需要搭建一個屬於自己的博客站點，來記錄自己學習的過程以及所走過的坑。網絡平臺上也有各種各樣的建站方法，例如WordPress、emlog、Typecho等等。但是這些對於一個有着極其建站慾望的小白來說無疑是難如上青天，對於懶癌患者來說也是一大痛病，通過海量信息的層層篩選，濤濤最終發現Hexo+Github能夠很好的滿足大多數小白的要求，既簡單又美觀，極其適合小白選手，使用它來搭建屬於自己的個人站點再好不過了。如果你有也有建站的想法的話，那麼以下內容將記錄了我之前搭建Hexo的過程，或許能夠幫助到你，久而久之，你還會發現其中還有很多有意思的美化操作。（日後再聊）
以下的圖文並茂的搭建過程是針對純小白所實現的，例如github倉庫的創建、環境變量的配置、git終端等一些基礎操作都有較爲詳細的說明，按照流程一步步來，分分鐘建站毫無壓力。
一、搭建環境
環境介紹：
- windows系統：系統根據自己的實際需要準備即可，mac、linux皆可，爲了服務更多的讀者，本文主要介紹的是在windows系統下搭建。
- git：安裝之後方便使用各種命令，在github上直接使用clone命令秒速下載，在發佈文章到服務器時也能方便的使用
hexo clean、hexo g、hexo d等命令。 - node.js：一個Javascript運行環境，網站的搭建必須建立在這個框架之上。
- Hexo：使用命令可以直接將Hexo生成的靜態資源存儲到Github上，然後使用自己的Github賬戶即可訪問。
安裝：
Git的安裝：
你可在git官網中根據自己的需要進行下載：https://git-scm.com/。打開之後你將看到如下內容，無腦download for Windows：
將其下載到指定的磁盤，然後Windows系統下傻瓜式安裝即可。安裝好後我們打開cmd終端（win+r -> 輸入cmd -> 回車），執行git --version，若出現git version 2.19.2.windows.1之類的版本輸出，那麼恭喜你已經成功安裝，離完成建站近了一步。
node.js的安裝：
node.js的安裝和Git的安裝完全如出一轍，同樣的操作下載node.js並安裝即可，安裝好後我們同樣在cmd終端使用node -version命令，如出現v10.13.0類似輸出，則說明已經成功安裝。
node.js下載：https://nodejs.org/en/
Github的註冊
Github是一個大佬級別的網站，我們進入Github的註冊頁面觀摩一下：https://github.com/join?source=login
然後提示信息填寫你的用戶名、郵箱、密碼等信息進行註冊即可。
二、博客的秒速搭建
創建倉庫並部署
註冊了github之後，我們需要創建一個倉庫來存儲我們的網站源碼以及文章等數據，創建的倉庫名也就是我們最終站點所訪問的url地址，該url是採用子域名的方式，其一般形式爲：XXX.github.io。XXX一般代表着你註冊時的github用戶名，所以在你註冊之後該倉庫名一般是固定的，倉庫的創建及部署流程參考如下：
-
進入個人Github主頁之後點擊
New repository來創建新的倉庫（就是放東西的），如下：
![]()
-
之後按照如下步驟進行
-
完成以上操作之後，你就已經成功創建好了自己的倉庫。這時我們還需要利用git命令來生成我們的祕鑰。鼠標右鍵桌面選擇
git bash here（安裝好Git之後即可看見），然後在git終端執行以下命令：
ssh-keygen -t rsa -C [email protected]
其中[email protected]指的是你註冊github時候使用的郵箱，在命令執行的時候回有一些yes、no的選擇，直接默認回車即可，最終你將會看到類似如下內容：
Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx [email protected]
之後你將在c/Users/you/.ssh/id_rsa.pub路徑文件看到生成的祕鑰對，這個文件我們暫且打開，之後複製粘貼會用到。
補充：打開git bash here之後我們首先需要配置一下個人信息，在git終端分別配置自己的用戶名和郵箱。命令如下：
git config --global user.name XXX # XXX表示你github註冊時的用戶名
git config --global user.email XXX # XXX表示你github註冊時的郵箱
-
之後我們需要將ssh key添加到我們的github賬戶。在個人github主頁找到settings，然後點擊SSH and GPG keys，之後再出現的頁面的中點擊
New SSH key，隨後根據如下圖操作進行添加ssh key：
![]()
-
打開
git bash here，執行ssh -T [email protected]，之後會出現一系列的yes or no的問題，我們只需要回答yes即可，最終會輸出如下類似內容：
Hi username! You've successfully authenticated
OK，完成以上流程後，你的本機就可以連接上Github了。
Hexo博客框架的搭建
在完成以上操作後，我們就可以來完美地使用Hexo了，你可通過如下操作來進行。
- 在以上操作的基礎上，我們首先安裝一下Hexo。根據自己的需要在磁盤中創建一個名爲
hexo文件夾，爲了更好的管理文件，濤濤是在E盤的根目錄中創建該文件夾的。之後進入該文件並在當前路徑下打開git bash here，依次運行如下命令來進行搭建hexo環境：
npm install hexo-cli -g
npm install hexo --save
執行完成之後，你會發現在該目錄之下會有個node_modules文件夾生成，如此一來，你就已經搭建好了Hexo環境，離終點又近了一點 (*￣rǒ￣)
- 以上的node_modules文件生成之後，我們需要配置一下Hexo的環境變量，以便在cmd中可以直接執行後續博客操作的命令，而不需要在指定的Hexo目錄中執行。進入到node_module文件夾下的bin目錄，然後複製該bin目錄的路徑，如下：
後面的添加環境變量的操作比較簡單，所以就描述一些流程，就不貼圖了。如果有遇到問題的可聯繫濤濤，或者在下方留言即可。後續操作描述如下（小白也懂的操作）：
- ctrl+D切換到桌面。
- 右鍵此電腦，點擊屬性。
- 點擊左側的高級系統設置。
- 點擊環境變量。
- 在用戶變量或者系統變量中找到Path並雙擊它（推薦用戶變量）
- 雙擊之後點擊新建，然後將以上的複製的bin目錄粘貼至此。
- 然後一步一步的確定、確定、確定。OK，完成了，是不是很簡單 (*￣rǒ￣)。
在以上操作完成之後，win+r，打開cmd終端，然後執行Hexo --version，若出現如下類似信息，則說明你的Hexo已經成功配置了環境變量。
- 隨後，我們需要創建我們的博客站點的主目錄，你可使用我推薦的方式進行創建，當然你也可以根據自己的喜好方式進行創建。首先在E盤的根目錄下創建ZerosBlog文件夾（自定義），然後進入該文件夾並創建XXX.github.io文件夾（該文件夾名必須與你之前創建的github倉庫名必須一致，必須固定），雙擊進入到該目錄右鍵點擊
git bash here來打開git終端，之後在該終端下根據如下命令一步步進行操作：
初始化hexo：
hexo init
自動安裝網站所需組件：
npm install
稍等片刻即可完成所有的安裝步驟。OK，至此，你已經基本完成了網站的建設，可以說是萬事具備，只欠東風了。一個基本的Hexo博客框架已經完成了，現在我們只需要最後一步了：導入自己的喜歡的博客主題即可正常使用了，Hexo中有很多很多很多的主題可供用戶選擇，主題的引入操作如下。
三、主題引入
Hexo中有很多很多很多的主題可供用戶選擇（N個。。。 Σ( ° △ °|||)︴ 我不知道有多少個，因爲他會被許多的前端大神不斷頻繁更新開源着，如果好奇的話自行了解即可），其主題官網爲：https://hexo.io/themes/，你可以在此觀摩並使用任意一個來作爲你博客的主題，但據統計，絕大多數使用hexo+github來搭建博客的都是使用NexT，它的簡單美受到了許多用戶的青睞，所以以下將以NexT爲例來作爲我們主題的引入，當然，你也可以去閱讀NexT的主題文檔來進行NexT主題的引入。
在Hexo主題頁面ctrl+F並輸入next查找到NexT主題，然後點擊進入到NexT主題的github頁面，該頁面存儲了NexT主題的源碼，我們需要將其下載下來爲己所用。在前面我們已經已經下載好了Git，而且也提到了git的最爲方便之處就是可以隨意clone github的任意資源，在這個操作就可以完美的顯露出來了 ┗|｀O′|┛ 嗷~~ ┗|｀O′|┛ 嗷~~ ┗|｀O′|┛ 嗷~~。
在進入到NexT主題的Github倉庫頁面之後，根據如下圖所示覆製出該主題的倉庫鏈接：
複製好該鏈接後我們進入E:\ZerosBlog\XXX.github.io\themes文件夾下，右鍵點擊git bash here進入git終端，並執行如下命令，其中鏈接爲你上一步所複製的內容
git clone https://github.com/theme-next/hexo-theme-next.git
這個過程可能需要一丟丟的時間，如果你累了或者渴了的話可以喝口茶，稍等片刻之後就會在該目錄之下成功下載NexT主題了。
待到成功下載NexT主題後，我們需要少量的配置來達到使用該主題的目的，該配置文件是屬於站點的，其路徑爲E:\ZerosBlog\XXX.github.io\_config.yml，我們用文本編輯器（notepad、notepad++、sublime text、Vim…皆可）打開它，然後ctrl+f輸入theme查找到theme屬性，然後將值改爲next，如下所示：
在NexT中已經爲我們準備了四種博客樣式，其配置文件在主題的配置文件中（注意與上文中博客的配置文件 _config.yml 區別開來），即E\ZerosBlog\XXX.github.io\themes\next\_config.yml文件，我們用文本編輯器（notepad、notepad++、sublime text、Vim…）打開它，然後ctrl+F輸入scheme查找到如下內容：
可以看見總共有四種主題Muse、Mist、Pisces、Gemini，你可以根據自己的喜好選擇其中一種（可以四種都嘗試然後決定一種樣式），然後將其他三種註釋即可，ctrl+s保存然後退出
操作完成之後，我們來到站點的根目錄下，即E:\ZerosBlog\XXX.github.io，打開git終端（空白處右鍵git bash heer），完成如下三步走命令
- hexo clean：清除緩存
- hexo g：生成靜態頁面
- hexo d：將資源提交到服務器中
hexo clean
heo g
hexo d
在以上命令執行過程中，可能會遇到一個登陸表單的突然出現，我們只需要根據自己github註冊時所填的信息進行登陸即可，命令執行完成之後我們的站點已經完成了部署並請求https://XXX.github.io/即可訪問到自己的網站了，如下圖所示：
四、總結
以上的圖文並茂的搭建過程是針對純小白所實現的，例如github倉庫的創建、環境變量的配置、git終端等一些基礎操作都有較爲詳細的說明，按照流程一步步來，分分鐘建站毫無壓力。另外如果在如上頁面中有不懂的地方可以聯繫作者或者在下方留言，看到後會第一時間回覆大家。
特別注意：
這裏需要提一點的是，上面的搭建過程僅僅是博客站點的搭建，博客的內容需要我們在E:\MyBlog\XXX.github.io\source\_posts文件夾中創建你想要發佈的文章，例：HelloWorld.md，然後在該文件下使用Markdown語法進行編寫，編寫完成之後同樣使用hexo clean | hexo g | hexo d命令將撰寫好的文章發佈到Github服務器中，最後瀏覽器訪問https://XXX.github.io/即可看見文章。Markdown撰寫語法不再本文的內容介紹中，有時間的話，整理一篇關於我多年以來使用Markdown的經驗，以及該文的排版樣式等等，或者自行前去學習：https://www.zybuluo.com/mdeditor
至此，已經完成了博客的搭建，但是我們左看看、右看看，不管怎麼看都似乎顯得有點單調，在之後將會介紹博客的美化，可以引入一些插件，比如像Gitalk在線聊天、APlayer、字數統計、背景等一些插件。