新手教學 · link-in-bio 一天上線 step-by-step

我用 AI 做 link-in-bio 個人入口：1 天上線

文 / Coolkid發布：2026-05-26 · 最後更新：2026-06-11閱讀約 15 分鐘

一開始我以為 link-in-bio 用 Linktree 或 Bento 就好。

30 分鐘上線、月費 NT$ 270 也不貴。

但我有 Coolkid AI Lab 跟方舟藍圖兩個獨立品牌，加一個個人社群帳號。

我需要的是一個中性的個人總入口，可以同時連到多個品牌。

Linktree 一個模板所有人共用同一張臉，視覺風格綁死，做不出我要的 GameBoy 復古質感。

所以我決定自己動手做。

用 Claude Code 一天做出來，上線到 link.coolkidlab.com。

中間踩了 6 個從「看起來沒事」到「上線後才發現」的問題。

選錯目錄，把 bio 接到主站，主視覺圖 2.7MB 沒壓縮。

還有 Vercel Hobby 方案的 author email 不對被擋下，圖檔副檔名多了一層，最後是 viewport meta 雙重縮放，害 IG 內建瀏覽器的畫面偏右。

每個問題找原因都花掉 30 分鐘到 2 小時。

這篇是一步一步的教學，讀完你會拿到什麼？

第一，知道什麼時候該自己做，什麼時候直接用 Linktree，我的答案是 90% 的人應該用 Linktree。

第二，避開我親身遇過的那 6 個問題。

第三，用一天的時間表把自己的 bio 站從零做完上線。

範例網域是 link.coolkidlab.com。但 Vercel 免費子網域、Cloudflare Pages、自有短網域，都套得上。

決策框架：自己做 link-in-bio 還是用 Linktree？

90% 的人應該直接用 Linktree 或 Bento。

30 分鐘上線，不用維護，流量分析本來就有，月費 NT$ 270 比一天的工程成本便宜。

那什麼時候自己做才真的值得？下面 3 種情況：

1. 你有多個品牌想做一個中性入口（像是 Lab、投資學院、個人作品集），需要切割流量歸因，但又要有一個共同的對外介面。
2. 視覺風格就是品牌的核心識別（你需要 GameBoy 復古、Y2K 賽博龐克、像素 RPG 這類獨特風格），Linktree 的罐頭模板完全做不出來。
3. 你把這件事當成 build-in-public 的案例來練技術，順便學 Vercel 部署、Cloudflare DNS、快取控制、viewport 縮放。產出的文章跟影片還能回頭帶流量。

我屬於第 1 加第 2 種。

兩個品牌要切流量，但又要有共同的個人入口。而且視覺要 GameBoy 機殼風，Linktree 完全做不到。

自己做的成本是一天工程，加上永久的維護責任，像是 DNS、SSL、改連結，都要自己動手。

Linktree Pro 一個月 270 元，省下一天，但失去視覺自由度，也失去 SEO 跟 GA4 的控制權。

如果你不在意這兩件事，直接用 Linktree。

品牌切割原則：bio 站為什麼不能掛在主站子頁？

我第一個直覺是把 bio 做成 coolkidlab.com/links，10 分鐘就架好。

但這違反我自己 2026-05-10 寫進 memory 的原則。

那條原則是「Coolkid AI Lab 跟方舟藍圖完全獨立，不共用品牌、流量、工具」。

把方舟的連結，放在 coolkidlab.com 路徑底下，等於 Lab 網域在幫方舟導流。

Google Analytics 看來源網址整個混淆，誰是來看 Lab 內容，誰是來找 Coolkid 這個人，根本分不出來。

解法是拆成獨立的小站。

新開一個 `coolkid-bio` repo、獨立的 Vercel 專案、獨立的網域。

第一版先用 Vercel 免費子網域 `coolkid-bio.vercel.app`，試跑兩天確認沒問題。

後來才綁上 `link.coolkidlab.com` 這個子網域。

