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

發布：2026-05-26 · 最後更新：2026-06-11

我用 AI 做了 link-in-bio 個人入口：6 個踩坑與 1 天上線方法論

一開始我以為 link-in-bio 用 Linktree / Bento 就好——30 分鐘上線、月費 NT$ 270 也不貴。但我有 Coolkid AI Lab 跟方舟藍圖兩個獨立品牌、加一個個人社群帳號，需要的是「中性的個人總入口」可以同時連多個品牌。Linktree 一個 template 所有人用同一張臉，做不出我要的 GameBoy 復古視覺，也綁死視覺風格。決定自己做。

用 Claude Code 一天做出來上線到 link.coolkidlab.com，但中間踩了 6 個從「看起來沒事」到「上線後才發現」的坑：選錯目錄、把 bio 接到主站、Hero 2.7MB 沒壓縮、Vercel Hobby plan author email 不對被 Block、圖檔副檔名雙後綴、viewport meta 雙重 scale 害 IG 內建瀏覽器偏右。每個坑 debug 都花 30 分鐘到 2 小時。

這篇是 step-by-step 教學，讀完你會：1) 知道何時該自己做 / 何時直接用 Linktree（90% 人應該用 Linktree）；2) 避開我親身踩過的 6 個坑；3) 用 1 天時間表把自己的 bio 站從零做完上線。範例網域 link.coolkidlab.com，但 Vercel free subdomain、Cloudflare Pages、自有短網域都套得上。

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

90% 的人應該直接用 Linktree / Bento — 30 分鐘上線、不用維護、流量分析內建、月費 NT$ 270 比一天工程成本便宜。自己做只有 3 種情況真的值得：

1. 你有多個品牌想做一個中性入口（例如 Lab + 投資學院 + 個人 portfolio），需要切割流量歸因但又要一個共同對外介面。
2. 視覺風格是品牌核心識別（你需要 GameBoy 復古 / Y2K 賽博龐克 / 像素 RPG 之類獨特風格），Linktree generic template 完全做不出來。
3. 你把這當 build-in-public 案例練技術 — 順便學 Vercel 部署、Cloudflare DNS、cache 控制、viewport scaling。產出文章 / 影片回饋流量。

我屬於第 1 + 第 2 — 兩個品牌要切流量但有共同個人入口，且視覺要 GameBoy 機殼風 Linktree 完全做不到。自己做的成本：1 天工程 + 永久維護責任（DNS / SSL / 改連結都要動手）。Linktree Pro NT$ 270/月，省 1 天但失去視覺自由度與 SEO / GA4 控制權。如果你不在意這兩件事，直接用 Linktree。

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

我第一個直覺是把 bio 做成 coolkidlab.com/links — 10 分鐘就架好。但這違反我自己 2026-05-10 寫進 memory 的原則：「Coolkid AI Lab 跟方舟藍圖完全獨立、不共用品牌 / 流量 / 工具」。把方舟連結放在 coolkidlab.com 路徑下等於 Lab 域名導流到方舟，Google Analytics 看 referrer 整個混淆，根本分不出「來看 Lab 內容」跟「來找 Coolkid 這個人」的人。

解法：拆獨立小站。新 repo `coolkid-bio`、獨立 Vercel project、獨立網域。第一版我給它 vercel free subdomain `coolkid-bio.vercel.app` 試跑兩天確認沒問題，後來綁 `link.coolkidlab.com` 子網域。雖然子網域在技術 SEO 上仍歸 coolkidlab.com root domain，但開**獨立 GA4 property** 把流量歸因隔開。

三個替代方案排序：

1. 獨立新網域（最乾淨）：買 coolkid.bio / coolkid.dev / 個人姓名 .me。SEO / GA4 / GSC 完全跟其他品牌切開。缺點：要管多一個域名 + SSL + 續費。
2. 主站子網域 + 獨立 analytics（折衷，我選這個）：link.coolkidlab.com，DNS 走 Cloudflare CNAME 指 Vercel，GA4 開新 property。SEO 上仍算 Lab 但流量 cohort 切得開。
3. 主站子頁（最方便但流量混淆）：coolkidlab.com/links。Vercel 直接 deploy 不用設 DNS。但跨品牌連結全混進主站 GA4，新手要避開。

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

