用Hexo打造你的專屬Blog

Hexo

還記得最後寫網誌已經是大學的事了,那時候還是無名小站稱霸的年代。對於這麼久沒接觸Blog的我來說,需求也已經跟以往相差甚遠了。因為主要是記錄我的學習心得,所以一定要包含:

  • 漂亮的呈現程式碼及數學公式
  • 不要有廣告
  • 不用網路也可以撰寫或排版
  • 簡單俐落的風格

在尋尋覓覓後,我總算找到了Hexo這個平台。在很多的Blog中都可以發現它的身影,厲害的是它的作者Tommy Chen竟然是台灣人,大家可以去看看他一手打造的心路歷程。

由於我僅對R及Matlab的語法較熟悉,大學雖然有修過一點系統程式,但也年代久遠,所以在打造這個Blog花了我不少時間。我會將我架設的過程盡可能完整的寫出來,方便讓跟我一樣沒什麼基礎的人可以直接上手!

初期準備

如果你之前沒有碰過一些程式語言,在使用Hexo當Blog前就必須先有心理準備,會一定程度上接觸程式語法。不過倒也是不用太擔心,一方面是佈置的語法不難;另一方面是等架設好之後,除非想大改整個佈置,不然不用在碰太難的程式語言。首先,此Blog是架設在以下環境:

  • 作業系統:macOS High Sierra
  • 編譯器:VScode
  • Markdown編輯器:Typora

雖然是用mac來操作,但在Windows上差異也不會太大。如沒有以上軟體,現在可以安裝,因為我們會使用這些軟體逐步實現我們的Blog,當然如果你有比較習慣的編譯器或Markdown編輯器,也可以使用自己上手的。

編譯器設置(使用VScode)

圖片