子網域在技術 SEO 上仍然歸 coolkidlab.com 這個根網域，所以我另外開了獨立的 GA4 資源，把流量歸因隔開。

三個做法照乾淨程度排序：

1. 獨立新網域（最乾淨）：買 coolkid.bio、coolkid.dev 或個人姓名 .me。SEO、GA4、GSC 完全跟其他品牌切開。缺點是要多管一個網域、SSL 跟續費。
2. 主站子網域加獨立分析（折衷，我選這個）：link.coolkidlab.com，DNS 走 Cloudflare CNAME 指向 Vercel，GA4 另外開一個資源。SEO 上仍然算 Lab，但流量族群切得開。
3. 主站子頁（最方便但流量會混）：coolkidlab.com/links。Vercel 直接部署，不用設 DNS。但跨品牌的連結全混進主站 GA4，新手要避開。

6 個踩坑全紀錄（從「看起來沒事」到「上線才發現」）

按照找問題花掉的時間排序，短的排前面：

1. 選錯目錄（找問題花 30 分鐘）：SEO repo 底下有 v0.1、v0.2、v3 三個版本，現役只有 v3，v0.1 跟 v0.2 已經歸檔到 _archive/。我前面 30 分鐘都做在 v0.1，才發現預覽伺服器跑的是 v3。動工前先 grep `launch.json` 或 README 確認現役目錄，才不會做白工。
2. 圖檔副檔名雙後綴（找問題花 15 分鐘）：從圖片編輯器匯出時，不小心存成 `portrait-real.webp.png`，兩個副檔名疊在一起，HTML 引用 `portrait-real.webp` 直接 404，觸發 onerror 備援圖。修法是改名成單一副檔名（`portrait-real.png` 或 `.webp` 任選一個），HTML 的 src 跟著對齊。Windows 檔案總管預設隱藏副檔名，你看不到雙後綴，要從 PowerShell 打 `ls` 才會現形。
3. 主視覺圖 2.7MB 沒壓縮（找問題 5 分鐘、壓縮 1 分鐘）：原始 PNG 1823×863 直接放上去，部署上線後首屏 LCP 預估 5 到 8 秒（4G 環境），PageSpeed 直接扣分。用 Python PIL 一行壓成 webp、品質 82：`img.resize((1200, h)).save('hero.webp', 'WEBP', quality=82, method=6)`。從 2645KB 壓到 143KB，省了 95%。LCP 估計降到 1 秒以內。
4. GitHub commit author 不對，Vercel Hobby 方案擋下部署（找問題花 1 小時）：Vercel Hobby 方案的 private repo 只允許 project owner 的 commit 觸發建置。我用的是 GitHub noreply email `[email protected]`，但 Vercel 帳號註冊用 `[email protected]`，兩者不同，Vercel 就把我當成「外人協作者」一律擋下，dashboard 顯示 `Deployment was blocked because the commit author did not have contributing access`。修法：`git config user.email ""`（用 local 限定本 repo）→ `git commit --amend --reset-author` → `git push --force`（private repo 沒有別人，安全）。
5. viewport meta 寫 `width=460` 加上 JS transform 雙重縮放（找問題花 2 小時）：我寫 viewport=460，想讓手機瀏覽器自動把 460 的設計 fit 到裝置寬度，同時 JS 的 `fitShellToViewport` 又做了一次 transform scale，兩套縮放機制疊在一起。IG 跟 Threads 的 App 內建瀏覽器對 viewport meta 的行為，跟系統 Safari 不一樣，最後畫面偏右、右側被切掉。修法要三個一起做：viewport 改回 `width=device-width, initial-scale=1`，body 加 `display: flex; justify-content: center`，JS 算寬度改用 `Math.floor` 不要用 `Math.ceil`（下一條）。
6. `Math.ceil` 多算 1px，害 flex 退化成左對齊（找問題花 30 分鐘）：`Math.ceil(1120 * 0.397) = 445`，比 body 的內容寬度（`460 - padding 16 = 444`）多了 1px，flex 沒有空間置中，就退化成左對齊，看起來偏右一點。這個問題跟 `margin: 0 auto` 失效是同一個根源，只要 1px 溢出就會打破所有置中機制。改成 `Math.floor` 之後完美置中（centerDiff 0.00px）。

