---

歡迎關(guān)注我的專欄：《個(gè)人博客搭建：Hexo+Github Pages》，從搭建到美化一條龍，幫你解決 Hexo 常見問題！

推薦閱讀：《Hexo 博客優(yōu)化之博客美化系列（持續(xù)更新）》、《Hexo 博客優(yōu)化之實(shí)用功能添加系列（持續(xù)更新）》

我的博客地址：https://www.itrhx.com/

Hexo 交流群：924812033，有問題可以一起交流解決。

---

文章目錄

• ● 前言
• ● 入門
• ● 安裝 Node.js
• ● 安裝 Git
• • ? 檢驗(yàn)Git是否安裝成功
• ● 安裝Hexo
• • ? Hexo 初始化配置
• ● 本地查看效果
• ● 將博客部署到 Github Pages 上
• • ? 注冊(cè) Github 賬戶
  • ? 創(chuàng)建項(xiàng)目代碼庫
  • ? 配置 SSH 密鑰
  • ? 在 GitHub 賬戶中添加你的公鑰
  • ? 測試
  • ? 配置 Git 個(gè)人信息
• ● 將本地的 Hexo 文件更新到 Github 的庫中
• ● 在博客上發(fā)表文章
• ● 為博客更換自己喜歡的主題
• ● 為你的 Hexo 博客配置個(gè)性域名
• ● 博客美化和實(shí)用功能的添加
• ● 結(jié)語

---

● 前言

這是一篇有關(guān)如何使用 Github Pages 和 Hexo 搭建屬于自己獨(dú)立博客的詳盡教程，本人是軟件工程專業(yè)本科生，目前只學(xué)習(xí)了C和C++編程語言，對(duì)網(wǎng)站開發(fā)的有關(guān)知識(shí)幾乎為零，這也是我搭建好自己的博客之后寫的第一篇博客，剛開始搭建博客的時(shí)候自己也是網(wǎng)上各種百度，由于自己屬于小白那種，歷經(jīng)了千辛萬苦才弄好，所以借這個(gè)機(jī)會(huì)寫一篇小白真正能看懂的博客搭建教程，教你一步一步走向成功的彼岸！

推薦文章： 《我為什么寫博客》 （By 知明所以）
　　　　 　《為什么你應(yīng)該（從現(xiàn)在開始就）寫博客》 (By 劉未鵬 | Mind Hacks)

● 入門

Github Pages

Github Pages可以被認(rèn)為是用戶編寫的、托管在github上的靜態(tài)網(wǎng)頁。使用Github Pages可以為你提供一個(gè)免費(fèi)的服務(wù)器，免去了自己搭建服務(wù)器和寫數(shù)據(jù)庫的麻煩。此外還可以綁定自己的域名。

Hexo

Hexo 是一個(gè)快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。

● 安裝 Node.js

點(diǎn)擊此處訪問官網(wǎng)，按需下載相應(yīng)版本，默認(rèn)安裝可以了

注：本人在安裝過程中出現(xiàn)了Warning 1909,無法創(chuàng)建快捷方式，這種情況很少出現(xiàn)，如果在安裝過程中也有這種情況請(qǐng)參考百度文庫（win10系統(tǒng)實(shí)測可行）：《Win7安裝程序警告1909無法創(chuàng)建快捷方式》

● 安裝 Git

點(diǎn)擊此處訪問官網(wǎng)，按需下載相應(yīng)版本，默認(rèn)安裝即可
參考資料：《如何在windows下安裝GIT》 　（By 俊雨廷休）
　　　　　《Pro Git（中文版）》

? 檢驗(yàn)Git是否安裝成功

同時(shí)按下 Win 鍵和 R 鍵打開運(yùn)行窗口,輸入 cmd ，然后輸入以下命令，有相應(yīng)版本信息顯示則安裝成功，若不正確可以卸載軟件重新安裝，此外若安裝成功，在桌面右鍵鼠標(biāo)，可以看到菜單里多了 Git GUI Here 和 Git Bash Here兩個(gè)選項(xiàng)，第一個(gè)是圖形界面的Git操作，另一個(gè)是命令行

