GitHub+Hexo搭建個人部落格（轉載知乎他人文章）

Hexo GitHub 版本控制系統 · 發表 2018-12-08 12:26:49

摘要：搭建步驟：獲得個人網站域名 GitHub建立個人倉庫安裝Git 安裝Node.js 安裝Hexo 推送網站繫結域名更換主題初識MarkDown語法釋出文章尋找圖床個性化設定其他附錄獲得個人網站域名 ...

搭建步驟：

獲得個人網站域名

GitHub/">GitHub建立個人倉庫

安裝Git

安裝Node.js

安裝Hexo

推送網站

繫結域名

更換主題

初識MarkDown語法

釋出文章

尋找圖床

個性化設定

其他

附錄

獲得個人網站域名

域名是網站的入口，也是網站的第一印象，比如餓了麼的官網的域名是： ofollow,noindex">https://www.ele.me/ ，很是巧妙。常見的有com,cn,net,org等字尾，也有小眾的xyz,me,io等字尾，根據你自己的喜好，選擇不同的字尾，比如我選擇就是常見的com字尾。很多小眾奇特的字尾在大陸是沒辦法備案的，網站也就無法上線。然而使用GitHub託管我們的網站，完全不需要備案，因為託管我們的網站內容的伺服器在美國，而且在國內備案流程也比較繁雜，時間需要一週左右。

申請域名的地方有很多，這裡推薦阿里雲：阿里雲-為了無法計算的價值申請入口：域名註冊購買域名這也是我們整個搭建過程中惟一一個需要花錢的地方。如果你已經有了空閒域名就無需購買，直接使用即可。

GitHub建立個人倉庫

登入到GitHub,如果沒有GitHub帳號，使用你的郵箱註冊GitHub帳號： Build software better, together 點選GitHub中的New repository建立新倉庫，倉庫名應該為： 使用者名稱 . http://github.io 這個 使用者名稱 使用你的GitHub帳號名稱代替，這是固定寫法，比如我的倉庫名為：

安裝Git

什麼是Git ?簡單來說Git是開源的分散式版本控制系統，用於敏捷高效地處理專案。我們網站在本地搭建好了，需要使用Git同步到GitHub上。如果想要了解Git的細節，參看廖雪峰老師的Git教程： Git教程從Git官網下載： Git - Downloading Package 現在的機子基本都是64位的，選擇64位的安裝包，下載後安裝，在命令列裡輸入git測試是否安裝成功，若安裝失敗，參看其他詳細的Git安裝教程。安裝成功後，將你的Git與GitHub帳號繫結，滑鼠右擊開啟Git Bash

或者在選單裡搜尋Git Bash，設定user.name和user.email配置資訊：

git config --global user.name"你的GitHub使用者名稱"git config --global user.email"你的GitHub註冊郵箱"

生成ssh金鑰檔案：

ssh-keygen -t rsa -C"你的GitHub註冊郵箱"

然後直接三個回車即可，預設不需要設定密碼

然後找到生成的.ssh的資料夾中的id_rsa.pub金鑰，將內容全部複製

開啟 GitHub_Settings_keys 頁面，新建new SSH Key

Title為標題，任意填即可，將剛剛複製的id_rsa.pub內容貼上進去，最後點選Add SSH key。

在Git Bash中檢測GitHub公鑰設定是否成功，輸入 ssh [email protected] ：

如上則說明成功。這裡之所以設定GitHub金鑰原因是，通過非對稱加密的公鑰與私鑰來完成加密，公鑰放置在GitHub上，私鑰放置在自己的電腦裡。GitHub要求每次推送程式碼都是合法使用者，所以每次推送都需要輸入賬號密碼驗證推送使用者是否是合法使用者，為了省去每次輸入密碼的步驟，採用了ssh，當你推送的時候，git就會匹配你的私鑰跟GitHub上面的公鑰是否是配對的，若是匹配就認為你是合法使用者，則允許推送。這樣可以保證每次的推送都是正確合法的。

