基于Hexo博客程序和Github Pages來搭建自己的獨立博客

– 前言

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

– 入門

Github Pages

Github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。使用Github Pages可以為你提供一個免費的服務器,免去了自己搭建服務器和寫數據庫的麻煩。此外還可以綁定自己的域名。

Hexo

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

– 安裝 Node.js

點擊此處訪問官網,按需下載相應版本,默認安裝可以了

image

注:本人在安裝過程中出現了Warning 1909,無法創建快捷方式,這種情況很少出現,如果在安裝過程中也有這種情況請參考百度文庫(win10系統實測可行):《Win7安裝程序警告1909無法創建快捷方式》

image

– 安裝 Git

點擊此處訪問官網,按需下載相應版本,默認安裝即可

參考資料:《如何在windows下安裝GIT》  (By 俊雨廷休)

《Pro Git(中文版)》

– 檢驗軟件是否安裝成功

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

123 復制git --version node -v$ npm -v
image
image

– Hexo 安裝

選擇一個磁盤,新建一個文件夾,自己重命名文件夾(如:我的文件夾為:E\TRHX_Blog),博客相關文件將儲存在此文件夾下,在該文件夾下右鍵鼠標,點擊 Git Bash Here,輸入以下 npm 命令即可安裝,第一個命令表示安裝 hexo,第二個命令表示安裝 hexo 部署到 git page 的 deployer,如圖所示即為安裝成功

12 復制npm install hexo-cli -g npm install hexo-deployer-git --save
image

– Hexo 初始化配置

在剛才新建的文件夾里面再次新建一個 Hexo 文件夾(如:我的文件夾為:E\TRHX_Blog\Hexo),進入該 Hexo 文件夾右鍵鼠標,點擊 Git Bash Here,輸入以下命令,如圖所示則安裝成功

1 復制$ hexo init
image

Hexo 安裝完成后,將會在指定文件夾中新建所需要的文件,Hexo 文件夾下的目錄如下:

image

– 本地查看效果

執行以下命令,執行完即可登錄 http://localhost:4000/ 查看效果

12 復制hexo generate hexo server

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

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

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

image

– 將博客部署到 Github Pages 上

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

一、注冊 Github 賬戶:點擊此處訪問 Github 官網,點擊 Sign Up 注冊賬戶

二、創建項目代碼庫:點擊 New repository 開始創建,步驟及注意事項見圖:

image

三、配置 SSH 密鑰:只有配置好 SSH 密鑰后,我們才可以通過 git 操作實現本地代碼庫與 Github 代碼庫同步,在你第一次新建的文件夾里面(如:我的文件夾為:E\TRHX_Blog) Git Bash Here 輸入以下命令:

12 復制$ ssh-keygen -t rsa -C "your email@example.com"http://引號里面填寫你的郵箱地址,比如我的是tanrenhou@126.com

之后會出現:

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

然后會出現:

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

接下來屏幕會顯示:

123456 復制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:這里也是各種字母數字符號組成的字符串

運行以下命令,將公鑰的內容復制到系統粘貼板上

1 復制$ clip < ~/.ssh/id_rsa.pub

四、在 GitHub 賬戶中添加你的公鑰

1.登陸 GitHub,進入 Settings:

image

2.點擊 SSH and GPG Keys:

image

3.選擇 New SSH key:

image

4.粘貼密鑰:

image

五、測試

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

1 復制$ ssh -T git@github.com

之后會顯示:

image

輸入 yes 后會顯示:

image

此時表示設置正確

六、配置 Git 個人信息

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

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

到此為止 SSH Key 配置成功,本機已成功連接到 Github

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

一、登錄 Github 打開自己的項目 yourname.github.io

image

二、鼠標移到 Clone or download 按鈕,選擇 Use SSH

image

三、一鍵復制地址

image

四、打開你創建的 Hexo 文件夾(如:E:\TRHX_Blog\Hexo),右鍵用記事本(或者Notepad++、Vs Code等)打開該文件夾下的 _config.yml 文件

image

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

image

六、在 Hexo 文件夾下分別執行以下命令

12 復制hexo g hexo d

或者直接執行

1 復制$ hexo g -d

執行完之后會讓你輸入你的 Github 的賬號和密碼,如果此時報以下錯誤,說明你的 deployer 沒有安裝成功

1 復制ERROR Deployer not found: git

需要執行以下命令再安裝一次:

1 復制npm install hexo-deployer-git --save

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

七、訪問博客