$ git --version $ node -v $ npm -v

● 安裝Hexo

選擇一個(gè)磁盤，新建一個(gè)文件夾，自己重命名文件夾（如：我的文件夾為：Ｅ\TRHX_Blog），博客相關(guān)文件將儲(chǔ)存在此文件夾下，在該文件夾下右鍵鼠標(biāo)，點(diǎn)擊 Git Bash Here，輸入以下 npm 命令即可安裝，第一個(gè)命令表示安裝 hexo，第二個(gè)命令表示安裝 hexo 部署到 git page 的 deployer，如圖所示即為安裝成功

$ npm install hexo-cli -g $ npm install hexo-deployer-git --save

? Hexo 初始化配置

在剛才新建的文件夾里面再次新建一個(gè) Hexo 文件夾（如：我的文件夾為：E\TRHX_Blog\Hexo）,進(jìn)入該 Hexo 文件夾右鍵鼠標(biāo)，點(diǎn)擊 Git Bash Here，輸入以下命令，如圖所示則安裝成功

$ hexo init

Hexo 安裝完成后，將會(huì)在指定文件夾中新建所需要的文件，Hexo 文件夾下的目錄如下：

● 本地查看效果

執(zhí)行以下命令，執(zhí)行完即可登錄 http://localhost:4000/ 查看效果

$ hexo generate $ hexo server

顯示以下信息說明操作成功：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

登錄 http://localhost:4000/ 查看效果：

● 將博客部署到 Github Pages 上

到目前為止，我們的本地博客就成功搭建了，但是現(xiàn)在我們只能通過本地連接查看博客，我們要做的是讓其他人也能夠訪問我們的博客，這就需要我們將博客部署到Github Pages上

? 注冊(cè) Github 賬戶

點(diǎn)擊此處訪問 Github 官網(wǎng)，點(diǎn)擊 Sign Up 注冊(cè)賬戶

? 創(chuàng)建項(xiàng)目代碼庫

點(diǎn)擊 New repository 開始創(chuàng)建，步驟及注意事項(xiàng)見下圖：

? 配置 SSH 密鑰

只有配置好 SSH 密鑰后，我們才可以通過 git 操作實(shí)現(xiàn)本地代碼庫與 Github 代碼庫同步，在你第一次新建的文件夾里面（如：我的文件夾為：Ｅ\TRHX_Blog） Git Bash Here 輸入以下命令：

$ ssh-keygen -t rsa -C "your email@example.com" //引號(hào)里面填寫你的郵箱地址，比如我的是tanrenhou@126.com

之后會(huì)出現(xiàn)：

Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): //到這里可以直接回車將密鑰按默認(rèn)文件進(jìn)行存儲(chǔ)

然后會(huì)出現(xiàn)：

Enter passphrase (empty for no passphrase): //這里是要你輸入密碼，其實(shí)不需要輸什么密碼，直接回車就行 Enter same passphrase again:

接下來屏幕會(huì)顯示：

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: 這里是各種字母數(shù)字組成的字符串，結(jié)尾是你的郵箱 The key's randomart image is: 這里也是各種字母數(shù)字符號(hào)組成的字符串

運(yùn)行以下命令，將公鑰的內(nèi)容復(fù)制到系統(tǒng)粘貼板上

$ clip < ~/.ssh/id_rsa.pub

? 在 GitHub 賬戶中添加你的公鑰

① 登陸 GitHub，進(jìn)入 Settings：

② 點(diǎn)擊 SSH and GPG Keys：

③ 選擇 New SSH key：

④ 粘貼密鑰：

? 測試

輸入以下命令：注意：git@github.com不要做任何更改！

$ ssh -T git@github.com

之后會(huì)顯示：

輸入 yes 后會(huì)顯示：

此時(shí)表示設(shè)置正確

? 配置 Git 個(gè)人信息

Git 會(huì)根據(jù)用戶的名字和郵箱來記錄提交，GitHub 也是用這些信息來做權(quán)限的處理，輸入以下命令進(jìn)行個(gè)人信息的設(shè)置，把名稱和郵箱替換成你自己的，名字可以不是 GitHub 的昵稱，但為了方便記憶，建議與 GitHub 一致

