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實(shí)現(xiàn)遷移到Hexo?
前陣子用Jekyll建了github pages(官方推薦), 但是發(fā)現(xiàn)添加代碼段比較痛苦, markdown的前后三個點(diǎn)并不能標(biāo)記一個代碼塊, 需要在代碼塊前后加上兩句特定的語句.
如果一篇文章有很多代碼塊, 這樣一個一個加下來比較費(fèi)勁, 而且加完了之后代碼段的樣式也不是很好看.
為此很苦惱的我問了phodal大神, 大神回復(fù): Hexo.
下文記錄了我的操作過程.
安裝Hexo
必要條件:
Node.js
可以選個pkg,下載后點(diǎn)擊安裝, 裝完之后告訴你路徑:
也可以用nvm裝的
nvm
Git
這個一般大家都有噠~
上面兩個都有之后, 安裝Hexo:
$ npm install -g hero-cli
裝得也很快.
之后試一下hexo命令,如果有命令介紹(而不是command not found)就代表裝好了.
設(shè)置和遷移
備份
首先, 從原先的_posts/目錄下將原來的文章都拷貝出來.
另外將.git目錄也拷貝出來(這是為了保持github上的歷史).
這些文件另外保存.
建立新的目錄
在準(zhǔn)備好的空目錄運(yùn)行命令:
hexo init .
就建立好了hexo的目錄,相關(guān)介紹可以去網(wǎng)站看.
npm install 下載依賴包.
Hexo會自動忽略下劃線開頭的目錄和文件名,但是_posts目錄除外.
這時候可以運(yùn)行
$ hexo server
然后訪問http://localhost:4000/預(yù)覽一下.
配置
網(wǎng)站的設(shè)置文件是_config.yml
打開可以配置一些新東東, 比如title url之類的.
具體設(shè)置參照這個: configuration
內(nèi)容遷移
這是內(nèi)容遷移的介紹:
migration
所以首先在_config.yml文件里把 new_post_name字段改為:
new_post_name: :year-:month-:day-:title.md
否則就要修改之前每一個文章的文件名,太麻煩,而且我覺得加個日期也比較好.
然后把原來備份的博客文章移到source/_posts/目錄下.
比較bug的是以前jekyll文章里的代碼段前后加的那兩句還得手動移除.
用Hexo后 前后各加三個點(diǎn)即可標(biāo)記代碼段.
如果想要代碼高亮, 比如是java, 代碼段首的三個點(diǎn)后加個java.
這里可以查看代碼高亮的各種語言: highlightjs
完成之后可以運(yùn)行hexo server 命令在本地看一下樣子.
然后把.git目錄拷貝回來放在根目錄. 可以看到repo地址啊, 歷史記錄啊還在.
最后提交, 本次提交即為遷移提交, push.
Deployment
我本來以為跟Jekyll一樣本地運(yùn)行好了, push上去就生效了, 結(jié)果并沒有.
訪問原地址, github pages并不生效,居然還是原來的那個樣子.
查了一下是因?yàn)閐eploy沒有設(shè)置.
打開_config.yml文件,找到deploy字段, 設(shè)置一下.
我的是這樣寫的:
deploy:
type: git
repo: https://github.com/mengdd/mengdd.github.io
branch: master
然后執(zhí)行一下這條命令:
npm install hexo-deployer-git --save
這條命令執(zhí)行后package.json會有一條改動, 新添加了一個插件.
把這個提交了.
然后generate和deploy:
$ hexo generate --deploy
$ hexo deploy --generate
這兩條命令是一樣的.
運(yùn)行這條命令的時候可能會要求你輸入github的賬戶名和密碼(如果你沒有配置SSH key的話).
這個需要等待比較長的時間, 實(shí)際上最后它是給master分支做了一個git push -f
所以它實(shí)際上是不用你自己push的.
之后就可以訪問啦: http://mengdd.github.io/
噠噠!
網(wǎng)站代碼和靜態(tài)網(wǎng)頁管理
在知乎上看到這個問題: 使用hexo, 如果換了電腦怎么更新博客?
乍一看感覺很奇怪, 換一臺電腦難道不是clone下來就行了嗎? 仔細(xì)看了一下恍然大悟.
前面提到剛剛的部署命令執(zhí)行了一次強(qiáng)制push, 可是當(dāng)我們查看github上的repo(https://github.com/mengdd/mengdd.github.io),
發(fā)現(xiàn)push上去的文件和我們本地的這些完全不同.
現(xiàn)在在origin master上的全是一些靜態(tài)html文件.
而我們本地master分支上是一些配置, 還有source文件等.
也就是等于我們把母雞留在了本地電腦, 執(zhí)行deploy之后只把雞蛋push到了origin. (我這個形象的比喻).
那么怎么解決呢? 該問題下排名第一的 [CrazyMilk] 大哥已經(jīng)給出了答案.
他的博文
所以解決辦法就是新建一個分支把網(wǎng)站代碼(母雞)放上去咯哈
首先在本地, 基于當(dāng)前本地的master新建一個hexo分支:
git checkout -b hexo
然后push到origin上去:
git push origin hexo
耗時比較久, 請耐心等待.
最后在github的settings頁面把hexo分支設(shè)置為default.
DONE!
Theme
之后想設(shè)置一個好看的主題, 知乎上居然還有這么個問題:
有哪些好看的Hexo主題?
我打算選這個試試: https://github.com/wuchong/jacman
在本地hexo分支根目錄下運(yùn)行:
git clone https://github.com/wuchong/jacman.git themes/jacman
就會clone到themes目錄下面叫jacman的目錄下.
然后在根目錄下的_config.yml中把theme名改為jacman.
然后用命令hexo server就可以在本地查看效果.
改主題大概就醬, 兩步就可以完成, 可以多試幾個選一選.
選完了在hexo分支提交保存,然后運(yùn)行hexo d -g生成部署即可.
Future
需要用到的命令: commands 隨時查看哇.
