前言
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)支持你的吐槽,哈哈···