安裝Node.js

Hexo基於Node.js，Node.js下載地址： Download | Node.js 下載安裝包，注意安裝Node.js會包含環境變數及npm的安裝，安裝後，檢測Node.js是否安裝成功，在命令列中輸入 node -v :

檢測npm是否安裝成功，在命令列中輸入npm -v :

到這了，安裝Hexo的環境已經全部搭建完成。

安裝Hexo

Hexo就是我們的個人部落格網站的框架，這裡需要自己在電腦常裡建立一個資料夾，可以命名為Blog，Hexo框架與以後你自己釋出的網頁都在這個資料夾中。建立好後，進入資料夾中，按住shift鍵，右擊滑鼠點選命令列

使用npm命令安裝Hexo，輸入：

npm install -g hexo-cli

這個安裝時間較長耐心等待，安裝完成後，初始化我們的部落格，輸入：

hexo init blog

注意，這裡的命令都是作用在剛剛建立的Blog資料夾中。

為了檢測我們的網站雛形，分別按順序輸入以下三條命令：

hexo new test_my_sitehexo ghexo s

這些命令在後面作介紹，完成後，開啟瀏覽器輸入地址：

localhost:4000

可以看出我們寫出第一篇部落格，只不過我下圖是我修改過的配置，和你的顯示不一樣。

現在來介紹常用的Hexo 命令

npm install hexo -g #安裝Hexo

npm update hexo -g #升級

hexo init #初始化部落格

命令簡寫

hexo n "我的部落格" == hexo new "我的部落格" #新建文章

hexo g == hexo generate #生成

hexo s == hexo server #啟動服務預覽

hexo d == hexo deploy #部署

hexo server #Hexo會監視檔案變動並自動更新，無須重啟伺服器

hexo server -s #靜態模式

hexo server -p 5000 #更改埠

hexo server -i 192.168.1.1 #自定義 IP

hexo clean #清除快取，若是網頁正常情況下可以忽略這條命令

剛剛的三個命令依次是新建一篇部落格文章、生成網頁、在本地預覽的操作。

推送網站

上面只是在本地預覽，接下來要做的就是就是推送網站，也就是釋出網站，讓我們的網站可以被更多的人訪問。在設定之前，需要解釋一個概念，在blog根目錄裡的_config.yml檔案稱為站點配置檔案，如下圖

進入根目錄裡的themes資料夾，裡面也有個_config.yml檔案，這個稱為主題配置檔案，如下圖

下一步將我們的Hexo與GitHub關聯起來，開啟站點的配置檔案_config.yml，翻到最後修改為：

deploy:

type: git

repo: 這裡填入你之前在GitHub上建立倉庫的完整路徑，記得加上 .git

branch: master參考如下：

儲存站點配置檔案。

其實就是給hexo d 這個命令做相應的配置，讓hexo知道你要把blog部署在哪個位置，很顯然，我們部署在我們GitHub的倉庫裡。最後安裝Git部署外掛，輸入命令：

npminstallhexo-deployer-git--save

這時，我們分別輸入三條命令：

hexo clean hexo g hexo d

其實第三條的 hexo d 就是部署網站命令，d是deploy的縮寫。完成後，開啟瀏覽器，在位址列輸入你的放置個人網站的倉庫路徑，即 http://xxxx.github.io (知乎排版可能會出現"http://"字樣，參考下圖) 比如我的xxxx就是我的GitHub使用者名稱：

你就會發現你的部落格已經上線了，可以在網路上被訪問了。

繫結域名

雖然在Internet上可以訪問我們的網站，但是網址是GitHub提供的: http://xxxx.github.io (知乎排版可能會出現"http://"字樣) 而我們想使用我們自己的個性化域名，這就需要繫結我們自己的域名。這裡演示的是在阿里雲萬網的域名繫結，在國內主流的域名代理廠商也就阿里雲和騰訊雲。登入到阿里雲，進入管理控制檯的域名列表，找到你的個性化域名，進入解析

