使用Hexo架設Blog

一直有在定期追蹤幾個部落客,期間發現許多部落格的版型非常相似,並且都是架設在Github Page下,於是經過調查後,找到了這麼個玩意兒「Hexo」,看完許多資料後頓時覺得,這才是程式設計師該用的部落格啊!從站台、程式、到文章,都可以在自己的掌控之下,還有比這更Geek的嗎?以下紀錄搞玩過程。

Quick Start

官方網站的教學真的簡潔明瞭,短短五行的指令就完成架設,我就喜歡這麼簡單的東西joy

安裝並建立Hexo專案

1
2
3
$ npm install hexo-cli -g
$ hexo init demo
$ cd demo

在本機架設部落格站台

1
2
$ npm install
$ hexo server

用瀏覽器查看執行結果

部落格已經架設完成了,也太簡單了吧! 

主題

要如何讓網站變得好看呢?理論上來說,程式就在自己手上,想怎麼改?就怎麼改!但可憐我前端只是個略懂略懂的人,在變強前還是套版就好了smirk

物色一個喜歡的主題

可以從官方網站的主題頁看到上百個主題,由於都是Open Source,不滿意也能自己進行修改,在這裡我就挑一個較多人推薦「Next」進行套版。

下載主題至Hexo專案

1
2
$ mkdir themes/next
$ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

修改專案設定擋

在專案目錄下可以找到_config.yml,打開後找到theme並修改為next

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

驗證套用結果

這時重整頁面就可以看到美美的主題了,而且程式與文章都是不相依於主題的,隨時都可以換另一套,或是對主題進行修改,不用怕文章壞掉,是不是很棒呢?

外掛

Hexo有豐富的外掛資源,畢竟想要一個完美的網站就現階段來說還是不夠的,在這裡列出本站用到了哪一些外掛,但不會細寫出安裝步驟(我寫的也一定沒官方詳細relaxed),雖然有些外掛可能需要配合主題相應的微調,這部分就留給大家自己摸索啦kissing_heart

RSS

hexo-generator-feed
雖然自己沒用過RSS,但看大家都有,這我還不裝一個先!

Emoji

hexo-filter-github-emojis
Hexo的Markdown渲染器是不支援Emoji的,我找到好幾個外掛可以做這件事,最後挑了這款,只因為使用方式夠簡單!bowtiesatisfiedastonishedscreamneckbeardsunglassesinnocentmetal

Sitemap

hexo-generator-sitemap
想讓更多人來部落格嗎?讓搜尋引擎更容易找出你的網站吧!記得再看看robots.txt喔。

hexo-algolia
現在才知道還有Algolia這種專門的搜尋服務,不用自己寫就可以在站內添加搜尋引擎,雖然免費的有使用量限制,但短期內也應該足夠使用了。

佈署

終於到了最後一步,馬上就要將站台上線了,激動啊!官方列出了多個佈署範例,這裡選用Git來做佈署。

建立Git Repository

安裝佈署外掛

1
$ npm install hexo-deployer-git --save

修改佈署參數

打開我們的_config.yml,修改相關參數為Git Page。

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://feifacunzai.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/feifacunzai/feifacunzai.github.io
branch: master

執行佈署指令

這裡我有使用gulp對靜態資源做優化與Algolia做搜尋,不需要的人只用輸入hexo ghexo d就發佈完成了。

1
2
3
4
$ hexo algolia
$ hexo g
$ gulp
$ hexo d

架設一個部落格是不是很簡單呢?大家一起來建自己的部落格吧laughing

參考資料

Hello World–Hexo + Oschina 搭建个人博客
Hexo博客的优化
hexo的next主题个性化配置教程

本文標題:使用Hexo架設Blog

文章作者:Ren

發佈時間:2017年10月11日 - 14:10

最後更新:2018年07月10日 - 10:07

許可協議: 署名-非商業性使用-禁止演繹 4.0 國際 轉載請保留原文鏈接及作者。