終於把網站轉換至 Hugo 靜態系統了


  在部落格式微的年代,還存在的部落格似乎已經變歷史遺跡了XDD,就找個長久的又簡單的方式來保存網站吧! 畢竟也不需要用到 WordPress 那麼多的外掛,放在 Vultr 主機上面 DB 還常常掛掉(1 core 512 mb 的窮酸規格XD)。為了實現這件事情,我也已經在交大資工的個人網頁: fyli’s Note 裡面實驗過了一段時間,最近終於碩班畢業有空來轉換了!

  靜態化的好處非常多,其中一個最大的好處是不需要自己管理伺服器等,省了時間也更安全一些,以前總是喜歡玩一些酷東西炫技,當事情越來越多以後,才發現化繁為簡是一個夢想。就算之後不租 VPS,直接把網站丟到 Github Page 也是可行的,而且還可以版控呢!身邊的 Vultr 日本主機閒著也是閒著,就拿他來放囉!透過 SSH 發表文章也非常的快速,只要寫寫 Markdown 就可以把整個網站產出來了,不需要每次有人瀏覽就要虐待這台 VPS 猶如風中殘燭的硬體資源XD。

調整

  轉換的過程我是參考這篇文章: 將部落格從 Wordpress 轉換到 Hugo - 小惡魔 - AppleBOY,然後再將 GA、Adsense 等轉移過來,再 F12 慢慢調整 CSS 的樣式。

.htaccess

  需要額外調整標籤、分類的 301 Redirect,我使用 Apache2 的 .htaccess 來完成:

ErrorDocument 404 /404.html
RewriteEngine on

Redirect 301 /category /categories
Redirect 301 /tag /tags
RewriteRule ^category/(.*)$ /categories/$1 [R=301,NC,L]
RewriteRule ^tag/(.*)$ /tags/$1 [R=301,NC,L]

預覽圖片

  WordPress 轉換外掛匯出的預覽圖是放在 featured_image 中,我使用的這個佈景 Beautifulhugo 則是讀取 image 而已,使用 sed 快速取代就可以了:

$ cd content/posts
$ sed -i 's/featured_image:/image:/g' *

Cloudflare 快取

  我的網站一直都有採用 Cloudflare 作為快取,由於 Hugo 是全靜態網站,所以在發文的時候需要手動清理 Cloudflare 上面的 Cache。我則是直接寫一個簡單的 Shell Script ,在 Rebuild 網站的時候順便清除 Cache :

#!/bin/bash
BLOG_PATH="~/blog"
ZONE="abcd12345"
API_TOKEN="abcd12345"

echo ========== Rebuild Blog ==========
(pushd $BLOG_PATH && hugo; popd)

echo ===== Clear Cloudflare Cache =====
curl -4 -X POST "https://api.cloudflare.com/client/v4/zones/$ZONE/purge_cache" \
    -H "Authorization: Bearer $API_TOKEN" \
    -H "Content-Type:application/json" \
    --data '{"purge_everything":true}'

執行成果

========== Rebuild Blog ==========
~/becoder.org ~/bin
Start building sites …
hugo v0.000.0-XXXXXXXX+extended linux/amd64 BuildDate=2000-00-00T00:00:00Z


                   |  EN
-------------------+-------
  Pages            |  781
  Paginator pages  |   36
  Non-page files   | 2924
  Static files     |  184
  Processed images |    0
  Aliases          |  313
  Sitemaps         |    1
  Cleaned          |    0

Total in 6172 ms
~/bin
===== Clear Cloudflare Cache =====
{
  "result": {
    "id": "xxxxxxxxxxxx"
  },
  "success": true,
  "errors": [],
  "messages": []
}

  這樣就可以在每次更新的時候一併清除 Cache 囉!寄可以省掉流量也省掉了手動去清 Cache 的麻煩了。


See also