使用Github Pages和Hexo搭建本身的獨立博客【超級詳細的小白教程】

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

推薦閱讀：《Hexo 博客主題個性化》

個人博客地址：https://www.itrhx.com/

前言

這是一篇有關如何使用 Github Pages 和 Hexo 搭建屬於本身獨立博客的詳盡教程，本人是軟件工程專業本科生，目前只學習了C和C++編程語言，對網站開發的有關知識幾乎爲零，這也是我搭建好本身的博客以後寫的第一篇博客，剛開始搭建博客的時候本身也是網上各類百度，因爲本身屬於小白那種，歷經了千辛萬苦才弄好，因此借這個機會寫一篇小白真正能看懂的博客搭建教程，教你一步一步走向成功的彼岸！ 

推薦文章： 《我爲何寫博客》 （By 知明因此）
　　　　 　《爲何你應該（從如今開始就）寫博客》 (By 劉未鵬 | Mind Hacks)

入門

Github Pages

Github Pages能夠被認爲是用戶編寫的、託管在github上的靜態網頁。使用Github Pages能夠爲你提供一個免費的服務器，免去了本身搭建服務器和寫數據庫的麻煩。此外還能夠綁定本身的域名。

Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

安裝 Node.js

點擊此處訪問官網，按需下載相應版本，默認安裝能夠了

注：本人在安裝過程當中出現了Warning 1909,沒法建立快捷方式，這種狀況不多出現，若是在安裝過程當中也有這種狀況請參考百度文庫（win10系統實測可行）：《Win7安裝程序警告1909沒法建立快捷方式》

安裝 Git

點擊此處訪問官網，按需下載相應版本，默認安裝便可
參考資料：《如何在windows下安裝GIT》 　（By 俊雨廷休）
　　　　　《Pro Git（中文版）》

檢驗Git是否安裝成功

同時按下 Win 鍵和 R 鍵打開運行窗口,輸入 cmd ，而後輸入如下命令，有相應版本信息顯示則安裝成功，若不正確能夠卸載軟件從新安裝，此外若安裝成功，在桌面右鍵鼠標，能夠看到菜單裏多了 Git GUI Here 和 Git Bash Here 兩個選項，第一個是圖形界面的Git操做，另外一個是命令行

1 $ git --version 
2 $ node -v 
3 $ npm -v

安裝Hexo

選擇一個磁盤，新建一個文件夾，本身重命名文件夾（如：個人文件夾爲：Ｅ\TRHX_Blog），博客相關文件將儲存在此文件夾下，在該文件夾下右鍵鼠標，點擊 Git Bash Here，輸入如下 npm 命令便可安裝，第一個命令表示安裝 hexo，第二個命令表示安裝 hexo 部署到 git page 的 deployer，如圖所示即爲安裝成功

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

Hexo 初始化配置

在剛纔新建的文件夾裏面再次新建一個 Hexo 文件夾（如：個人文件夾爲：E\TRHX_Blog\Hexo）,進入該 Hexo 文件夾右鍵鼠標，點擊 Git Bash Here，輸入如下命令，如圖所示則安裝成功

$ hexo init

Hexo 安裝完成後，將會在指定文件夾中新建所須要的文件，Hexo 文件夾下的目錄以下：

本地查看效果

執行如下命令，執行完便可瀏覽器訪問 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 上

到目前爲止，咱們的本地博客就成功搭建了，可是如今咱們只能經過本地鏈接查看博客，咱們要作的是讓其餘人也可以訪問咱們的博客，這就須要咱們將博客部署到Github Pages上

註冊 Github 帳戶

點擊此處訪問 Github 官網，點擊 Sign Up 註冊帳戶

建立項目代碼庫

點擊 New repository 開始建立，步驟及注意事項見下圖：

配置 SSH 密鑰

只有配置好 SSH 密鑰後，咱們才能夠經過 git 操做實現本地代碼庫與 Github 代碼庫同步，在你第一次新建的文件夾裏面（如：個人文件夾爲：Ｅ\TRHX_Blog） Git Bash Here 輸入如下命令：

$ ssh-keygen -t rsa -C "your email@example.com" 
//引號裏面填寫你的郵箱地址，好比個人是tanrenhou@126.com

以後會出現：

Generating public/private rsa key pair. 
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): 
//到這裏能夠直接回車將密鑰按默認文件進行存儲

而後會出現：

Enter passphrase (empty for no passphrase): 
//這裏是要你輸入密碼，其實不須要輸什麼密碼，直接回車就行 
Enter same passphrase again:

接下來屏幕會顯示：

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: 
這裏是各類字母數字組成的字符串，結尾是你的郵箱 
The key's randomart image is: 
這裏也是各類字母數字符號組成的字符串

運行如下命令，將公鑰的內容複製到系統粘貼板上，也能夠用記事本打開 id_rsa.pub 文件（通常在 C:\Users\用戶名\.ssh 目錄下）

$ clip < ~/.ssh/id_rsa.pub

在 GitHub 帳戶中添加你的公鑰