$ git config --global user.name "此處填你的用戶名" $ git config --global user.email "此處填你的郵箱"

到此為止 SSH Key 配置成功，本機(jī)已成功連接到 Github

● 將本地的 Hexo 文件更新到 Github 的庫中

① 登錄 Github 打開自己的項(xiàng)目 your name.github.io

② 鼠標(biāo)移到 Clone or download 按鈕，選擇 Use SSH

③ 一鍵復(fù)制地址

④ 打開你創(chuàng)建的 Hexo 文件夾（如：E:\TRHX_Blog\Hexo），右鍵用記事本（Notepad++或者VS code等都可以）打開該文件夾下的 _config.yml 文件

⑤ 按下圖修改 _config.yml 文件并保存

注意：github 默認(rèn)分支變成了 main，所以下圖中 branch 要改為 main！！！

⑥ 在 Hexo 文件夾下分別執(zhí)行以下命令

$ hexo g $ hexo d

或者直接執(zhí)行

$ hexo g -d

執(zhí)行完之后會(huì)讓你輸入你的 Github 的賬號(hào)和密碼，如果此時(shí)報(bào)以下錯(cuò)誤，說明你的 deployer 沒有安裝成功

ERROR Deployer not found: git

需要執(zhí)行以下命令再安裝一次：

npm install hexo-deployer-git --save

再執(zhí)行 hexo g -d，你的博客就會(huì)部署到 Github 上了

⑦ 訪問博客

你的博客地址：https://你的用戶名.github.io，比如我的是：https://trhx.github.io ,現(xiàn)在每個(gè)人都可以通過此鏈接訪問你的博客了

● 在博客上發(fā)表文章

博客已經(jīng)成功搭建了，但是我們?cè)撛趺磳懖┛湍?#xff1f;

① 新建一個(gè)空文章，輸入以下命令，會(huì)在項(xiàng)目 \Hexo\source\_posts 中生成 文章標(biāo)題.md 文件，文章標(biāo)題根據(jù)需要命名

$ hexo n "文章標(biāo)題"

也可以直接在 \Hexo\source\_posts 目錄下右鍵鼠標(biāo)新建文本文檔，改后綴為 .md 即可，這種方法比較方便

② 用編輯器編寫文章

md 全稱 Markdown， Markdown 是 2004 年由 John Gruberis 設(shè)計(jì)和開發(fā)的純文本格式的語法，非常的簡單實(shí)用，常用的標(biāo)記符號(hào)屈指可數(shù)，幾分鐘即可學(xué)會(huì)， .md 文件可以使用支持 Markdown 語法的編輯器編輯，然后保存文件到 \Hexo\source\_posts 文件夾下即可

推薦 Windows 上使用 MarkdownPad2 或者小書匠 編輯器，macOS 上使用 Mou 編輯器，Linux 上使用 Remarkable編輯器，Web 端上使用CSDN ，其他編輯器推薦可以參考我的另一篇文章：《最新主流 Markdown 編輯器推薦》

文章標(biāo)題，標(biāo)簽，分類，封面圖片，摘要等，可以在 Front-matter 里面配置（Front-matter 是文件最上方以 — 分隔的區(qū)域，用于指定個(gè)別文件的變量，官方文檔：https://hexo.io/zh-cn/docs/front-matter ），舉個(gè)例子：

--- layout: 頁面布局（配合主題文檔使用） title: 文章名稱 date: 文章日期 comments: 文章是否開啟評(píng)論 photos: 文章封面圖（僅部分主題支持） tags: - 文章標(biāo)簽一- 文章標(biāo)簽二 categories: 文章分類 description: 文章描述，即要在首頁顯示的摘要（僅部分主題支持） ---這里是摘要<!-- more -->這里是正文注意：description 和 <!-- more --> 方式顯示摘要二選一即可，部分主題不支持description，每個(gè)配置英文冒號(hào)后面要空一格，不同主題配置有所差異，具體要參考主題文檔

當(dāng)我們用編輯器寫好文章后，可以使用以下命令將其推送到服務(wù)器上

$ hexo g $ hexo d