VScode會是後續整理Hexo的一個主要平台,它本身是一個編譯器,被定義在「Editor以上,IDE未滿」。也因此想要什麼功能都可以彈性調整,譬如說程式碼的高亮或是專案功能等等。詳細的VScode部署網上已有很多教學與討論,這裡就只說Hexo會用到的功能。先按 ^` 開啟Terminal,mac本身的shell使用的是bash,但他沒有npm的指令,因此我們換個shell先,改成zsh及他的架構oh-my-zsh。

為了方便安裝,那就一定得要把Homebrew掛上。

1
2
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install wget

安裝zsh及補全功能。

1
$ brew install zsh zsh-completions

將shell從bash轉換為zsh。

1
$ chsh -s /bin/zsh

重新啟動後,就可以開始著手安裝Hexo了。如果你想讓Terminal的介面好看一點,可以參考此網誌的設置,內容相當詳盡。

打造個人Hexo

安裝Hexo

查看官網就可以知道其實安裝過程相當簡單,只不過在安裝前必須先把Git及Node.js裝上。好在剛剛裝上了zsh及Homebrew,現在就非常方便了。

用Terminal來安裝Git,輸入:

1
brew install git

再來用wget安裝Node.js,先輸入:

1
$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

執行完後重新啟動Terminal,先安裝nvm,並輸入以下指令安裝Node.js:

1
2
$ brew install nvm
$ nvm install stable

接下來就可以安裝Hexo囉!只要輸入以下指令即可安裝:

1
$ npm install -g hexo-cli

建構Blog

在安裝完Hexo之後,緊接著就是來建構個人的Blog了,這裡我們就將要管理的目錄取名叫Blog,而建構的方式只要輸入下列指令即可完成:

1
2
3
$ hexo init Blog
$ cd Blog
$ npm install

建好的Blog資料夾中可以發現以下的資料夾

圖片

其中幾個比較主要的文件可以留意一下:

  • _config.yml:Blog的主要設定文件,會經常使用到。
  • themes:不想使用預設的畫面,想用別人設計好的主題就可以放裡面。
  • source:網頁的內容像是文章,或是標籤、分類等都在這。

到這一步其實就已經建構好了你的Blog,迫不及待想看看初步雛形可以輸入以下指令:

1
$ hexo server

他會出現下列指令

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

點選連結後就可以看到你的Blog了。這個指令在之後把網頁部署到Github後相當有用,如果網頁有新文章,或是有做一些套件的增加之類的修改時,可以先用這個指令看看成果,再決定要不要上傳。

美化Blog

變換主題

如果你跟我一樣美術天份很差,或是懶得一步一步去修改Blog的介面,可以使用別人已經架好的樣板。官網就有許多主題可以讓你選擇。我使用的是NexT的主題,就先以這個主題來說明。點選名字後可以進入該主題的Github,基本上下面都會有說明文件。以NexT來說,安裝只要輸入以下指令:

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

你可以在themes裡發現多了next主題的資料夾,這代表NexT已經安裝好了。接下來就是把Blog的主題切換成NexT就好了。找到Blog下的_config.yml去修改以下內容:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 把這裡改成你的主題名稱

這是應該就可以看到你的Blog已經換成不同的樣子了。如果想要變換更多設定,譬如說讓目錄列表從左邊改到右邊這種,可以看該主題在Github提供的說明文件,會有更詳盡的說明。

訪問量

這篇文章標題底下可以看到有多少人看過這篇文章,另外在頁面最下方也可以看到訪問這個Blog的人次。而要加入這樣的計算功能,有兩種管道,一是不蒜子,但不蒜子的文章統計要點進文章裡才看得到,如果想在首頁就顯示文章閱讀量,則可以選擇LeanCloud

不蒜子

不蒜子的安裝方式相當簡單,指令都是放入themes/你的主题/layout/_partial/footer.ejs的文件中。因為需要安裝腳本,把以下指令放在文件的最前端。

1
2
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

其中src後面的網址是不蒜子提供的,如你擔心這個腳本失效,也是可以將腳本載下來放在自己的雲端,將路徑改向自己的空間即可。

站點訪問量分成兩種,一種是站點訪問次數(pv),如果同一人逛了五次網站,記數會顯示5;另一種則是站點訪客數(uv),上述情形記數只會顯示1。看個人喜好去做選擇。將以下指令放入文件內,自己在調整位置即可。

pv

1
2
3
<span id="busuanzi_container_site_pv">
本站訪問量<span id="busuanzi_value_site_pv"></span>次
</span>

uv

1
2
3
<span id="busuanzi_container_site_uv">
本站訪客數<span id="busuanzi_value_site_uv"></span>人次
</span>
LeanCloud

由於我希望首頁即可看到文章瀏覽量,所以文章的記數我是採用LeanCloud來做。只不過這種方法相對於不蒜子來說就稍稍麻煩一些。先到官網註冊帳號,完成後點擊畫面中的創建應用。

圖片

在新應用名稱輸入你想要的名字,完成創建,之後點擊進入設定。在存儲中創建Class,名稱務必輸入Counter,並在設置數據條目的默認中選擇無限制。

圖片

現在點選左邊的設置,進入「應用Key」應該可以看到「App ID」及「App Key」,這時可以填入Blog中themes下的_config.yml文件裡了。

1
2
3
4
5
6
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: # 你的App ID
app_key: # 你的App Key

這樣基本上計數就大功告成了,如果擔心計數被亂用,也可以到LeanCloud設置的安全中心加入自己的網域。

評論系統

評論系統的管道有很多,我自己是使用disqus。在註冊之後,點選首頁的Get Started,再選擇下面的「I want to install Disqus on my site」,之後照著程序走即可,唯一要注意的是Website Name所設定的名稱,會配置在主題文件下的_config.yml中,完整修改如下。

1
2
3
4
5
# Disqus
disqus:
enable: true
shortname: # 你的Website Name
count: true

值得注意的是,如果你有開啟Tag跟Categories的配置,那麼評論系統在這些畫面的預設是開啟的。如果不想要評論出現在這些頁面中,可以到Hexo中的source/tag/index.md修改成以下指令。(categories也是一樣做法)

1
2
3
4
5
6
---
title: tags
date: 2018-01-08 19:24:44
type: "tags"
comments: false
---

部署到Github吧

費了一番苦心,總算把Blog整理成想要的樣子了吧!剩下最後一哩路,就是把你的Blog丟到網路上讓大家瞧瞧吧!

連結Github

首先到Github去創建一個repository,並且將它取名為你的帳號.github.io,進入這個repository的設定,找到GitHub Pages,選擇master branch,然後儲存。

圖片

回到主目錄,點選Hexo主目錄的_config.yml中,指令如下。

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

之後只要在Terminal輸入:

1
hexo d -g

就可以在 https://你的帳號.github.io/ 看到你的Blog囉!

免輸入密碼

為了不要每次部署都要輸入密碼,可以藉由創建SSH Key來達成。首先在Terminal輸入以下指令:

1
$ ssh-keygen -t rsa -C "your_email@example.com"

他會出現

1
2
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]

按下return後出現

1
2
Enter passphrase (empty for no passphrase): 
Enter same passphrase again:

接連按下return跳過passphrase的輸入,而後輸入一下指令將SSH密鑰複製起來。

1
$ pbcopy < ~/.ssh/id_rsa.pub

到Github的Settings中,

圖片

點選SSH and GPG keys,點擊NewSSH Key,Title可以隨便輸入,只要將剛剛複製的東西貼到key裡面就好。為了測試有沒有成功,到Terminal輸入:

1
$ ssh -T git@github.com

他會出現

1
2
3
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

輸入yes後,如果看到以下畫面,就代表你成功了!

1
2
Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

接下來就輸入下列指令來設定帳號資訊吧。

1
2
$ git config --global user.name "yourusername"   				# 你的帳號
$ git config --global user.email "your_email@example.com" #你的Email

基本上到這裡就可以開始你的記錄旅程囉!好好享受吧!

參考資料

  1. 為 MAC 的 Terminal 上色 - 透過 iTerm 2 和 Oh My Zsh 高亮你的終端機

  2. 使用 Hexo + Github 建立個人網誌

  3. Hexo搭建博客系列:(五)Hexo添加不蒜子和LeanCloud统计无标题文章

  4. Hexo搭建博客系列:(六)Hexo添加Disqus评论