使用Hexo搭建個(gè)人博客

前言

一直想搭建自己的技術(shù)博客,這次趁著離職時(shí)間在網(wǎng)上找了很多教程,總算是把屬于自己的blog搭建起來了。我的個(gè)人博客地址以及搭建過程中參考兩篇教程1.這篇主要是講解如何安裝hexo以及將本地搭建好的博客放到Github上面看效果。2.這篇主要是講解搭建屬于自己的博客主題(next主題)。下面記錄我在搭建個(gè)人博客中步驟以及遇到的一些坑。

正文

基本要求:電腦上要下載了git和nodejs以及有g(shù)ithub賬號(hào)。
1.我在E盤下面新建了一個(gè)名為hexo的文件夾,然后再hexo文件夾內(nèi)點(diǎn)擊Git bash,使用一下命令安裝hexo

npm install hexo-cli -g

因?yàn)槭窃趃it里面操作的,所以最好直接先運(yùn)行這個(gè)命令

npm install hexo-deployer-git --save

輸入此命令可以解決這兩個(gè)問題ERROR Deployer not found : github和ERROR Deployer not found : git.

2.執(zhí)行一下命令,Hexo會(huì)自動(dòng)在該文件夾下下載搭建網(wǎng)站所需的所有文件。

hexo init

安裝依賴包

npm install

這時(shí)你可以看到原本是空的hexo文件內(nèi)部多出了很多子文件,如圖~

Paste_Image.png

這時(shí)可以說明hexo本地環(huán)境搭建好了,然后依次執(zhí)行以下命令

hexo g
hexo s

然后用瀏覽器訪問http://localhost:4000/,此時(shí),就可以看到一個(gè)漂亮的博客了,這個(gè)博客只是在本地的,別人是看不到的。

3.創(chuàng)建repository
創(chuàng)建的時(shí)候只需要填寫Repository name即可,這個(gè)名字的格式必須為yourname.github.io,例如我的github賬號(hào)為sfsoul,那么我需要填寫的Repository name就為sfsoul.github.io。如下圖所示~

Paste_Image.png

4.部署本地文件到github
接下來是把博客放到github上面看效果。編輯E盤hexo文件下的_config.yml文件。

Paste_Image.png

type和branch默認(rèn)填寫這兩個(gè)就行了,repository這塊的話可以到剛才新建的項(xiàng)目中獲取到SSH或者Http不同的鏈接。
配置好這些后接下來就是執(zhí)行命令部署到Github上面了。

這里我說一點(diǎn)判斷代碼有沒有部署到github上面,默認(rèn)剛開始你的項(xiàng)目是這樣的

Paste_Image.png

當(dāng)你執(zhí)行以下命令后

hexo g
hexo d
Paste_Image.png

你的項(xiàng)目頁面會(huì)變成這樣的,就可以說明本地的代碼已經(jīng)同步提交到了github上面。同時(shí)你只要輸入sfsoul.github.io就可以看到自己的博客了,內(nèi)容和http://localhost:4000/上面看到的是一樣的。

更換博客主題

現(xiàn)在默認(rèn)安裝的hexo文件,里面的主題是themes文件下的landscape,現(xiàn)在我們來把它更換為next主題。此處擁有所有的主題可以自行選擇下載。我們找到NexT主題然后點(diǎn)擊進(jìn)入,更換主題的命令行為git clone 主題地址 themes/主題名稱,這里以NexT主題為例:

git clone https://github.com/iissnan/hexo-theme-next themes/next

等它下載完之后,進(jìn)入到hexo文件夾下面找到配置文件_config.yml,找到theme字段,將landscape改為next即可。
然后依次輸入以下命令

hexo g
hexo s

再打開http://localhost:4000/ 就能預(yù)覽到該主題的默認(rèn)效果。
同時(shí)NexT主題中也含有三種子主題供選擇,若想更換主題可以在hexo/themes/next/_config.yml 這個(gè)文件中找到Schemes節(jié)點(diǎn),可以自行將注釋去掉,依次執(zhí)行hexo g 和 hexo s在本地觀看效果。(需要注意的是只能顯示出一個(gè)主題,即一定有兩個(gè)主題需要被注釋)

Paste_Image.png

將更新部署到Github上面時(shí)依次執(zhí)行以下命令:

hexo clean
hexo g
hexo d

此時(shí)我刷新頁面發(fā)現(xiàn)并打不開,等待了段時(shí)間也不行,然后我對(duì)比之前代碼版本發(fā)現(xiàn)更新后的代碼倉庫中缺少了CNAME文件,這個(gè)關(guān)系到域名解析的過程,所以我又手動(dòng)添加了一個(gè)該文件(必須命名CNAME,在hexo文件下面創(chuàng)建即可),文件內(nèi)容為自己的網(wǎng)站域名形如sfsoul.github.io,之后刷新幾次后很快頁面就又能打開了,而且是更新后的模板。

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

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