按造成 debug 時間長度排序（短到長）：

1. **選錯目錄（debug 30 分鐘）**：SEO repo 下有 v0.1 / v0.2 / v3 三個版本，現役只有 v3，v0.1/0.2 已歸檔到 _archive/。我前面 30 分鐘做在 v0.1 才發現預覽 server 跑的是 v3 — 動工前先 grep `launch.json` 或 README 確認現役目錄，避免做白工。
2. **圖檔副檔名雙後綴（debug 15 分鐘）**：從圖片編輯器匯出時不小心存成 `portrait-real.webp.png`（兩個副檔名），HTML 引用 `portrait-real.webp` 直接 404 觸發 onerror fallback。修法：rename 統一單一副檔名（`portrait-real.png` 或 `.webp` 任一），HTML src 跟著對齊。Windows Explorer 預設隱藏副檔名，看不到雙後綴，要從 PowerShell `ls` 才會看到。
3. **Hero 圖 2.7MB 沒壓縮（debug 5 分鐘 + 壓縮 1 分鐘）**：原始 PNG 1823×863 直接放，部署上線首屏 LCP 預估 5-8 秒（4G 環境），PageSpeed 直接扣分。用 Python PIL 一行壓 webp quality 82：`img.resize((1200, h)).save('hero.webp', 'WEBP', quality=82, method=6)` — 從 2645KB 壓到 143KB，省 95%。LCP 估降到 < 1 秒。
4. **GitHub commit author 不對 Vercel Hobby plan Block deploy（debug 1 小時）**：Vercel Hobby plan **private repo 只允許 project owner 的 commit 觸發 build**。我用 GitHub noreply email `weiyin11@users.noreply.github.com`，但 Vercel 帳號註冊用 `try19901125@gmail.com` — 兩者不同 → Vercel 把我當「外人 collaborator」一律 Block，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 雙重 scale（debug 2 小時）**：我寫 viewport=460 想讓 mobile browser 自動 fit 460 設計到 device width，同時 JS `fitShellToViewport` 又 transform scale — 兩個 scale 機制疊在一起。**IG / Threads in-app browser** 對 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 退化成左對齊（debug 30 分鐘）**：`Math.ceil(1120 * 0.397) = 445`，比 body content（`460 - padding 16 = 444`）多 1px → flex 沒空間置中 → 退化成左對齊（看起來偏右一點）。這個 bug 跟 `margin: 0 auto` 失效同根本原因 — 1px overflow 就會打破所有 centering 機制。改 `Math.floor` 後完美置中（centerDiff 0.00px）。

教訓總結 3 條：1) 動 multi-version repo 前先確認現役目錄；2) Vercel 部署 + custom domain 永遠在實機 in-app browser 驗證，preview tool 跟 desktop simulator 不可靠；3) CSS 居中機制（margin auto / flex）對 1px overflow 極度敏感，計算寬度永遠用 floor 不用 ceil。

1 天 step-by-step（6-7 小時可全跑完）

用上面 6 個坑避開後，1 天可全跑完。我的時間表（每段已扣除 debug 時間）：

