天天看點

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

3 優雅地使用Hexo

3.1 Hexo簡介

Hexo是一個簡單、快速、強大的基于 Github Pages 的部落格釋出工具,支援Markdown格式,有衆多優秀插件和主題。

官網 github

3.2 原理

由于github pages存放的都是靜态檔案,部落格存放的不隻是文章内容,還有文章清單、分類、标簽、翻頁等動态内容,假如每次寫完一篇文章都要手動更新博文目錄和相關連結資訊,相信誰都會瘋掉,是以hexo所做的就是将這些md檔案都放在本地,每次寫完文章後調用寫好的指令來批量完成相關頁面的生成,然後再将有改動的頁面送出到github。

3.3 注意事項

Hexo不同版本差别比較大,網上很多文章的配置資訊都是基于2.x的,是以注意不要被誤導;

hexo有2種_config.yml檔案,一個是根目錄下的全局的_config.yml,一個是各個theme下的;

3.4 安裝Hexo

在你認為合适的地方創個檔案夾,我是在D盤建了一個blog檔案夾。然後通過指令行進入到該檔案夾裡面

$ npm install -g hexo-cli      
手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

安裝位置

‎⁨soft⁩ ▸ ⁨usr⁩ ▸ ⁨local⁩ ▸ ⁨lib⁩ ▸ ⁨node_modules⁩      

3.5 初始化

在電腦的某個地方建立一個名為hexo的檔案夾(名字可以随便取),比如我的是/Volumes/doc/hexo,由于這個檔案夾将來就作為你存放代碼的地方,是以最好不要随便放。

$ cd /f/Workspaces/hexo/
$ hexo init      

$ cd /f/Workspaces/hexo/
$ hexo init      
手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo
  • 啟動服務
$ hexo s      
手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

執行以上指令之後,hexo就會在public檔案夾生成相關html檔案,這些檔案将來都是要送出到github去的

hexo s是開啟本地預覽服務

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

打開浏覽器通路 

http://localhost:4000

 即可看到内容

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

3.6 修改主題

預設主題醜到反人類,替換一個好看點的主題

首先下載下傳這個主題:

$ git clone https://github.com/wizardforcel/hexo-theme-landfarz.git themes/landfarz      
手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

下載下傳後的主題都在這裡

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

修改

_config.yml

中的theme

landscape改為theme: landfarz

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

然後重新執行hexo g來重新生成

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

3.7 備份

在上傳代碼到github之前,一定要記得先把你以前所有代碼下載下傳下來(雖然github有版本管理,但備份一下總是好的),因為從hexo送出代碼時會把你以前的所有代碼都删掉。

3.8 部署

如果你一切都配置好了,釋出上傳很容易,一句hexo d就搞定,當然關鍵還是你要把所有東西配置好。

  • 首先,ssh key肯定要配置好。
  • 其次,配置_config.yml中有關deploy的部分:

正确寫法:

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

錯誤寫法:

deploy:
  type: github
  repository: https://github.com/liuxianan/liuxianan.github.io.git
  branch: master      

後面一種寫法是hexo2.x的寫法,現在已經不行了

  • 無論是哪種寫法,此時直接執行hexo d會報如下錯誤:
手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo
  • 還需要安裝一個插件
sudo npm install hexo-deployer-git --save      
手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

根據警告再安裝即可

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

發現又有警告,MD!

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

好了,終于沒有警告了!

輸入hexo d就會将本次有改動的代碼全部送出,沒有改動的不會

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

3.9 保留README.md等檔案

手把手教你搭建GitHub個人部落格網站(中)3 優雅地使用Hexo

送出之後網頁上一看,發現以前其它代碼都沒了,此時不要慌,一些非md檔案可以把他們放到source檔案夾下,這裡的所有檔案都會原樣複制(除了md檔案)到public目錄的:

由于hexo預設會把所有md檔案都轉換成html,包括README.md,所有需要每次生成之後、上傳之前,手動将README.md複制到public目錄,并删除README.html。

3.10 常用hexo指令

常見指令

hexo new "postName" #建立文章
hexo new page "pageName" #建立頁面
hexo generate #生成靜态頁面至public目錄
hexo server #開啟預覽通路端口(預設端口4000,'ctrl + c'關閉server)
hexo deploy #部署到GitHub
hexo help  # 檢視幫助
hexo version  #檢視Hexo的版本
      

縮寫:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
      

組合指令:

hexo s -g #生成并本地預覽
hexo d -g #生成并上傳
      

3.11 _config.yml

這裡面都是一些全局配置,每個參數的意思都比較簡單明了,是以就不作詳細介紹了。

需要特别注意的地方是,冒号後面必須有一個空格,否則可能會出問題。

繼續閱讀