或者將兩個(gè)命令合二為一輸入以下命令：

$ hexo d -g

現(xiàn)在訪問你的博客就可以看見寫好的文章啦！

參考資料：《10款流行的Markdown編輯器》 （By xiaoxiao_engineer）
　　　　　《獻(xiàn)給寫作者的 Markdown 新手指南》 （By 簡書）
　　　　　《認(rèn)識(shí)與入門 Markdown》 （By Te_Lee）
　　　　　《markdown簡明語法》 （By 不如）
　　　　　《markdown基本語法》 （By 高鴻祥）
　　　　　《Markdown 公式指導(dǎo)手冊(cè)》 （By Harries）

● 為博客更換自己喜歡的主題

博客也搭建好了，文章也會(huì)寫了，但是！！！默認(rèn)的主題并不喜歡怎么辦？現(xiàn)在，我們就來為自己的博客更換自己喜歡的主題

點(diǎn)擊此處進(jìn)入 Hexo 官網(wǎng)的主題專欄，我們可以看見有許多的主題供我們選擇

我們要做的就是把主題克隆過來，在此我們以主題 Aero-Dual 為例，點(diǎn)進(jìn)去我們就可以看見該主題作者的博客，鼠標(biāo)滑到底，我們可以看見 Theme By Levblanc 的字樣（其他主題類似），點(diǎn)擊作者 Levblanc ，頁面就會(huì)跳轉(zhuǎn)到該主題所有的相關(guān)文件在 Github 上的地址，復(fù)制該地址

再打開 Hexo 文件夾下的 themes 目錄（如：E:\TRHX_Blog\Hexo\themes），右鍵 Git Bash Here，輸入以下命令：

$ git clone 此處填寫你剛才復(fù)制的主題地址

比如要安裝 Aero-Dual 主題，則輸入命令：

$ git clone https://github.com/levblanc/hexo-theme-aero-dual

等待下載完成后即可在 themes 目錄下生成 hexo-theme-aero-dual 文件夾，然后打開 Hexo 文件夾下的配置文件 _config.yml ，找到關(guān)鍵字 theme，修改參數(shù)為：theme：hexo-theme-aero-dual （其他主題修改成相應(yīng)名稱即可），再次注意冒號(hào)后面有一個(gè)空格！

返回 Hexo 目錄，右鍵 Git Bash Here ，輸入以下命令開始部署主題：

$ hexo g $ hexo s

此時(shí)打開瀏覽器，訪問 http://localhost:4000/ 就可看見我們的主題已經(jīng)更換了，如果感覺效果滿意，我們就可以把它部署到Github上了

打開 Hexo 文件夾，右鍵 Git Bash Here ，輸入以下命令：

$ hexo clean //該命令的作用是清除緩存，若不輸入此命令，服務(wù)器有可能更新不了主題$ hexo g -d

此時(shí)訪問自己的博客即可看見更換后的主題，但我們?nèi)匀恍枰獙?duì)主題的相關(guān)配置進(jìn)行修改，比如網(wǎng)站標(biāo)題，圖標(biāo)等等，Hexo 中有兩份主要的配置文件，名稱都是 _config.yml ，它們均是用于站點(diǎn)配置使用的。其中，一份位于站點(diǎn)根目錄下（比如我的：E:\TRHX_Blog\Hexo\_config.yml），主要包含 Hexo 本身整站的配置；另一份位于主題目錄下（比如我的：E:\TRHX_Blog\Hexo\themes\hexo-theme-aero-dual\_config.yml），這份配置由主題作者提供，主要用于配置主題相關(guān)的選項(xiàng)，一般 _config.yml 文件里都有相關(guān)注釋，按需修改即可

參考資料：《有哪些好看的 Hexo 主題？》 （知乎）
　　　　　《Hexo | 配置》 （Hexo官方文檔）
　　　　　《hexo常用命令筆記》 （By 小弟調(diào)調(diào)）

● 為你的 Hexo 博客配置個(gè)性域名

本人在配置域名的時(shí)候問題百出，百度的各種方法都不管用，打開網(wǎng)站總是 404，可能是我太笨了 　o(╥﹏╥)o　，不過好在后來終于解決了這個(gè)問題

