使用hexo搭建github博客

導言

這兩天看了些技術文章,心血來潮突然想搭建一個github博客。在網上搜了一些教程,花了點時間,終於把博客搭好,下面簡單記錄下搭建過程,做個記錄。

原理

在網上看了幾個教程,很多上來就是按照步驟輸入命令行安裝,運行。一開始看到雲裏霧裏,雖然最終是安裝成功了,但相信對於不少新手讀者來說存在不少困惑。

下面是自己的一點粗淺理解。首先,我們知道,NodeJS是一個宿主運行環境,我們可以在上面運行使用javascript寫的程序。npm是一個包管理工具。在編寫javascript代碼的過程中,我們可以通過npm來安裝、卸載、更新項目所依賴的包。而hexo就是這麼一個包,它可以通過npm來安裝,而與一般的包只能被導入所不同的是,hexo還能作爲普通的命令來使用,當它被調用的時候,實際上它是調用了NodeJS作爲運行環境來運行程序。

所以實際上我們只要將hexo作爲一個普通的命令來使用就行。

那hexo和github又是什麼關係呢?

實際上如果你實際使用會發現,使用hexo命令創建的博客文件夾中有一個public文件夾,裏面放的跟你在github上的倉庫內的文件是一毛一樣的。也就是說,其實hexo的作用就是將你本地創建的Markdown文件連同模板一起轉化成爲靜態的html文件,然後放到github倉庫上面。

當我們訪問我們所創建的靜態網頁的時候,我們可以發現,所有頁面的url都是github倉庫的文件路徑。那麼從原理上來說,你甚至完全不用管什麼hexo,只要在github上創建一個 username.github.io 的倉庫然後想裏面放html網頁文件就可以了。當然要渲染出漂亮的頁面還是用工具方便些。

安裝和使用

安裝NodeJS

既然hexo依賴於NodeJS那麼先安裝NodeJS,可以參考一下官網,windows下是一路next,*unix下也就一句命令的事,此處不贅述。一般來說npm都是隨NodeJS一同安裝的。安裝完記得檢查一下,在命令行輸入下列命令:

$ node -v

$ npm -v

安裝hexo

前面已經說了,hexo其實是一個包,所以只要使用npm管理工具安裝即可:

$ npm install -g hexo-cli

然後就可以在任何地方使用hexo這個命令來創建博客程序了。

安裝git

使用git相信是絕大部分使用程序員的必備技能,此處不多說,window下下載個安裝包一路next,*unix下也是一行命令的事。

配置git

爲了能夠將代碼順利上傳到遠程倉庫,安裝完還是要配置一下git,這裏使用ssh-key的方式驗證身份。

生成密鑰
$ git config --global user.name "gitHubusername"
$ git config --global user.email "gitHub_email"
$ ssh-keygen -t rsa -C "github_email"

這裏說一下,上面命令前兩句是說設置用戶名和郵箱爲你自己的用戶名和郵箱,ssh-keygen是使用你的github郵箱生成本機上的公鑰。非對稱加密方式要求遠程服務器知道你的公鑰來驗證你的身份。同樣,你也需要知道遠程服務器的公鑰,來驗證對方的身份。如無意外你將在自己的用戶文件夾下生成一個叫.ssh的文件夾,裏面有一個id_rsa.pub的文件,這裏面就是你的公鑰。

上傳公鑰

在你自己的github賬戶右上方頭像中點選Settings點選SSH and GPG keys,然後在右上方點選New SSH key, 然後將id_rsa.pub中的內容全部粘貼上去並保存。這樣公鑰就上傳完成了。

$ ssh [email protected]

上面的命令可以驗證前面的公鑰是否成功配置。

至此基礎設施已經完全配備完成。下面就可以使用hexo來創建博客了。

使用hexo

我們可以創建一個我博客文件

$ hexo init foldername # flodername是可選的,不填就在當前文件夾直接生成許多文件
$ cd foldername # 不填foldername就不用進入了
$ npm install # 根據package.json安裝依賴包

至此一個博客文件夾就做好了,然後就可以開始創建你的文章了:

$ hexo new your_article_title

然後你就有了一個md文件,通過這個途徑創建的文章都放在source/_posts中,當然在創建項目之初就爲你創建了一篇著名的hello,world讓你過目了。
然後你就可以用你想要的任何編輯器來編輯裏面的文件。
如前所述,hexo是一個工具,它將Markdown文件連同模板一起渲染成靜態html文件。現在既然你已經編輯好了你的文章,可以通過以下命令來進行轉化:

hexo generate

敲下命令你會發現多了一個public文件夾,裏面就是你的html文件。
現在要將html文件傳到遠程倉庫,hexo命令怎麼知道你的倉庫是多少呢?這時就要在_config.yml文件中配置了,打開文件拉到最底下,配置成下面的樣子:

deploy:
  type: git
  repository: [email protected]:username/username.github.io.git
  branch: master

這裏需要注意的是username是你git上的用戶名,而repository的值是git上的倉庫username.github.io的ssh地址。如果你寫https的形式有可能會出錯(反正我試過是出錯的)。

這樣還不夠,hexo本身沒有提供調用git的功能,所以要安裝一個依賴包:

$ npm install hexo-deployer-git --save

如無意外,你就可以將文章放到git倉庫上。下面是意外,安裝上面依賴的時候你可能會遇到:

platform unsupported hexo-deployer-git..............

這樣的錯誤。這時可以嘗試以下命令:

$ npm rebuild node-sass

然後再安裝一次:

$ npm install hexo-deployer-git --save

最後是將文件部署到github上:

$ hexo deploy

你也可以先在本地預覽一下效果,部署到本地端口(默認4000):

$ hexo server

結語

至此hexo部署和使用過程就描述完了,總結一下,hexo的作用是將Markdown文件連同模板渲染成靜態文件,它的運行依賴於NodJS運行環境,它的安裝可以使用npm包管理工具,每個博客的配置文件是_config.yml。當然這些介紹還是過於簡陋,更加詳盡的功能還需要在今後使用中進一步探索。

參考

官方文檔
could not read Username for 'https://github.com': Invalid argument錯誤
安裝hexo-deployer-git錯誤的解決方法
知乎專欄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章