1. Step 1（上午 30 分鐘）— 決定要不要做。看 Section 1 三個條件，符合 ≥ 1 個再動。沒符合就用 Linktree 省一天。
2. Step 2（上午 1 小時）— 新建獨立 repo。`mkdir coolkid-bio && cd coolkid-bio && git init -b main`。**重點：不要建在主站 repo 子目錄下**，新建獨立目錄與主站平級。建 `vercel.json` 設 cache header（HTML must-revalidate / assets immutable）+ `.gitignore` 排除 `.vercel`。
3. Step 3（上午 2 小時）— 用 Claude Code 寫 index.html。指令範本：「請建一個 link-in-bio 單頁網站，視覺風格 [一句話世界觀，例如『GameBoy DMG 復古機殼』]，包含 4 個區塊：hero 大圖 / 彩色 social icons（IG/Threads 用 inline SVG）/ 4 個大連結卡片 / footer 含 © 跟版本號。純靜態 HTML+CSS，no JS framework。」一次到位再 iterate 視覺。
4. Step 4（中午 30 分鐘）— Hero 圖壓縮。用 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。Alternative：用 squoosh.app 網頁工具壓。
5. Step 5（下午 1 小時）— Vercel 部署 + custom domain。`npm i -g vercel` → `cd coolkid-bio && vercel`（第一次 setup prompts）→ Vercel Dashboard → Settings → Domains → Add `link..com`。Vercel 給你 CNAME target（通常 `cname.vercel-dns.com`）。
6. Step 6（下午 30 分鐘）— DNS 設定。Cloudflare → 對應 zone → DNS → Add CNAME：Name: `link`, Target: `cname.vercel-dns.com`，**Proxy status 必須關掉變灰雲（DNS only）**，否則 Vercel SSL 跟 Cloudflare proxy 會打架 502/521。5-30 分鐘 DNS propagate，Vercel 自動發 Let's Encrypt SSL。
7. Step 7（下午 1 小時）— 實機驗證 + viewport / centering 微調。**永遠用真實手機開 IG / Threads / Safari** 點連結驗證，不要靠 desktop preview tool（in-app browser 行為跟桌面差太多）。我在這步發現 viewport 雙重 scale，又花 2 小時 debug。

總計約 6-7 小時。第一次做的人加 buffer 2 小時（不熟悉 Vercel CLI / DNS 設定）。實際工程量取決於視覺風格複雜度 — GameBoy 機殼風的 hero / pseudo elements / bezel 細節我花了額外 3 小時 polish。

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

bio 站若是「個人入口」性質、要連多個品牌 → **開新 GA4 property** 跟其他品牌完全分開，不要共用主站 GA4 ID。原因：主站 GA4 看到的訪客全是「來看主站內容」的 cohort，bio 站訪客是「來找我所有東西」的 cohort，動機完全不同，混在一起算出來的 bounce rate / session duration / conversion 都是失真的平均值。

但 `link.coolkidlab.com` 子網域**在 Google Search Console 仍歸 coolkidlab.com property**（同 root domain），這層切不開。如果你要 SEO / GSC 也完全切，就用獨立網域（coolkid.bio / coolkid.dev）。我目前接受這個 trade-off — 子網域 SEO 上仍算 Lab，但 GA4 cohort 是分開的，比起完全混到一起好多了。

Cache 策略也要單獨設：bio 站 HTML 用 `Cache-Control: max-age=0, must-revalidate`（你改連結後訪客下次進來立刻看到新版），assets（圖 / CSS）用 `max-age=31536000, immutable`（永遠 cache 直到改檔名）。改 asset 內容後要 force refresh 就在 HTML 內 src 加 `?v=YYYYMMDD` cache buster。

不想自己 setup 怎麼辦？

上面這套自己跑 1 天（6-7 小時）。如果符合下面任一條，可能不適合自己跑：

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

符合任一條 → 直接用 Linktree Pro 或 Bento.me（基本免費 + Pro 升級）。多花 270 元換省 1 天時間 + 不用維護 DNS / SSL / cache 設定。如果你要的是「我要自己做但卡住」可以找 不想自己研究我教你（規劃中），一對一帶你從 repo init → Vercel deploy → DNS 設定 → 實機驗證整套跑完，主要解的是 Vercel Hobby plan author email / viewport 雙重 scale 這種「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

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

這篇是收斂後寫的版本。
我每兩週寄一封電子報，講「正在做但還沒寫成文章」的東西——
包含每月幫你過濾值得花時間的新 AI 工具，
以及 Lab 新文的個人版（你會比公開版早一週收到）。

→ 訂閱（雙週一封，第一封自動寄起步清單）

跳轉 Substack、隨時取消、不轉賣 email。

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

看完這篇之前先確認:

← 回新手教學