基于Hexo博客程序和Github Pages來(lái)搭建自己的獨(dú)立博客

– 前言

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

– 入門(mén)

Github Pages

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

Hexo

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

– 安裝 Node.js

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

image

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

image

– 安裝 Git

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

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

《Pro Git(中文版)》

– 檢驗(yàn)軟件是否安裝成功

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

123 復(fù)制git --version node -v$ npm -v
image
image

– Hexo 安裝

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

12 復(fù)制npm install hexo-cli -g npm install hexo-deployer-git --save
image

– Hexo 初始化配置

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

1 復(fù)制$ hexo init
image

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

image

– 本地查看效果

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

12 復(fù)制hexo generate hexo server

顯示以下信息說(shuō)明操作成功:

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

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

image

– 將博客部署到 Github Pages 上

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

一、注冊(cè) Github 賬戶(hù):點(diǎn)擊此處訪問(wèn) Github 官網(wǎng),點(diǎn)擊 Sign Up 注冊(cè)賬戶(hù)

二、創(chuàng)建項(xiàng)目代碼庫(kù):點(diǎn)擊 New repository 開(kāi)始創(chuàng)建,步驟及注意事項(xiàng)見(jiàn)圖:

image

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

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

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

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

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

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

接下來(lái)屏幕會(huì)顯示:

123456 復(fù)制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)粘貼板上

1 復(fù)制$ clip < ~/.ssh/id_rsa.pub

四、在 GitHub 賬戶(hù)中添加你的公鑰

1.登陸 GitHub,進(jìn)入 Settings:

image

2.點(diǎn)擊 SSH and GPG Keys:

image

3.選擇 New SSH key:

image

4.粘貼密鑰:

image

五、測(cè)試

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

1 復(fù)制$ ssh -T git@github.com

之后會(huì)顯示:

image

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

image

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

六、配置 Git 個(gè)人信息

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

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

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

– 將本地的 Hexo 文件更新到 Github 的庫(kù)中

一、登錄 Github 打開(kāi)自己的項(xiàng)目 yourname.github.io

image

二、鼠標(biāo)移到 Clone or download 按鈕,選擇 Use SSH

image

三、一鍵復(fù)制地址

image

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

image

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

image

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

12 復(fù)制hexo g hexo d

或者直接執(zhí)行

1 復(fù)制$ hexo g -d

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

1 復(fù)制ERROR Deployer not found: git

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

1 復(fù)制npm install hexo-deployer-git --save

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

七、訪問(wèn)博客

你的博客地址:[[https://你的用戶(hù)名.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/)) ,現(xiàn)在每個(gè)人都可以通過(guò)此鏈接訪問(wèn)你的博客了

– 如何在博客上發(fā)表文章

博客已經(jīng)成功搭建了,但是我們?cè)撛趺磳?xiě)博客呢?

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

1 復(fù)制$ hexo n "文章標(biāo)題"

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

二、用編輯器編寫(xiě)文章

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

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

12 復(fù)制hexo g hexo d

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

1 復(fù)制$ hexo d -g

現(xiàn)在訪問(wèn)你的博客就可以看見(jiàn)寫(xiě)好的文章啦!

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

《獻(xiàn)給寫(xiě)作者的 Markdown 新手指南》(By 簡(jiǎn)書(shū))

《認(rèn)識(shí)與入門(mén) Markdown》(By Te_Lee)

《markdown簡(jiǎn)明語(yǔ)法》(By 不如)

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

《Markdown 公式指導(dǎo)手冊(cè)》(By Harries)

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

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

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

image

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

image
image
image

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

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

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

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

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

image

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

12 復(fù)制hexo g hexo s

此時(shí)打開(kāi)瀏覽器,訪問(wèn) http://localhost:4000/ 就可看見(jiàn)我們的主題已經(jīng)更換了,如果感覺(jué)效果滿(mǎn)意,我們就可以把它部署到Github上了

打開(kāi) Hexo 文件夾,右鍵 Git Bash Here ,輸入以下命令:

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

此時(shí)訪問(wèn)自己的博客即可看見(jiàn)更換后的主題,但我們?nèi)匀恍枰獙?duì)主題的相關(guān)配置進(jìn)行修改,比如網(wǎng)站標(biāo)題,圖標(biāo)等等,Hexo 中有兩份主要的配置文件,名稱(chēng)都是 _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)注釋?zhuān)葱栊薷募纯?/p>

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

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

首先我們要購(gòu)買(mǎi)域名,阿里云就可以,也不貴,一年幾十塊錢(qián),最便宜幾塊錢(qián)也能買(mǎi)到,以阿里云為例,購(gòu)買(mǎi)過(guò)程就不贅述了,選擇阿里云的解析平臺(tái),來(lái)到阿里云的管理控制臺(tái),點(diǎn)擊進(jìn)入域名解析列表或者直接點(diǎn)擊域名后面的解析

image

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

image

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

image

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

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

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

如果你填寫(xiě)的是沒(méi)有www的,比如 xxxx.com,那么無(wú)論是訪問(wèn) https://www.xxxx.com 還是 https://xxxx.com ,都會(huì)自動(dòng)跳轉(zhuǎn)到 https://xxxx.com
如果你填寫(xiě)的是帶www的,比如 www.xxxx.com ,那么無(wú)論是訪問(wèn) https://www.xxxx.com 還是 https://xxxx.com ,都會(huì)自動(dòng)跳轉(zhuǎn)到 http://www.xxxx.com

圖片

image

如果你在其他平臺(tái)購(gòu)買(mǎi)域名,或者選擇阿里云 等其他域名解析,操作方法大同小異,遇到問(wèn)題可自行百度解決!當(dāng)然Hexo靜態(tài)網(wǎng)址也可以托管在阿里云服務(wù)器上,因?yàn)橥泄茉贕ithub上的
訪問(wèn)速度肯定不能支撐很多人訪問(wèn)的。除非你就打算做一個(gè)小站,那就無(wú)所謂了。

– 結(jié)語(yǔ)

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容