然後新增解析

包括新增三條解析記錄，192.30.252.153是GitHub的地址，你也可以ping你的 http://xxxx.github.io 的ip地址，填入進去。第三個記錄型別是CNAME，CNAME的記錄值是：你的使用者名稱. http://github.io 這裡千萬別弄錯了。第二步，登入GitHub，進入之前建立的倉庫，點選settings，設定Custom domain，輸入你的域名

點選save儲存。第三步，進入本地部落格資料夾，進入blog/source目錄下，建立一個記事本檔案，輸入你的域名，對，只要寫進你自己的域名即可。如果帶有www，那麼以後訪問的時候必須帶有www完整的域名才可以訪問，但如果不帶有www，以後訪問的時候帶不帶www都可以訪問。所以建議，不要帶有www。這裡我還是寫了www(不建議帶有www):

儲存，命名為CNAME ，注意儲存成 所有檔案 而不是 txt檔案 。

完成這三步，進入blog目錄中，按住shift鍵右擊開啟命令列，依次輸入：

hexo cleanhexo ghexo d

這時候開啟瀏覽器在位址列輸入你的個性化域名將會直接進入你自己搭建的網站。

更換主題

如果你不喜歡Hexo預設的主題，可以更換不同的主題，主題傳送門： Themes 我自己使用的是Next主題，可以在blog目錄中的themes資料夾中檢視你自己主題是什麼。現在把預設主題更改成Next主題，在blog目錄中（就是命令列的位置處於blog目錄）開啟命令列輸入：

git clone https://github.com/iissnan/hexo-theme-next themes/next

這是將Next主題下載到blog目錄的themes主題下的next資料夾中。開啟站點的_config.yml配置檔案，修改主題為next

開啟主題的_config.yml配置檔案，不是站點主題檔案，找到Scheme Settings

next主題有三個樣式，我用的是Pisces，你們可以自己試試看，選擇你自己喜歡的樣式（只需要把行首的#去除，#是註釋），選擇好後，再次部署網站，hexo g、hexo d，檢視效果。選擇其他主題，按照上述過程即可實現。

初識Markdown語法

Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式。Markdown語法簡潔明瞭、容易掌握，而且功能比純文字更強，因此寫部落格使用它，可以讓使用者更加專注的寫文章，而不需要費盡心力的考慮樣式，相對於html已經算是輕量級語言，像有道雲筆記也支援Markdown寫作。並且Markdown完全相容html，也就是可以在文章裡直接插入html程式碼。比如給博文新增音樂，就可以直接把音樂的外鏈html程式碼插入文章中。具體語法參看： Markdown 語法說明(簡體中文版) 可以說十分鐘就可以入門。當然，工欲善其事必先利其器，選擇一個好的Markdown編輯器也是非常重要的，這裡推薦 MarkPad 和 The Markdown Editor for Windows ，這是帶有預覽效果的編輯器，也可以使用本地的文字編輯器，更多的Markdown的語法與編輯器自己可以搜尋瞭解。

釋出文章

我們開始正式釋出上線部落格文章，在命令列中輸入：

hexo n"部落格名字"

我們會發現在blog根目錄下的source資料夾中的_post資料夾中多了一個 部落格名字.md 檔案，使用Markdown編輯器開啟，就可以開始你的個人部落格之旅了，Markdown常用的樣式也就十來種，完全能夠滿足一般博文的樣式要求，這是我的一篇博文內容示例：

通過帶有預覽樣式的Markdown編輯器實時預覽書寫的博文樣式，也可以通過命令 hexo s --debug 在本地瀏覽器的localhost:4000 預覽博文效果。寫好博文並且樣式無誤後，通過hexo g、hexo d 生成、部署網頁。隨後可以在瀏覽器中輸入域名瀏覽。

尋找圖床