① 登錄 GitHub，進入 Settings：

② 點擊 SSH and GPG Keys：

③ 選擇 New SSH key：

④ 粘貼密鑰：

測試

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

$ ssh -T git@github.com

以後會顯示：

輸入 yes 後會顯示：

此時表示設置正確

配置 Git 我的信息

Git 會根據用戶的名字和郵箱來記錄提交，GitHub 也是用這些信息來作權限的處理，輸入如下命令進行我的信息的設置，把名稱和郵箱替換成你本身的，名字能夠不是 GitHub 的暱稱，但爲了方便記憶，建議與 GitHub 一致

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

到此爲止 SSH Key 配置成功，本機已成功鏈接到 Github

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

① 登陸 Github 打開本身的項目 your name.github.io

② 鼠標移到 Clone or download 按鈕，選擇 Use SSH （Use HTTPS 也行，不過容易出現鏈接不上的問題）

③ 一鍵複製地址

④ 打開你建立的 Hexo 文件夾（如：E:\TRHX_Blog\Hexo），右鍵用記事本（Notepad++或者VS Code等均可以，推薦VS Code）打開該文件夾下的 _config.yml 文件

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

⑥ 在 Hexo 文件夾下分別執行如下命令

$ hexo g 
$ hexo d

或者直接執行

$ hexo g -d

執行完以後會讓你輸入你的 Github 的帳號和密碼，若是此時報如下錯誤，說明你的 deployer 沒有安裝成功

ERROR Deployer not found: git

須要執行如下命令再安裝一次：

npm install hexo-deployer-git --save

再執行 hexo g -d，你的博客就會部署到 Github 上了

⑦ 訪問博客

你的博客地址：https://你的用戶名.github.io，好比個人是：https://trhx.github.io，如今每一個人均可以經過此連接訪問你的博客了

在博客上發表文章

博客已經成功搭建了，可是咱們該怎麼寫博客呢？

① 新建一個空文章，輸入如下命令，會在項目 \Hexo\source\_posts 中生成 文章標題.md 文件，文章標題根據須要命名

$ hexo n "文章標題"

也能夠直接在 \Hexo\source\_posts 目錄下右鍵鼠標新建文本文檔，改後綴爲 .md 便可，這種方法比較方便

② 用編輯器編寫文章

md 全稱 Markdown， Markdown 是 2004 年由 John Gruberis 設計和開發的純文本格式的語法，很是的簡單實用，經常使用的標記符號屈指可數，幾分鐘便可學會， .md 文件可使用支持 Markdown 語法的編輯器編輯

推薦 Windows 上使用 Typora 或者 小書匠 編輯器，macOS 上使用 Mou 編輯器，Linux 上使用 Remarkable 編輯器，Web 端上使用 CSDN ，其餘編輯器推薦能夠參考個人另外一篇文章：《最新主流 Markdown 編輯器推薦》

文章標題，標籤，分類，封面圖片，摘要等，能夠在 Front-matter 裏面配置（Front-matter 是文件最上方以 --- 分隔的區域，用於指定個別文件的變量，官方文檔：https://hexo.io/zh-cn/docs/front-matter ），舉個例子：

---
layout: 頁面佈局（配合主題文檔使用）
title: 文章名稱
date: 文章日期
comments: 文章是否開啓評論
photos: 文章封面圖（僅部分主題支持）
tags: 
- 文章標籤一
- 文章標籤二
categories: 文章分類
description: 文章描述，即要在首頁顯示的摘要（僅部分主題支持）
---

這裏是摘要

<!-- more -->

這裏是正文

注意：description 和 <!-- more --> 方式顯示摘要二選一便可，部分主題不支持description，每一個配置英文冒號後面要空一格，不一樣主題配置有所差別，具體要參考主題文檔

當咱們用編輯器寫好文章後，可使用如下命令將其推送到服務器上

$ hexo g 
$ hexo d

或者將兩個命令合二爲一輸入如下命令：

$ hexo d -g

如今訪問你的博客就能夠看見寫好的文章啦！

參考資料：《10款流行的Markdown編輯器》 （By xiaoxiao_engineer）
　　　　　《獻給寫做者的 Markdown 新手指南》 （By 簡書）
　　　　　《認識與入門 Markdown》 （By Te_Lee）
　　　　　《markdown簡明語法》 （By 不如）
　　　　　《markdown基本語法》 （By 高鴻祥）
　　　　　《Markdown 公式指導手冊》 （By Harries）

爲博客更換本身喜歡的主題

博客也搭建好了，文章也會寫了，可是！！！默認的主題並不喜歡怎麼辦？如今，咱們就來爲本身的博客更換本身喜歡的主題

點擊此處進入 Hexo 官網的主題專欄，咱們能夠看見有許多的主題供咱們選擇

咱們要作的就是把主題克隆過來，在此咱們以主題 Aero-Dual 爲例，點進去咱們就能夠看見該主題做者的博客，鼠標滑到底，咱們能夠看見 Theme By Levblanc 的字樣（其餘主題相似），點擊做者 Levblanc ，頁面就會跳轉到該主題全部的相關文件在 Github 上的地址，複製該地址

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

