一文詳解Hexo+Github小白建站

做者：玩世不恭的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終端等一些基礎操做都有較爲詳細的說明，按照流程一步步來，分分鐘建站毫無壓力。

---

1、搭建環境

環境介紹：

1. windows系統：系統根據本身的實際須要準備便可，mac、linux皆可，爲了服務更多的讀者，本文主要介紹的是在windows系統下搭建。
2. git：安裝以後方便使用各類命令，在github上直接使用clone命令秒速下載，在發佈文章到服務器時也能方便的使用hexo clean、hexo g、hexo d等命令。
3. node.js：一個Javascript運行環境，網站的搭建必須創建在這個框架之上。
4. 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

而後提示信息填寫你的用戶名、郵箱、密碼等信息進行註冊便可。

---

2、博客的秒速搭建

建立倉庫並部署

註冊了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目錄的路徑，以下：

後面的添加環境變量的操做比較簡單，因此就描述一些流程，就不貼圖了。若是有遇到問題的可聯繫濤濤，或者在下方留言便可。後續操做描述以下（小白也懂的操做）：

1. ctrl+D切換到桌面。
2. 右鍵此電腦，點擊屬性。
3. 點擊左側的高級系統設置。
4. 點擊環境變量。
5. 在用戶變量或者系統變量中找到Path並雙擊它（推薦用戶變量）
6. 雙擊以後點擊新建，而後將以上的複製的bin目錄粘貼至此。
7. 而後一步一步的肯定、肯定、肯定。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中有不少不少不少的主題可供用戶選擇，主題的引入操做以下。

---

3、主題引入

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），完成以下三步走命令

1. hexo clean：清除緩存
2. hexo g：生成靜態頁面
3. hexo d：將資源提交到服務器中

1hexo clean  
2heo g   
3hexo d  

在以上命令執行過程當中，可能會遇到一個登錄表單的忽然出現，咱們只須要根據本身github註冊時所填的信息進行登錄便可，命令執行完成以後咱們的站點已經完成了部署並請求https://XXX.github.io/便可訪問到本身的網站了，以下圖所示：

---

4、總結

以上的圖文並茂的搭建過程是針對純小白所實現的，例如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、字數統計、背景等一些插件。

2018-09-10，By 濤濤，於上饒