昨晚，師母突然帶點責備的語氣問我：「你最近都抱著電腦在做什麼?」我心想，這說了你也不會明白，全球最多只有4% 的人可能會知道我在做什麼。我要怎麼度過這危機? 想想拿什麼比喻來說明我剛剛在忙什麼?

優格要放哪?

是這樣的，聽我講個比喻，我最近想說買個大冰箱放廚房來冰好吃的優格，因為容量不少，擺在客廳很占空間。這優格很神奇，不會真的被吃掉，每次客人來吃的時候，只要眼神對上眼，就可以根據傳輸的頻寬看可以吃多快。不只如此，我們說的話也會變成固體，像小叮噹的聲音凝固劑變成一個一個的字，說多了、時間久了也會變得很占客廳空間。我們的客廳不大，只有1GB，不過幸好，說話不太占空間，頂多幾KB。

就是優格很占空間，像我們上次去雙溪買了一堆回來，放在客廳，雖然為顧全品質和大小的去壓縮，仍占了快3MB，對我來說，這是很大的空間，還有我畫的一些優格也是如此。

有個方法可以減緩客廳空間變小，又可以請別人吃美味又漂亮的優格，就是客廳不放優格了，只擺神奇的菜單，讓客人可以透過菜單的連結去吃到冰箱的優格，如此一來，客廳的空間不會那麼快就被占掉太多，還可以統一管理優格，使客廳不擁擠又簡潔。這冰箱還有加速讓客人吃到優格的功能，有20GB和的空間和傳輸量，是不是很好呢?

師母聽到一半眼神死，說：「等等真的去買優格」

這爛故事在說什麼

好啦，師母真的有問，不過我講幾句她就知道我在弄網站的事。我想讓她明白圖床的功用是什麼，用這比喻能說明。

保存資料

Hugo架站在資料保存上的好處是它把應該放上網的東東clone一份到網路，原本的東東仍然在本機，所以，我不用擔心像在 FB上寫東東一樣，哪天Meta又怎麼了，就莫名其妙不能寫，也拿不回來了。這些苦主很無辜，有的人10年的心血、這個月以後的收入就沒了，我小老百姓的東東沒了頂多可惜，但他們可是受更大的損失，所以，備份在自己的電腦，是很重要的安全觀念。

只有想不到

回來說圖床，由於hugo網站要有個地方放置資料的原始碼，好預備刊登在網路上。我選擇老牌的 Github 只有1GB的空間，其實對靜態網站來說很夠用了，但總覺得可以如何省些空間，想到是不是把圖片放在雲端，只要把連結貼過來內文，也就是貼在生成文章用的 markdown 檔裡面就好?如此一來，原來打算放hugo目錄內被上傳到Github的圖片已經改放到雲端，只有連結被傳上去而已，這樣不就省空間了?果然，網路上老早就有人想到用這方法了，還開發出可以放影片、圖片而且功能建全的空間，這就叫圖床，網路世界只有想不到，沒有做不到。我原本還想用google雲端，但她並沒有完整的支援，所以問了很懂自己的AI，她建議幾個圖床，我選擇了imagekit.io。

真相大白

比喻中圖床就是冰箱、優格就是圖片和影音、廚房就是本機、客廳就是Github、客人就是來jujublog的人、客廳吃優格的速度就是上網的速度和當時的流量。大概吧，別太講究細節。

簡言之：

簡言之：把原本要上傳的圖改放在圖床，我只要在文章內貼上連結後上傳，就能省空間和流量！

imagekit.io

ImageKit.io 是一個專業的圖片 CDN + 最佳化服務平台，讓開發者可以：

儲存圖片（當圖床）
快速載入圖片（CDN）
自動縮圖壓縮（節省頻寬）
即時調整尺寸、畫質（網址加參數）
綁定自有網域（網址的帳號改成網域名）

其中2～5項就是google雲端沒有的功能！
2～4項則是架設網站要放圖片時很好用的功能。可以自己定義、作主的靈活度很高，這也是有趣的地方。

1. 註冊並登入

網址： https://imagekit.io

登入後會看到你的 Dashboard。

在左側選單中找到並點選Media Library即可看到右側的file，可以在這建立新的資料夾，但我沒有，打算在這裡單純放要刊上網的圖片。

上傳圖片

可以用兩種方式：

手動上傳

點選上方的 Upload 按鈕
選擇圖片（例如 A.jpg）
若剛剛建立了資料夾，記得切換進去後再上傳，這樣圖片會歸類在該資料夾裡

拖曳上傳

直接把圖片從電腦拖曳進頁面，也能快速上傳。

取得圖片網址

點擊剛剛上傳的圖片 A.jpg會開啟圖片詳情頁
點取滑鼠右找Image URL

看起來像這樣：

https://ik.imagekit.io/你的ID/A.jpg?參數

❓問號

網址後面有一個 ? 還跟著一串神密的字母與數字組合，這是什麼？

這些組合叫做參數(Parameters)，是網站用來傳遞額外資訊的方式，等等我們設定圖片時會在?後面加些參數。

2. 設定hugo

為了讓寫入markdown的imagekit連結 能夠被hugo解讀後上傳，我們需要寫一個名叫imgkit.html的Shortcode放在你的hugo目錄/layouts/shortcodes/底下。沒有的話新增目錄後放進以下程式碼即可。

<figure>
  <picture>
    <source media="(max-width: 480px)" srcset="{{ .Get "src" }}?tr=w-480,q-70,fo-auto">
    <source media="(max-width: 768px)" srcset="{{ .Get "src" }}?tr=w-768,q-80,fo-auto">
    <source media="(max-width: 1024px)" srcset="{{ .Get "src" }}?tr=w-1024,q-85,fo-auto">
    <img
      src="{{ .Get "src" }}?tr=w-1200,q-85,fo-auto"
      alt="{{ .Get "alt" }}"
      loading="lazy"
      style="max-width: 100%; height: auto;"
    >
  </picture>
  {{ $caption := or (.Get "caption") (.Get "alt") }}
  {{ with $caption }}
  <figcaption>{{ . }}</figcaption>
  {{ end }}
</figure>

shortcode的功用為插入圖片、youtube等社群媒體的影音、連結站內文章…等等，程式碼的外圍左右二側被{{<>}}包夾。上半段的程式碼會讓瀏覽器自動根據裝置解析度挑選合適圖片大小，picture下面的標籤則是把alt=也當文字說明用，不只是圖片載不出來時會出現說明。

3. 怎麼寫Shortcode

在 front matter 裡

featured_image = "https://ik.imagekit.io/你的ID/圖片.jpg?tr=w-800,h-450,fo-auto"

在 markdown 裡

外圍左右二側用{{<>}}包夾以下程式碼：

imgkit src="https://ik.imagekit.io/你的ID/圖片名稱.jpg" alt="圖片描述"

?問號後面的參數是圖片即時轉換引擎（transformation），用來調整圖片的外觀與大小。因為要配合diary主題的首頁縮圖，所以將圖片等比例縮放到最大寬度 800、高度 450 像素內，不會變形失真，且若裁切會自動保留主體焦點，好符合16:9的比例。

fo-auto 是有啟用裁切或不同比例輸出時才會發揮效果，真是厲害，可以聰明到用來對焦圖中主體而非中間區域。

善用AI，她很懂

記錄一下架站的經過，自己動手可以發現不少樂趣，問問AI吧，別怕他，雖然我一開始覺得毛毛的。

上次修改於 2025-08-05