終於把網站轉換至 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 的麻煩了。

hugo  wordpress 

See also

comments powered by Disqus