整批踩下來，教訓有三條。

第一，動多版本的 repo 之前，先確認哪個目錄是現役的。

第二，Vercel 部署加上自訂網域之後要在哪裡驗證？永遠用實機的 App 內建瀏覽器，預覽工具跟桌機模擬器都不可靠。

第三，CSS 的置中機制，對 1px 的溢出極度敏感，不管是 margin auto 還是 flex。

所以計算寬度永遠用無條件捨去，不要用無條件進位。

一天的步驟表（6-7 小時可以全部跑完）

把上面 6 個問題避開之後，一天可以全部跑完。

下面是我的時間表，每一段都已經扣掉找問題的時間：

1. 第 1 步（上午 30 分鐘）決定要不要做。你符合第 1 節那三個條件嗎？符合 1 個以上再動。沒符合就用 Linktree 省下一天。
2. 第 2 步（上午 1 小時）新建獨立 repo。`mkdir coolkid-bio && cd coolkid-bio && git init -b main`。重點是不要建在主站 repo 的子目錄下，新建一個獨立目錄跟主站平級。建 `vercel.json` 設快取 header（HTML 用 must-revalidate、靜態檔案用 immutable），再加 `.gitignore` 排除 `.vercel`。
3. 第 3 步（上午 2 小時）用 Claude Code 寫 index.html。指令範本：「請建一個 link-in-bio 單頁網站，視覺風格是 [一句話世界觀，例如『GameBoy DMG 復古機殼』]，包含 4 個區塊：主視覺大圖、彩色社群圖示（IG 跟 Threads 用 inline SVG）、4 個大連結卡片、footer 含 © 跟版本號。純靜態 HTML 加 CSS，不要用 JS framework。」一次到位之後再慢慢修視覺。
4. 第 4 步（中午 30 分鐘）壓縮主視覺圖。用 Python PIL：`from PIL import Image; img = Image.open('hero.png'); img.resize((1200, int(img.height * 1200/img.width)), Image.LANCZOS).save('hero.webp', 'WEBP', quality=82, method=6)`。2.7MB 變 143KB。或者用 squoosh.app 這個網頁工具來壓縮。
5. 第 5 步（下午 1 小時）Vercel 部署加自訂網域。`npm i -g vercel` → `cd coolkid-bio && vercel`（第一次會跑一輪設定問答）→ Vercel Dashboard → Settings → Domains → 加 `link..com`。Vercel 會給你 CNAME 目標，通常是 `cname.vercel-dns.com`。
6. 第 6 步（下午 30 分鐘）設定 DNS。Cloudflare → 對應的 zone → DNS → 新增 CNAME：Name 填 `link`，Target 填 `cname.vercel-dns.com`，Proxy status 必須關掉變成灰雲（DNS only），否則 Vercel 的 SSL 會跟 Cloudflare proxy 打架，跳 502 或 521。DNS 生效要 5 到 30 分鐘，Vercel 會自動發 Let's Encrypt SSL。
7. 第 7 步（下午 1 小時）實機驗證，微調 viewport 跟置中。永遠用真實手機開 IG、Threads、Safari 點連結驗證，不要靠桌機的預覽工具，App 內建瀏覽器的行為跟桌面差太多。我就是在這一步發現 viewport 雙重縮放，又花了 2 小時排查。

總計大約 6 到 7 小時。

第一次做的人再加 2 小時的緩衝，因為你還不熟悉 Vercel CLI 跟 DNS 設定。

實際工程量取決於什麼？取決於視覺風格有多複雜。

GameBoy 機殼風的主視覺，加上偽元素、機身邊框那些細節，我額外花了 3 小時細修。

GA4 與流量歸因設計（避免跨品牌混淆）

bio 站如果是個人入口性質、要連很多個品牌，那就開一個新的 GA4 資源。