首先我們要購買域名，阿里云，騰訊云都可以，也不貴，一年幾十塊錢，最便宜幾塊錢也能買到，以阿里云為例，我購買的域名是 itrhx.com，（最開始買的是trhx.top），購買過程就不贅述了，選擇阿里云的解析平臺(tái)，來到阿里云的管理控制臺(tái)，點(diǎn)擊進(jìn)入域名解析列表或者直接點(diǎn)擊域名后面的解析

方法一：點(diǎn)擊添加記錄，需要添加兩個(gè)記錄，兩個(gè)記錄類型都是 CNAME ，第一個(gè)主機(jī)記錄為 @ ，第二個(gè)主機(jī)記錄為 www，記錄值都是填你自己的博客地址（比如我的是：trhx.github.io），保存之后域名解析就完成了！（主機(jī)記錄有 @ 和 www 能保證URL加不加 www 都能訪問）

方法二：兩個(gè)記錄類型為 A ，第一個(gè)主機(jī)記錄為 @ ，第二個(gè)主機(jī)記錄為 www，記錄值都為博客的 IP 地址，IP 地址可以 cmd 中輸入 ping 你的博客地址 獲得（比如我的：ping trhx.github.io），保存之后域名解析就完成了！

有關(guān)解析記錄類型的區(qū)別可以參考《域名解析中A記錄、CNAME、MX記錄、NS記錄的區(qū)別和聯(lián)系》

為了使 GitHub 接收我們的域名，還需要在博客的根目錄下添加一個(gè)名為 CNAME 的文件（注意不要加.txt，沒有任何后綴名！），這個(gè)文件放到 Hexo 文件夾的 source 里面，（比如我的是：E:\TRHX_Blog\Hexo\source），文件里面填寫你的域名（加不加www都行），比如要填寫我的域名，文件里面就寫：www.itrhx.com 或者 itrhx.com，經(jīng)過以上操作，別人就可以通過 www.itrhx.com 、itrhx.com 、trhx.github.io 三個(gè)當(dāng)中任意一個(gè)訪問我的博客了！你的也一樣！

有關(guān)加不加www的問題有以下區(qū)別：

如果你填寫的是沒有www的，比如 itrhx.com，那么無論是訪問 https://www.itrhx.com 還是 https://itrhx.com ，都會(huì)自動(dòng)跳轉(zhuǎn)到 https://itrhx.com

如果你填寫的是帶www的，比如 www.itrhx.com ，那么無論是訪問 https://www.itrhx.com 還是 https://itrhx.com ，都會(huì)自動(dòng)跳轉(zhuǎn)到 https://www.itrhx.com

如果你在其他平臺(tái)購買域名，或者選擇 DNSPod 等其他域名解析，操作方法大同小異，遇到問題可自行百度解決！

參考資料：《推薦幾家域名注冊(cè)服務(wù)商》 （By Jelly Bool）
　　　　　《盤點(diǎn)十大免費(fèi)DNS域名解析服務(wù)：穩(wěn)定、可靠》

● 博客美化和實(shí)用功能的添加

有關(guān)博客后期的美化、實(shí)用功能的添加，可以參考我的另外兩篇文章：
《Hexo 博客優(yōu)化之博客美化》
《Hexo 博客優(yōu)化之實(shí)用功能添加》

● 結(jié)語

一頓操作下來雖然有點(diǎn)兒累，但看見擁有了自己的博客還是非常有成就感的，人生就是需要折騰，那么現(xiàn)在就開始你的創(chuàng)作之旅吧！文章的不斷積累，你會(huì)從中受益很多的！另外，這是一篇小白寫的適用于小白的博客搭建教程，比較詳細(xì)，有這方面基礎(chǔ)的可以百度有簡略一點(diǎn)兒的教程，文中如有錯(cuò)誤還請(qǐng)大佬指出改正！文中涉及參考資料如有侵權(quán)請(qǐng)聯(lián)系我刪除！

總結(jié)

以上是生活随笔為你收集整理的使用 Github Pages 和 Hexo 搭建自己的独立博客【超级详细的小白教程】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。