使用Hexo+GitHub搭建個人博客

? ? 寫這篇文章也是為了鞏固一下使用Hexo搭建博客的流程,剛開始接觸博客,應(yīng)該說比較晚了,比較慚愧,那目前比較流行的大部分也是通過Hexo和GitHub來搭建個人博客,畢竟GitHub提供免費的服務(wù)器,這點還是很nice的,搭建過程也踩了不少坑,大致總結(jié)一下吧,也是通過網(wǎng)上搜索了我遇到的相關(guān)情況,把這些問題以及搭建的過程寫下來后續(xù)我也能看看鞏固一下,好了下面開始操練起來了。(目前是基于mac OS操作系統(tǒng)搭建的)

GitHub上創(chuàng)建repository

1.首先創(chuàng)建一個resitory



? ? ? ?這里注意一下Repository name一定是GitHub的用戶名.github.io的形式,否則不能成功部署。到了這里點擊Create repository就算創(chuàng)建成功了一個repository。

2.添加SSH keys

? ? 這個很關(guān)鍵SSH keys,由于遠程的代碼管理是基于SSH的,所以要使用遠程的Git則需要SSH的配置,繼續(xù)上圖開始配置。



這個選擇到SSH and GPG keys會出現(xiàn)右邊的界面,這個時候點擊右上角的New SSH key就會出現(xiàn)下圖。


title可以自己起個名字,關(guān)鍵是key怎么填寫呢,看著需要一定的格式,是的這里我們需要通過終端打開自己的.ssh里面的一個id_rsa.pub文件如下圖找到這個文件所在



打開id_rsa.pub文件,文本編輯器打開即可,我們需要將里面的東西全部復制下來


這個是我自己的,每個用戶的不一樣,復制之后就可以粘貼到我們之前說的這個key里面。


至此SSH keys就算完成了,如何測試是否可行了呢,這時候打開終端,輸入ssh -T git@github.com,如下圖


如果出現(xiàn)successfully就是已經(jīng)完成了。好了現(xiàn)在搭建GitHub的resitory就算完成了。

安裝并設(shè)置Hexo主題

1.安裝Hexo

? 這些網(wǎng)上有很多,我就貼一下具體的步驟吧

安裝環(huán)境及 Hexo

node.js

git

Mac OSX 用戶在終端里用npm命令安裝 Hexo

npm install -g hexo-cli

若寫入權(quán)限不夠,加sudo 。

初始化 Hexo

Hexo 安裝好后,打開終端,想好 Hexo 的初始化位置,比如:/Users/sunshine/Blog/hexo,執(zhí)行一下命令行:

1 hexo init /Users/sunshine/Blog/hexo

2 cd /Users/sunshine/Blog/hexo

3 npm install

若寫入權(quán)限不夠,加sudo 。Hexo就初始化完成。

2.配置Hexo

配置文件有三個是比較重要的

首先是_config.yml

打開之后有幾個是需要配置的,下圖是_config.yml的幾個比較重要的配置



首先Site下面的東西是博客上面需要顯示的一些基本配置,關(guān)鍵是deploy下面的type注意一定是git現(xiàn)在Hexo3.0已經(jīng)默認是git類型github已經(jīng)不起作用了,還有branch事master分支,Extensions下面的theme是主題,我們可以自己配置一些喜歡的主題,之前我用的是MOxFIVE寫的yelee主題,可以在終端cd到hexo目錄下(cd /Users/sunshine/Blog/hexo)執(zhí)行一下命令

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

主要現(xiàn)在有的人比較喜歡next主題,因為這個主題相對來說比較簡潔,同樣可以執(zhí)行一下命令

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

這樣主題我們可以在hexo下的themes文件下可以看到相關(guān)的主題文件,打開themes下的next文件(本人用的是next主題,所以就介紹一下next相關(guān)配置),打開next下的_config.yml文件。

?可能剛開始在預覽的過程中,首頁和歸檔都是英文顯示的,這個時候我們需要把next文件下的language文件的zh-Hans.yml重命名成zh-CN.yml,這個也是之前踩過的坑。

還有側(cè)邊欄是需要點擊才會顯示的,如果我們想讓側(cè)邊欄顯示在左邊而不是隱藏的話,需要將scheme: Pisces改成這個屬性就好了,還有一些圖標未顯示,如github,或者weibo的圖標,是因為需要像下圖這樣配置。


還有如果不想讓整篇文章顯示全,只是顯示大概,下面出現(xiàn)閱讀全文的按鈕的話,需要設(shè)置這個auto_excerpt:下面的enable: true這樣就可以了

大致這樣就算配置完成了,那么需要將Hexo的一些常用指令說一下

hexo clean 在頻繁切換主題或者寫博客的時候最后先執(zhí)行一下這個命令

hexo g 將修改的東西生成到public靜態(tài)文件里面,這步必須要有

hexo s 可以生成本地預覽

hexo d 將修改過的東西提交到GitHub上

由于之前我不小心把整個hexo給刪除了,重新配置之后hexo d老是失敗,就上網(wǎng)搜了一下發(fā)現(xiàn)執(zhí)行下面這個就行了,這個命令就是將hexo的_config.yml的deploy的type改成git型,但是我里面已經(jīng)是git的不明白這個是為啥,估計是之前緩存問題吧

npm install hexo-deployer-git --save

3.總結(jié)

至此整個Hexo+GitHub基本就配置完成了,如果大家不想使用GitHub上的域名,可以自己在萬網(wǎng)上買個域名,買完之后需要域名解析如下圖


之后需要在自己建的resitory上也設(shè)置一下,如下圖,打開setting,找到下面的GitHub pages在Custom domain下面寫上自己買的域名就ok了,后面就可以拿出去裝個逼還能跑了。


那么搭建了博客之后,我們就可以寫自己的文章,和創(chuàng)建文章了,創(chuàng)建文章依然可以使用下面的指令

hexo new "new article"

執(zhí)行完之后會出現(xiàn)一個.md的文件打開之后我們可以使用MarDown的編輯器進行編輯,編輯完成,就可以通過

hexo g 和 hexo d來進行提交,大致就是這樣了。

可能有說的不對的地方還請大家指教,以后就要開始好好學習寫東西了,又可以寫完東西之后拿出來裝個逼了,哈哈。

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

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