Set up Github Pages with Hexo, migrating from Jekyll

Set up Github Pages with Hexo, migrating from Jekyll.

本文介紹用Hexo創建github pages, 其中包含了從Jekyll遷移過來的過程.
Migrate github pages from Jekyll to Hexo.
Set up github pages using Hexo.
不光是遷移哇, 直接用Hexo setup github pages 看這個也有用哇.

爲何要把github pages 從Jekyll實現遷移到Hexo?
前陣子用Jekyll建了github pages(官方推薦), 可是發現添加代碼段比較痛苦, markdown的先後三個點並不能標記一個代碼塊, 須要在代碼塊先後加上兩句特定的語句.
若是一篇文章有不少代碼塊, 這樣一個一個加下來比較費勁, 並且加完了以後代碼段的樣式也不是很好看.

爲此很苦惱的我問了phodal大神, 大神回覆: Hexo.

下文記錄了個人操做過程.

安裝Hexo

必要條件:
Node.js
能夠選個pkg,下載後點擊安裝, 裝完以後告訴你路徑:

也能夠用nvm裝的
nvm
Git
這個通常你們都有噠~

上面兩個都有以後, 安裝Hexo:

$ npm install -g hero-cli
裝得也很快.
以後試一下hexo命令,若是有命令介紹(而不是command not found)就表明裝好了.

設置和遷移

Setup

備份

首先, 從原先的_posts/目錄下將原來的文章都拷貝出來.
另外將.git目錄也拷貝出來(這是爲了保持github上的歷史).
這些文件另外保存.

創建新的目錄

在準備好的空目錄運行命令:
hexo init .
就創建好了hexo的目錄,相關介紹能夠去網站看.
npm install 下載依賴包.

Hexo會自動忽略下劃線開頭的目錄和文件名,可是_posts目錄除外.
這時候能夠運行
$ hexo server
而後訪問http://localhost:4000/預覽一下.

配置

網站的設置文件是_config.yml
打開能夠配置一些新東東, 好比title url之類的.
具體設置參照這個: configuration

內容遷移

這是內容遷移的介紹:
migration

因此首先在_config.yml文件裏把 new_post_name字段改成:
new_post_name: :year-:month-:day-:title.md
不然就要修改以前每個文章的文件名,太麻煩,並且我以爲加個日期也比較好.

而後把原來備份的博客文章移到source/_posts/目錄下.

比較bug的是之前jekyll文章裏的代碼段先後加的那兩句還得手動移除.
用Hexo後 先後各加三個` 便可標記代碼段.
若是想要代碼高亮, 好比是java, 代碼段首的```後加個java.
這裏能夠查看代碼高亮的各類語言: highlightjs

完成以後能夠運行hexo server 命令在本地看一下樣子.

而後把.git目錄拷貝回來放在根目錄. 能夠看到repo地址啊, 歷史記錄啊還在.
最後提交, 本次提交即爲遷移提交, push.

Deployment

部署Deployment

我原本覺得跟Jekyll同樣本地運行好了, push上去就生效了, 結果並無.
訪問原地址, github pages並不生效,竟然仍是原來的那個樣子.

查了一下是由於deploy沒有設置.

打開_config.yml文件,找到deploy字段, 設置一下.
個人是這樣寫的:

deploy:
  type: git
  repo: https://github.com/mengdd/mengdd.github.io
  branch: master

而後執行一下這條命令:
npm install hexo-deployer-git --save
這條命令執行後package.json會有一條改動, 新添加了一個插件.
把這個提交了.

而後generate和deploy:
$ hexo generate --deploy
$ hexo deploy --generate
這兩條命令是同樣的.
運行這條命令的時候可能會要求你輸入github的帳戶名和密碼(若是你沒有配置SSH key的話).
這個須要等待比較長的時間, 實際上最後它是給master分支作了一個git push -f
因此它其實是不用你本身push的.

以後就能夠訪問啦: http://mengdd.github.io/
噠噠!

網站代碼和靜態網頁管理

在知乎上看到這個問題: 使用hexo, 若是換了電腦怎麼更新博客?
乍一看感受很奇怪, 換一臺電腦難道不是clone下來就好了嗎? 仔細看了一下恍然大悟.
前面提到剛剛的部署命令執行了一次強制push, 但是當咱們查看github上的repo(https://github.com/mengdd/mengdd.github.io),
發現push上去的文件和咱們本地的這些徹底不一樣.
如今在origin master上的全是一些靜態html文件.
而咱們本地master分支上是一些配置, 還有source文件等.
也就是等於咱們把母雞留在了本地電腦, 執行deploy以後只把雞蛋push到了origin. (我這個形象的比喻).

那麼怎麼解決呢? 該問題下排名第一的 [CrazyMilk] 大哥已經給出了答案.
他的博文
因此解決辦法就是新建一個分支把網站代碼(母雞)放上去咯~哈~

首先在本地, 基於當前本地的master新建一個hexo分支:
git checkout -b hexo
而後push到origin上去:
git push origin hexo
耗時比較久, 請耐心等待.

最後在github的settings頁面把hexo分支設置爲default.
DONE!

Theme

以後想設置一個好看的主題, 知乎上竟然還有這麼個問題:
有哪些好看的Hexo主題?
我打算選這個試試: https://github.com/wuchong/jacman
在本地hexo分支根目錄下運行:
git clone https://github.com/wuchong/jacman.git themes/jacman
就會clone到themes目錄下面叫jacman的目錄下.
而後在根目錄下的_config.yml中把theme名改成jacman.

而後用命令hexo server就能夠在本地查看效果.
改主題大概就醬, 兩步就能夠完成, 能夠多試幾個選一選.
選完了在hexo分支提交保存,而後運行hexo d -g生成部署便可.

Future

須要用到的命令: commands 隨時查看哇.