圖床，當博文中有圖片時，若是少量圖片，可以直接把圖片存放在source資料夾中，但這顯然不合理的，因為圖片會佔據大量的儲存的空間，載入的時候相對緩慢，這時考慮把博文裡的圖片上傳到某一網站，然後獲得外部連結，使用Markdown語法， ![圖片資訊](外部連結) 完成圖片的插入，這種網站就被成為圖床。常見的簡易的圖床網站有：貼相簿圖片外鏈國內算比較好的圖床我認為有兩個：新浪微博和七牛雲，七牛雲的使用方法可以參看其他文章。圖床最重要的就是穩定速度快，所以在挑選圖床的時候一定要仔細，下圖是博文插入圖片，使用圖床外鏈的示例：

個性化設定

所謂的個性化設定就是根據個人需要新增不同的外掛及功能。

基本的有：

在站點配置檔案_config.yml修改基本的站點資訊

依次是網站標題、副標題、網站描述、作者、網站頭像外部連結、網站語言、時區等。

在主題配置檔案_config.yml修改基本的主題資訊，如：

博文打賞的微信、支付寶二維碼圖片，這裡我是直接把這兩張放在根目錄的source資料夾中，並沒有使用圖床外鏈。

社交外鏈的設定，即在側欄展示你的個人社交網站資訊。

博文分享的外掛jiathis，值設定為true。在配置檔案中有很多的個性化設定，可以自嘗試更多的修改。

進階個性化：

新增網易雲音樂

開啟網頁版的網易雲音樂，選擇喜歡的音樂，點選生成外鏈播放器

複製外鏈的程式碼

比如在側欄插入這首歌的音樂播放器，修改 blog\themes\next\layout\_macro的sidebar.swig檔案，新增剛剛複製的外鏈程式碼

重新生成、部署網頁，效果如下

設定背景

把你挑選的背景圖片命名為：background.jpg，放在blog\themes\next\source\images裡，在blog\themes\next\source\css\_custom檔案的custom.styl首部新增：

body{background:url(/images/background.jpg);background-attachment:fixed;}

background-attachment: fixed;是固定背景圖片。

這是設定一張靜態圖片作為背景，其實Next主題自帶有動態的背景效果，修改主題配置檔案中的canvas_nest: false為canvas_nest: true即可。

增加側欄選單條目

預設的側欄選單條目有：首頁、歸檔、標籤、關於、搜尋等。如果你想要增加其他的選單條目，修改主題配置檔案_config.yml裡的Menu Settings中的menu和menu_icons兩個地方

其中menu裡是配置選單項對應的頁面位置（如：/love），menu_icons對應選單項的圖示，這裡的圖示是來自於 Font Awesome ，所以你需要在Font Awesome網站上找到你需要的icon，然後把該icon的名字寫在menu_icons對應選單名後面，注意冒號有一個英文輸入狀態的空格。設定好後，在命令列裡輸入：

hexo new page"你所要增加的選單項名稱（要和你在menu中的填寫要匹配）"

新建的頁面在部落格根目錄下的source檔案裡，這時你就可以對新建的頁面自定義設計。

還有更多的進階個性化設定，如SEO、評論系統、個人頭像、部落格分享、訂閱功能、High功能、404網頁設定等，可以參看：

有很多人私信問我High功能特效如何設定，這裡推薦一篇同是Next主題網站博主的文章：為Hexo Next主題新增哈林搖特效（五）

其他

終於寫到這裡了，也算是基本圓滿完成了我的寫作初衷，總結自己的一些經驗，分享一些有趣的東西，不過脖子也是僵硬的受不了。我知道很多人想要建立自己的個人網站卻一直沒有付諸行動，希望這篇文章能給你一點點靈感與想法，just do it。本文是windows平臺的搭建過程，其他平臺可以參看相關資料，也有很多其他優秀的部落格框架值得學習。如果有任何建議或想法、或疑問歡迎在評論區交流，做好的網站不妨在評論區貼出網址，讓大家一起學習。

GitHub+Hexo搭建個人部落格（轉載知乎他人文章）

您可能也會喜歡…