作者：玩世不恭的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終端執行以下命令：
1ssh-keygen -t rsa -C XXX@XXX.com
其中XXX@XXX.com指的是你注冊github時候使用的郵箱，在命令執行的時候回有一些yes、no的選擇，直接默認回車即可，最終你將會看到類似如下內容：
1Your identification has been saved in /c/Users/you/.ssh/id_rsa.
2Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
3The key fingerprint is:
4xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx your_email@example.com
之后你將在c/Users/you/.ssh/id_rsa.pub路徑文件看到生成的秘鑰對，這個文件我們暫且打開，之后復制粘貼會用到。
補充：打開git bash here之后我們首先需要配置一下個人信息，在git終端分別配置自己的用戶名和郵箱。命令如下：
1git config --global user.name XXX # XXX表示你github注冊時的用戶名
2git 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 git@github.com，之后會出現一系列的yes or no的問題，我們只需要回答yes即可，最終會輸出如下類似內容：
1Hi username! You've successfully authenticated
2
OK，完成以上流程后，你的本機就可以連接上Github了。
Hexo博客框架的搭建
在完成以上操作后，我們就可以來完美地使用Hexo了，你可通過如下操作來進行。
- 在以上操作的基礎上，我們首先安裝一下Hexo。根據自己的需要在磁盤中創建一個名為
hexo文件夾，為了更好的管理文件，濤濤是在E盤的根目錄中創建該文件夾的。之后進入該文件並在當前路徑下打開git bash here，依次運行如下命令來進行搭建hexo環境：
1npm install hexo-cli -g
2npm 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：
1hexo init
自動安裝網站所需組件：
1npm 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終端，並執行如下命令，其中鏈接為你上一步所復制的內容
1git 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：將資源提交到服務器中
1hexo clean
2heo g
3hexo 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、字數統計、背景等一些插件。