前言
一直想搭建自己的技術(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)部多出了很多子文件,如圖~
這時(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。如下圖所示~
4.部署本地文件到github
接下來是把博客放到github上面看效果。編輯E盤hexo文件下的_config.yml文件。
type和branch默認(rèn)填寫這兩個(gè)就行了,repository這塊的話可以到剛才新建的項(xiàng)目中獲取到SSH或者Http不同的鏈接。
配置好這些后接下來就是執(zhí)行命令部署到Github上面了。
這里我說一點(diǎn)判斷代碼有沒有部署到github上面,默認(rèn)剛開始你的項(xiàng)目是這樣的
當(dāng)你執(zhí)行以下命令后
hexo g
hexo d
你的項(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è)主題需要被注釋)
將更新部署到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,之后刷新幾次后很快頁面就又能打開了,而且是更新后的模板。