用Hexo打造你的專屬Blog

Posted on 2018-01-16 Edited on 2023-12-26 In 程式應用 Disqus:

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去修改以下內容：

# 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。看個人喜好去做選擇。將以下指令放入文件內，自己在調整位置即可。

1
2
3

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

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文件裡了。

# 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中，完整修改如下。

# Disqus
disqus:
  enable: true
  shortname:	# 你的Website Name
  count: true

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

---
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中，指令如下。

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

之後只要在Terminal輸入：

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