你的博客地址:[[https://你的用戶名.github.io,比如我的是:[***********](https://trhx.github.io/](https://%E4%BD%A0%E7%9A%84%E7%94%A8%E6%88%B7%E5%90%8D.github.io%EF%BC%8C%E6%AF%94%E5%A6%82%E6%88%91%E7%9A%84%E6%98%AF%EF%BC%9A%5B%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C_%5C*%5D(https://trhx.github.io/](https://%E4%BD%A0%E7%9A%84%E7%94%A8%E6%88%B7%E5%90%8D.github.io%EF%BC%8C%E6%AF%94%E5%A6%82%E6%88%91%E7%9A%84%E6%98%AF%EF%BC%9A%5B%5C%5C%5C%5C%5C%5C%5C%5C%5C%5C%5C%5D(https://trhx.github.io/%5D(https://%25E4%25BD%25A0%25E7%259A%2584%25E7%2594%25A8%25E6%2588%25B7%25E5%2590%258D.github.io%25EF%25BC%258C%25E6%25AF%2594%25E5%25A6%2582%25E6%2588%2591%25E7%259A%2584%25E6%2598%25AF%25EF%25BC%259A%255B%255C%255C%255C%255C%255C%255C%255C%255C%255C%255C%255C%255D(https://trhx.github.io/)) ,現在每個人都可以通過此鏈接訪問你的博客了

– 如何在博客上發表文章

博客已經成功搭建了,但是我們該怎么寫博客呢?

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

1 復制$ hexo n "文章標題"

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

二、用編輯器編寫文章

md全稱 Markdown, Markdown 是 2004 年由 John Gruberis 設計和開發的純文本格式的語法,非常的簡單實用,常用的標記符號屈指可數,幾分鐘即可學會,.md文件可以使用支持 Markdown 語法的編輯器編輯,然后將寫好的文章(.md文件)保存到\Hexo\source\_posts文件夾下即可

當我們用編輯器寫好文章后,可以使用以下命令將其推送到服務器上

12 復制hexo g hexo d

或者將兩個命令合二為一輸入以下命令:

1 復制$ hexo d -g

現在訪問你的博客就可以看見寫好的文章啦!

參考資料:《10款流行的Markdown編輯器》(By xiaoxiao_engineer)

《獻給寫作者的 Markdown 新手指南》(By 簡書)

《認識與入門 Markdown》(By Te_Lee)

《markdown簡明語法》(By 不如)

《markdown基本語法》(By 高鴻祥)

《Markdown 公式指導手冊》(By Harries)

– 如何為博客更換自己喜歡的主題

博客也搭建好了,文章也會寫了,但是!!!默認的主題并不喜歡怎么辦?現在,我們就來為自己的博客更換自己喜歡的主題

點擊此處進入 Hexo 官網的主題專欄,我們可以看見有許多的主題供我們選擇

image

我們要做的就是把主題克隆過來,在此我們以主題 Aero-Dual 為例,點進去我們就可以看見該主題作者的博客,鼠標滑到底,我們可以看見 Theme By Levblanc 的字樣(其他主題類似),點擊作者 Levblanc ,頁面就會跳轉到該主題所有的相關文件在 Github 上的地址,復制該地址

image
image
image

再打開 Hexo 文件夾下的 themes 目錄(如:E:\TRHX_Blog\Hexo\themes),右鍵 Git Bash Here,輸入以下命令:

1 復制$ git clone 此處填寫你剛才復制的主題地址

比如要安裝 Aero-Dual 主題,則輸入命令:

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

等待下載完成后即可在 themes 目錄下生成 hexo-theme-aero-dual 文件夾,然后打開 Hexo 文件夾下的配置文件 _config.yml ,找到關鍵字 theme,修改參數為:theme:hexo-theme-aero-dual (其他主題修改成相應名稱即可),再次注意冒號后面有一個空格!

image

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

12 復制hexo g hexo s

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

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

123 復制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 博客配置個性域名

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

首先我們要購買域名,阿里云就可以,也不貴,一年幾十塊錢,最便宜幾塊錢也能買到,以阿里云為例,購買過程就不贅述了,選擇阿里云的解析平臺,來到阿里云的管理控制臺,點擊進入域名解析列表或者直接點擊域名后面的解析

image

方法一:點擊添加記錄,需要添加兩個記錄,兩個記錄類型都是 CNAME ,第一個主機記錄為 @ ,第二個主機記錄為 www,記錄值都是填你自己的博客地址,保存之后域名解析就完成了!

image

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

image

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

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

有關加不加www的問題有以下區別:

如果你填寫的是沒有www的,比如 xxxx.com,那么無論是訪問 https://www.xxxx.com 還是 https://xxxx.com ,都會自動跳轉到 https://xxxx.com
如果你填寫的是帶www的,比如 www.xxxx.com ,那么無論是訪問 https://www.xxxx.com 還是 https://xxxx.com ,都會自動跳轉到 http://www.xxxx.com

圖片

image

如果你在其他平臺購買域名,或者選擇阿里云 等其他域名解析,操作方法大同小異,遇到問題可自行百度解決!當然Hexo靜態網址也可以托管在阿里云服務器上,因為托管在Github上的
訪問速度肯定不能支撐很多人訪問的。除非你就打算做一個小站,那就無所謂了。

– 結語

一頓操作下來雖然有點兒累,但看見擁有了自己的博客還是非常有成就感的,人生就是需要折騰,那么現在就開始你的創作之旅吧!文章的不斷積累,你會從中受益很多的!另外,這是一篇小白寫的適用于小白的博客搭建教程,比較詳細,有這方面基礎的可以百度有簡略一點兒的教程。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,362評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,013評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,346評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,421評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,146評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,534評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,585評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,767評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,318評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,074評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,258評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,828評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,486評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,916評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,156評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,993評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,234評論 2 375

推薦閱讀更多精彩內容