$ git clone 此處填寫你剛纔複製的主題地址

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

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

等待下載完成後便可在 themes 目錄下生成 hexo-theme-aero-dual 文件夾，而後打開 Hexo 文件夾下的配置文件 _config.yml ，找到關鍵字 theme，修改參數爲：theme：hexo-theme-aero-dual （其餘主題修改爲相應名稱便可），再次注意冒號後面有一個空格！

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

$ hexo g 
$ hexo s

此時打開瀏覽器，訪問 http://localhost:4000/ 就可看見咱們的主題已經更換了，若是感受效果滿意，咱們就能夠把它部署到Github上了

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

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

此時訪問本身的博客便可看見更換後的主題，但咱們仍然須要對主題的相關配置進行修改，好比網站標題，圖標等等，Hexo 中有兩份主要的配置文件，名稱都是  _config.yml ，它們均是用於站點配置使用的。其中，一份位於站點根目錄下（好比個人：E:\TRHX_Blog\Hexo\_config.yml），主要包含 Hexo 自己整站的配置；另外一份位於主題目錄下（好比個人：E:\TRHX_Blog\Hexo\themes\hexo-theme-aero-dual\_config.yml），這份配置由主題做者提供，主要用於配置主題相關的選項，通常 _config.yml 文件裏都有相關注釋，主題也有相關文檔，按需修改便可

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

爲你的 Hexo 博客配置個性域名

本人在配置域名的時候問題百出，百度的各類方法都無論用，打開網站老是 404，多是我太笨了 　o(╥﹏╥)o　，不過好在後來終於解決了這個問題

首先咱們要購買域名，阿里雲，騰訊雲均可以，也不貴，一年幾十塊錢，最便宜幾塊錢也能買到，以阿里云爲例，我購買的域名是 itrhx.com，（最開始買的是trhx.top），購買過程就不贅述了，選擇阿里雲的解析平臺，來到阿里雲的管理控制檯，點擊進入域名解析列表或者直接點擊域名後面的解析

方法一：點擊添加記錄，須要添加兩個記錄，兩個記錄類型都是 CNAME ，第一個主機記錄爲 @ ，第二個主機記錄爲 www，記錄值都是填你本身的博客地址（好比個人是：trhx.github.io），保存以後域名解析就完成了！（主機記錄有 @ 和 www 能保證URL加不加 www 都能訪問）

方法二：兩個記錄類型爲 A ，第一個主機記錄爲 @ ，第二個主機記錄爲 www，記錄值都爲博客的 IP地址，IP地址能夠 cmd 中輸入 ping 你的博客地址 得到（好比個人：ping trhx.github.io），保存以後域名解析就完成了！

有關解析記錄類型的區別能夠參考《域名解析中A記錄、CNAME、MX記錄、NS記錄的區別和聯繫》

爲了使 GitHub 接收咱們的域名，還須要在博客的根目錄下添加一個名爲 CNAME 的文件（注意不要加.txt，沒有任何後綴名！），這個文件放到 Hexo\source 裏面，（好比個人是：E:\TRHX_Blog\Hexo\source），文件裏面填寫你的域名（加不加www都行），好比要填寫個人域名，文件裏面就寫：www.itrhx.com 或者 itrhx.com，通過以上操做，別人就能夠經過 www.itrhx.com 、itrhx.com 、trhx.github.io 三個當中任意一個訪問個人博客了！你的也同樣！

有關加不加www的問題有如下區別：

若是你填寫的是沒有www的，好比 itrhx.com，那麼不管是訪問 https://www.itrhx.com 仍是 https://itrhx.com ，都會自動跳轉到 https://itrhx.com

若是你填寫的是帶www的，好比 www.itrhx.com ，那麼不管是訪問 https://www.itrhx.com 仍是 https://itrhx.com ，都會自動跳轉到 https://www.itrhx.com

若是你在其餘平臺購買域名，或者選擇 DNSPod 等其餘域名解析，操做方法大同小異，遇到問題可自行百度解決！

參考資料：《推薦幾家域名註冊服務商》 （By Jelly Bool）
　　　　　《盤點十大免費DNS域名解析服務：穩定、可靠》

博客美化和實用功能的添加

有關博客後期的美化、實用功能的添加，能夠參考個人另外兩篇文章：
《Hexo 博客優化之博客美化》
《Hexo 博客優化之實用功能添加》

結語

一頓操做下來雖然有點兒累，但看見擁有了本身的博客仍是很是有成就感的，人生就是須要折騰，那麼如今就開始你的創做之旅吧！文章的不斷積累，你會從中受益不少的！另外，這是一篇小白寫的適用於小白的博客搭建教程，比較詳細，有這方面基礎的能夠百度有簡略一點兒的教程，文中若有錯誤還請大佬指出改正！文中涉及參考資料若有侵權請聯繫我刪除！