Hexo - Heroku 部署教學

發表於 更新於 分類於 Disqus： 文章字數： 2.4k 所需閱讀時間 ≈ 4 分鐘

上次介紹如何用 Hexo 來結合 GitHub Pages，來建立靜態網站。這次來介紹如何用 Heroku 來佈署我們的 Hexo 的靜態網站。我個人的 Blog，也就是你現在看到的網站也就是用 Heroku 去佈署的，我覺得比 GitHub Pages 好用多了，加上網址也比較簡潔 XD 因此就搬來 Heroku 囉～

介紹 Heroku

Heroku 其實就是一種雲端平台，也就是說我們可以在上面放置我們的應用程序，由 Heroku 幫我們做代管，好處就是我們不需要接觸實際的伺服器架設的操作，也不用背後 Linux 的設定。一切都用 Heroku 去處理。目前 Heroku 可以支持多程式語言的 app，有 Node.js、Ruby、Python、Java 等等…。而且佈署到 Heroku 方式也很簡單，不會很複雜。

更重要的是！Heroku 的免費專案十分誘人，一個月可以讓你的 app 運行 450 小時，但如果開通信用卡，就可以將額度提高到一個月 1000 小時，以一個月 720 小時來看，根本足足夠用！對於一個只是早期開發的小專案而言，非常夠用，更何況只是一個小 blog。當以上額度都不堪使用的時候，想必我的 Blog 很有起色了哈哈。

安裝 Heroku CLI

首先先去 Heroku 申請免費帳號，官網如下：

https://www.heroku.com/

再來去 Heroku CLI 下載網頁：

https://devcenter.heroku.com/articles/heroku-cli#download-and-install

heroku-download

這個是拿來在你的本機上操作一些 Heroku 的操作，包括佈署等等。

以下為 Windows 的安裝步驟：

heroku-download2

三個選項全勾。

heroku-download3

選擇安裝路徑。

heroku-download4

安裝完成後，開啟 terminal，並輸入以下指令：

1
heroku -h

沒問題的話就會出現以下畫面，就是代表安裝成功。

heroku-installSuccess

登入 Heroku

接著輸入以下指令，登入 Heroku。

1
heroku login

heroku-login

它的登入方式，是透過以上網址，打開之後就會叫你登入 Heroku，也就是你剛剛申請的帳號。完成之後畫面如下：

heroku-login2

關掉這個網頁回到剛剛我們的 terminal，就成功登入了～

建立 Heroku App

接著輸入以下指令，建立我們的 app。

1
heroku create <appName>

因為我要把我的 blog 佈署上去 Heroku，所以我就取 kennychen-blog。

heroku-create

要注意的就是，在 create 的時候它會幫你檢查有沒有人取過一樣的名字了，如果有的話就會創建失敗。因為這個 app 的名稱會出現在網址上，所以一定要是獨一無二的 app 名稱才行唷。因此可以看到左邊那個網址就是我們之後佈署成功的網址。其他的使用者就能透過這個網址就連結到我們的網站。

同時，將旁邊結尾.git 的網址複製起來，這個意思是我們在 Heroku 中建立了一個 git repository，由 Heroku 幫我們做管理，也就是說相關佈署的動作也是透過 git 去執行的。

Hexo 部署到 Heroku

要將 Hexo 的靜態網站佈署到 Heroku 也很容易，首先在我們的 blog 專案上開啟 terminal。並且安裝 hexo-deployer-heroku 套件。這樣我們就能一鍵佈署到 Heroku。

1
npm install hexo-deployer-heroku

hexo-installHerokuDeployer

完成之後我們需要去更改 blog 裡面的 config 設定。

hexo-configDeployHeroku

deploy 的 type 需改為 heroku，而 repo 就是剛剛說要複製的 git 網址。

完成之後，還要去更改 url 的設定。

heroku-configUrl

如果之前是用 Github Pages 佈署的，則記得註解起來。改成以上的形式。

url 就是我們的 app 的網址，root 填 / 即可，因為之前 Github 佈署的話需要填上 repository 的名稱，heroku 佈署就不用了。

接著輸入以下指令進行佈署！

1
2
3
hexo clean
hexo g
hexo d

heroku-deployDone

看到以上畫面就大功告成囉。接著就能開啟你的網址，就能看到你的網站出現囉。

至於想要看到更多 app 的設定，可以去 Heroku 登入去看 dashboard，裡面可以管理你所有的 app 程序。

定期訪問你的 Heroku App

當你開啟你的網站的時候，會發現開啟速度有點慢，這是因為在免費額度下的方案，每 30 分鐘如果沒有人訪問你的網站的話，其實你的網站會進行休眠的。也就是當別人訪問你的網站的時候，會需要一段時間重啟的網站，也因此會造成第一次訪問速度有點慢。但是一樣有方式可以破解！不用提高到要錢的方案，

原理就是，我們透過定期去訪問我們的 app，而以下的網站有提供這樣的服務。

https://uptimerobot.com/

進去該官網，申請免費帳號即可。接著我們就可以去新增我們想要監視的 app。新增方式如下：

uptimerobot

基本上 Monitor Type 就是選 HTTP (s)，因為我們是 web 網站。Friendly Name 就是 Monitor 名稱，URL 就是我們的 web 網址，而以下的 Interval 的意思就是說我們可以選擇每幾分鐘定期去訪問我們的 app。而免費額度最低就是每五分鐘去訪問，而前面有說到 Heroku 只是每 30 分鐘會休眠一次，對我們來說定期 5 分鐘去訪問已經非常棒了。設定完成後，就不用擔心別人訪問 heroku 佈署的網站會有緩慢的問題囉。

總結

以上為 Hexo 佈署到 Heroku 的教學，之後也會帶來一些關於 Heroku 對於 app 詳細設定的教學，我個人認為 Heroku 對於小專案的開發者想要找個雲端平台架設的話，是很好用的。也不用親自處理自己架設伺服器的問題，對於新手來說是很 nice 的 ^^。

最後最後！請聽我一言！

如果你還沒有註冊 Like Coin，你可以在文章最下方看到 Like 的按鈕，點下去後即可申請帳號，透過申請帳號後可以幫我的文章按下 Like，而 Like 最多可以點五次，而你不用付出任何一塊錢，就能給我寫這篇文章的最大的回饋！