跟其他品牌完全分開，不要共用主站的 GA4 ID。

為什麼不能共用？因為這兩群訪客的動機完全不同。

主站 GA4 看到的訪客，全是「來看主站內容」的那一群人，而 bio 站的訪客，則是「來找我所有東西」的另一群人。

混在一起算出來的跳出率、停留時間、轉換率，全都是失真的平均值。

但是 `link.coolkidlab.com` 這個子網域有一個限制。在 Google Search Console 裡，這個網址還是歸在 coolkidlab.com 底下。

根網域相同，這一層切不開。

如果你要連 SEO 跟 GSC 都完全切開呢？那就得用獨立網域，像是 coolkid.bio 或 coolkid.dev。

我目前接受這個取捨。子網域在 SEO 上仍然算 Lab，但 GA4 的族群是分開的，比起完全混在一起好多了。

快取策略也要單獨設定。

bio 站的 HTML 用 `Cache-Control` 設 `max-age=0` 加 `must-revalidate`，你改完連結之後，訪客下次進來立刻看到新版。

圖片跟 CSS 這些靜態檔案用 `max-age=31536000` 加 `immutable`，永遠快取到改檔名為止。

改完靜態檔案的內容要強制更新，就在 HTML 的 src 後面加 `?v=YYYYMMDD` 當版本記號。

不想自己設定怎麼辦？

上面這套自己跑一天，大概 6 到 7 小時。

那什麼樣的人不適合自己跑？符合下面任何一條就是：

• 不熟悉 git、Vercel CLI、Cloudflare DNS 任何一個，學習曲線比想像中長
• 只有一個品牌，Linktree Pro 一個月 270 元就夠用
• 沒有「視覺風格就是核心識別」的需求，你不在意網站長得像罐頭

符合任何一條，直接用 Linktree Pro 或 Bento.me。基本功能免費，要進階再升級 Pro。

多花 270 元，換省下一天時間，而且不用維護 DNS、SSL、快取設定。

如果你要的是「我要自己做但卡住了」，可以找 不想自己研究我教你（規劃中）。

一對一帶你從 repo 初始化開始，Vercel 部署、DNS 設定、實機驗證，整套跑完。

主要解的是 Vercel Hobby 方案的 author email，還有 viewport 雙重縮放，這種「Google 不到的具體問題」。

名詞解釋

Vercel

把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。

GA4（Google Analytics 4）

Google 的流量分析工具：訪客從哪來、看了什麼、停多久。GSC 管「搜尋結果上的表現」，GA4 管「進站後的行為」。

部署（deploy）

把做好的網站或程式「推上線」讓所有人用得到的動作。

SEO（搜尋引擎優化）

讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。

WebP

Google 推的圖片格式，同樣畫質下檔案比 PNG / JPG 小很多，常見能省 90% 以上。

壓縮（minify）

把程式碼裡的空白、註解拿掉讓檔案變小，功能完全不變。

快取（cache）

把載過的資源暫存起來，下次直接用、不重新下載。網站變快的最便宜手段之一。

提交（commit）

Git 的一個存檔點：把這次改動連同一句說明記錄下來，之後隨時可以回到這個版本。

GSC（Google Search Console）

Google 給網站主的免費後台：看自己網站在搜尋的曝光、點擊、排名跟索引狀態。做 SEO 的人天天開的儀表板。

最大內容繪製（LCP, Largest Contentful Paint）

頁面上「最大那塊內容」（通常是首圖或大標題）出現所需的秒數。Google 標準 ≤ 2.5 秒。

HTML

網頁的骨架語言，定義「這是標題、這是段落、這是圖片」。

不想錯過 Lab 的新文章?
訂閱後有新文章上線,就寄信通知你,
點有興趣的進來看就好。

填 email 就完成訂閱(信由 Substack 代寄)、隨時取消、不轉賣 email。

如果內容對你有用就太好了
隨喜斗內

看完這篇之前先確認:

← 回新手教學