如何利用Github+Hexo搭建個(gè)人博客

前言

2020年伊始,給自己設(shè)定了一些年度目標(biāo),其中之一就是在今年開始搭建自己的個(gè)人博客,記錄和分享一些學(xué)習(xí)總結(jié)和工作經(jīng)驗(yàn),希望自己可以有一些沉淀和積累吧,同時(shí),也希望給大家?guī)?lái)一點(diǎn)點(diǎn)幫助。

在這個(gè)背景下,我開始搭建自己的個(gè)人博客。
以下是我個(gè)人搭建博客的流程和心得。

(備注:本人操作系統(tǒng)為mac,部分操作在windows下會(huì)有一些不同。)

環(huán)境準(zhǔn)備

安裝Git

由于需要上傳文件到Github,因此我們本地必須安裝git.

# 安裝git
brew install git
# 查看安裝版本
git --version

安裝NodeJs

我們要搭建的Hexo博客是基于NodeJs的,中間會(huì)有很多操作依賴其中的npm工具。

# 安裝
brew install node
# 查看安裝版本
node -v

安裝Hexo

Hexo是一個(gè)強(qiáng)大博客框架,能夠幫助我們完成博客的快速搭建,支持MarkDown書寫博客。

# 安裝hexo
npm i -g hexo
# 查看版本
hexo -v

博客搭建

創(chuàng)建博客倉(cāng)庫(kù)

在github中創(chuàng)建一個(gè)名為yourUserName.github.io,其中yourUserName是你的github用戶名。

示例圖:


備注:由于我的倉(cāng)庫(kù)中已經(jīng)存在了對(duì)應(yīng)倉(cāng)庫(kù),所以截圖會(huì)有紅色提示,讀者在搭建時(shí)注意倉(cāng)庫(kù)名稱前綴和自己的username保持一致。

創(chuàng)建博客框架

接下來(lái)我們需要在本地來(lái)初始化我們的博客框架。

# 創(chuàng)建本地的博客目錄
mkdir ~/blog
# 進(jìn)入目錄
cd ~/blog
# 執(zhí)行博客框架初始化
hexo init

完成初始化后目錄下會(huì)有以下文件或目錄,對(duì)應(yīng)的內(nèi)容如下:

  • node_modules:框架依賴包
  • public:存放生成的博客頁(yè)面
  • scaffolds:用命令生成文章使用的模板
  • source:存放命令創(chuàng)建的博客或者依賴的文件資源
  • themes:放置博客的主題文件
  • _config.yml:博客框架的配置文件
  • db.json:source解析所得到的數(shù)據(jù)文件
  • package.json:項(xiàng)目所需模塊項(xiàng)目的配置信息

本地博客框架完成后接下來(lái)就需要進(jìn)行博客配置修改。

關(guān)聯(lián)GitHub博客倉(cāng)庫(kù)

首先我們要做的是建立本地博客和github博客倉(cāng)庫(kù)的關(guān)聯(lián)。
在blog根目錄下,找到生成的_config.yml文件,修改對(duì)應(yīng)的部署配置:

deploy:
  type: git
  repo: https://github.com/Git-Aries/Git-Aries.github.io
  branch: master

其中還有一些site及個(gè)人信息相關(guān)的字段,這里不贅述。完成配置后,我們需要安裝hexo部署到git的插件

npm install hexo-deployer-git --save

本地執(zhí)行以下操作:

# 清理
hexo clean
# 生成靜態(tài)博客文件
hexo generate
# 部署到指定github博客倉(cāng)庫(kù)
hexo deploy

執(zhí)行完成后,耐心等待1-2分鐘,在瀏覽器中訪問(wèn)我們的博客地址http://yourGithubName.github.io,可以發(fā)現(xiàn)我們的博客就完成初步搭建了。
備注: yourGithubName替換為你的github用戶名。

本地調(diào)試

在絕大多數(shù)情況下,我們需要先自己確認(rèn)博客內(nèi)容能正常展示,再發(fā)布到github博客倉(cāng)庫(kù)。這時(shí)候我們可以執(zhí)行hexo server,在本地起一個(gè)hexo服務(wù)進(jìn)程,然后在瀏覽器訪問(wèn)http:127.0.0.1:4000,同樣可以訪問(wèn)我們的博客主頁(yè)。
通常情況下,本地調(diào)試時(shí),修改博客后直接刷新瀏覽器頁(yè)面就可以更新博客內(nèi)容,但是如果修改的是博客框架配置,則需要重啟本地hexo server才能生效。

# 查詢hexo服務(wù)進(jìn)程
ps aux | grep hexo
# 沙雕hexo server進(jìn)程
kill -9 pid
# 重啟服務(wù)
hexo server

主題配置

Hexo的默認(rèn)主題是landscape,這個(gè)主題也許不合你的心意,但是Hexo維護(hù)了自己的主題平臺(tái),里面有很多博客主題可以下載,此外Github上也有很多開發(fā)者開發(fā)了很精美的博客模板,筆者的博客模板也是在github上下載的,這里給作者打個(gè)廣告,對(duì)作者表示感謝!

主題yilia-plus是在yilia主題基礎(chǔ)上進(jìn)行了優(yōu)化和部分功能擴(kuò)展。
OK,下面繼續(xù)正題, 來(lái)講一下主題切換的配置:

# 切換到本地博客目錄
cd ~/blog
# 下載對(duì)應(yīng)的博客主題到themes目錄下,
git clone https://github.com/JoeyBling/hexo-theme-yilia-plus.git themes/yilia-plus

切換主題配置,在博客框架的配置文件_config.yml中找到主題配置項(xiàng)修改為theme: yilia-plus.
每個(gè)主題也有自己的配置文件,進(jìn)入themes/yilia-plus目錄下,找到_config.yml文件,根據(jù)注釋按照自己的需求進(jìn)行修改,完成修改后重新發(fā)布即可。

個(gè)人博客搭建類的心得就分享到這里,后續(xù)會(huì)慢慢更新一些利用Hexo寫博客的心得吧,沒(méi)有寫博客的經(jīng)驗(yàn),很多東西說(shuō)的比較粗糙,也希望得到你的諒解!再次推一波我的個(gè)人博客,暫時(shí)還沒(méi)開通評(píng)論功能,一定盡快開通來(lái)支持你的吐槽,哈哈···

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容