使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

最近一直想做一個自己的個人博客,其實有很多框架可以用來搭建自己的個人博客,比如django,我最開始就是想到的它,但是看了有一段時間,感覺自己還是沒有領悟,同時自己的域名也還沒有審批下來,所以決定轉戰大家熟悉的gitpages搭建自己的博客。使用的最主要的技術是hexo+gitpages+workdown。其實很簡單,希望本文對大家能有所幫助。

首先,我們應該搞清楚一個問題,一個博客是什麼? 博客,也就是用文字和圖片來記錄自己一些心得和生活的地方。現在有很多大廠都有提供博客寫作,比如 博客園,cdsn,知乎,新浪微博其實也可以算,只不過它的功能已經遠比博客的功能要多得多了。搭建博客需要哪些條件:1.服務器2.域名3.搭建框架4.寫作工具。

在這裡,服務器,我們就用GitHub的服務器,域名就用GitHub提供的域名,框架選擇hexo,簡潔而優雅。下面我們來具體看一下。


GitHub為了大家方便管理自己的倉庫,提供一個靜態的網頁來使自己的倉庫容易被其他人瀏覽,當然,你完全可以用它來做自己的博客。具體方式是

1.GitHub的配置

GitHub的操作在自己的GitHub中新建一個倉庫,叫做:用戶名.http://github.io,比如我的GitHub的用戶名叫做reBiocoder,所以,我應該新建一個倉庫叫做:http://reBiocoder.github.io。必須這樣命名,不然的話,GitHub是無法識別的,因為這裡的倉庫名實際上就是GitHub分配給你的域名,每個用戶只能分配一個域名。

2.安裝hexo

安裝hexo的前提是需要你的電腦裡已經安裝了node.js和git,node.js是由Ryan Dahi在09年發佈的一款js工具,它能夠在服務器上良好的運行js腳本。關於git,我曾經寫過一篇git博文,大家可以看一下python後階段的學習思路以及對git的基本理解。node.js和git的安裝都很簡單,直接搜索然後安裝即可。

如果電腦安裝好了上述程序,你只需要在gitbash中輸入:

npm install -g hexo-cli

即可成功安裝hexo,如果在git bash中無法安裝,可以在node.js command prompt 中進行安裝(node.js安裝成功後自然就會有)

之後就是將本地git與github向關聯,在git bash中使用命令:

ssh-keygen -t rsa -C [email protected]

這裡注意把郵箱換成你註冊github是的郵箱,然後一路回車即可。直到出現

使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

,如圖所示為止。

此時你的電腦c盤用戶文件夾裡面會出現一個.ssh文件

使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

可以檢驗一下你的GitHub和本地git是否關聯成功:

ssh -T [email protected]

如果顯示welcome *** ! 說明你已經關聯成功了。

它的原理是這樣的:當你輸入第一條命令之後,在本地會創建一對密鑰,一個私鑰和一個公鑰,其中公鑰就是在.ssh文件夾中的文件。將它保存到GitHub之後,就相當於在用ssh遠程與GitHub服務器時,會自動與你的倉庫匹配,因為只有你的倉庫有密鑰。

這樣準備工作就做完了,當然,建議你熟悉一下git命令,我上面推薦的博客,值得一看。


3.創建一個hexo項目

在你喜歡的地方,新建一個文件夾,然後再文件夾(使用git bash打開文件夾)裡面使用命令:

hexo init

初始化hexo,此時在文件夾中會出現一些框架文件,如圖:

使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

在電腦中打開test文件夾:

使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

可以看見,有很多框架文件。

網上關於hexo的教程很多,我就不一一細說,我們重點看一下原理:

第一個文件 node_modules;這個文件實際上就是node.js的模板文件,一般情況下,這是不用我們進行更改的。

第二個文件 scaffolds,這是一個模板文件夾,在hexo中有一個叫做Front-matter的配置,它是用來聲明每篇博文中所涉及的一些變量的。比如我這篇博客,它的front-matter就是:

使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

。而scaffold這個文件夾就是可以改變front-matter。

地三個文件夾:source 這個文件中存放的是你的文章,分類和標籤的路徑。 也就是你寫的文章,以及你所設置的標籤和分類來世都是存放在這個文件夾裡面的,當你

g`之後,hexo便會自動幫你將這樣文件夾變成路徑,部署到public文件夾中。而public文件夾也就是你的根目錄“/”。
第四個themes: 它是用來存放你所下載的主題的,主題的配置,通過主題裡面的```_config.yml```來進行配置

後面的四個文件,只介紹一下```_confing.yml```,這個文件是一個配置文件,它是站點的配置文件,和主題的配置文件是不一樣的。
現在,你可以在git bash中輸入命令:
hexo g #生成hexo
hexo s #啟動本地測試服務

然後你就可以在瀏覽器中輸入hexo生成的一個測試站點,就可以看見你的博客主頁啦!

當然,這樣配置,其他人是不能訪問你的博客的,你還需要將你的博客部署到你的GitHub上面,在hexo中這個操作,異常地簡單,你只需要:

hexo g -d

即可。 此時,你在瀏覽器中輸入:用戶名.http://githb.io就可以看見你的博客啦,比如我的:http://reBiocoder.github.io。

基本操作就是這些。


下面來講一下寫博客和留言系統的配置

工具:markdown

注意問題:插入圖片的方式

暫時,插入圖片,我還沒有發現一些好的方法,hexo的官方文檔給出的是使用標籤語法來進行插圖,但是當我在博客中加入了gitment留言系統之後,由於使gitment之後,為了不報錯permalink需要被改,也就是 permalink: :year/:month/:day/:title/中的title需要被換,原因是title有字數限制,而加入評論系統的gitment需要使用permalink來作為url,這裡為了gitment不報錯,將:title改成:subtitle,也就是改成副標題。 此時,在之後的博文中的front-matter中,必須還要加上subtitle(副標題)。 這樣一來,我的文件路徑就被更改了,嘗試了幾次發現,使用hexo3中新方法:

使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

還是會使路徑錯誤。 所以決定改用圖床,直接上外鏈,使用的工具是SM.MS,

它能給上傳的圖片生成一個外鏈,比如:

使用hexo+gitpages搭建自己的個人博客網站(原理詳解)

然後使用markdown的語法就能將圖片插入進來,網上有人推薦使用七牛雲,實際上我不是很喜歡,因為它還要實名認證什麼的,很麻煩,SM.MS可以直接使用。

博文寫完之後,只需要hexo g -d即可。


hexo真的是一款簡約大方的框架,好像是一個臺灣人寫的,所以對中文支持也特別好,真心不錯。 後面可能更新一些關於數據結構與算法的文章,我想把數據結構與算法的c代碼在過一遍。

更多優質內容請關注微信公眾號:生物信息與python

我的博客:www.lovexu.xyz

GitHub:reBiocoder


分享到:


相關文章: