專案實錄
網站
試營運
6 個問題

一個人加 AI 做出這個網站：AI 有解從零到上線

用 Claude Code 寫 Expo，一套程式碼同時出網站、iOS 和 Android，靜態網頁放在 Cloudflare Pages。部署後圖示整片消失、iPhone 播不了影片、網址想了好幾輪，過程全部攤開。
AI 有解（howdidai.com）・2026 年 11 月 4 日 開始・最後更新 2026 年 11 月 8 日
Cloudflare Pages
three.js
ffmpeg
你現在看的這個網站，就是這份實錄的主角。我們從 2026 年 11 月 4 日開始做，一個人加上 AI 寫程式代理，11 月 6 日買下網址、開放試營運。下面是真實的流程、用到的工具和踩過的坑，數字都是當時的實際紀錄。
做出了什麼
•
一套程式碼（Expo SDK 58、React Native）同時輸出網站、iOS 和 Android App。
•
網站是靜態網頁：建置時把每篇攻略、每台機器、每個 3D 模型都算成獨立的 HTML，搜尋引擎和 AI 不用執行 JavaScript 也讀得到。
•
論壇、影片分享、可以照做的攻略、機械圖鑑、硬體模組庫、3D 拆解圖庫，還有你正在看的專案實錄。
•
給 AI 讀的介面：llms.txt、公開 JSON API 和一個唯讀的 MCP 伺服器。
•
3D 模型和講解影片來自另一個專案，網站用一支同步指令接過來，成品放在3D 拆解圖庫。
流程
1.
先想清楚要解決什麼。 很多人用過 AI，卻做不出東西；網路上的教學散在各處，工具更新後也沒人標示過時。所以每篇攻略都要能照做，並標示最後驗證日期。
2.
先寫規則給 AI 寫程式代理。 專案根目錄放一份 AGENTS.md：用 npx expo install 裝套件，完成前一定要跑 lint 和型別檢查。
3.
內容和程式分開。 攻略、機器、文件都是 content/ 裡的 Markdown 和 JSON，一支建置腳本把它們轉成程式用的資料、公開 API、llms.txt 和 sitemap。寫內容不用碰程式。
4.
輸出靜態網頁。 Expo Router 設定 web.output: "static"，搭配 generateStaticParams，每個網址在建置時就有自己的 HTML。
5.
先部署到測試網址。 Cloudflare Pages 的預覽分支會自動加上 noindex，用手機實際點過，再部署到正式分支。
6.
買網址、接上正式網址。 試營運期間用 _headers 檔加上 X-Robots-Tag: noindex，還沒準備好的版本不會被 Google 收錄。
7.
接別的專案的成品。 影片專案做完一支片，在自己的資料夾寫一份交付單；網站這邊跑同步指令，複製 3D 模型、用 Blender 算封面、把影片壓到網站放得下的大小。
用到的工具
工具
用在哪
Claude Code
寫全部程式和建置腳本、部署、用瀏覽器實際點過驗證
Expo（SDK 58）與 React Native
一套程式碼出網站、iOS、Android
Expo Router
檔案就是路由，每頁都有自己的網址
Cloudflare Pages
放靜態網站；Pages Functions 補伺服器端的小功能
three.js
瀏覽器裡的 3D 拆解檢視器
Blender
只用 CPU 算 3D 模型的封面圖
ffmpeg
把講解影片壓到單檔上限以內
Supabase
正式上線後的會員和資料庫，還沒接上

遇到的問題

1
部署後全站圖示變成空白方塊
2
iPhone 的 Safari 播不了影片，也不能拖進度
3
影片快 200 MB，Pages 單檔只收 25 MiB
4
新網址接上後，前一分鐘打不開
5
想好的網址都被註冊了，還差點說錯
6
影片換成繁體版，網站上還在播舊的
1
部署後全站圖示變成空白方塊
症狀
本機預覽一切正常，部署到 Cloudflare Pages 後，所有圖示都變成空白，瀏覽器主控台一整排字型檔 404。
原因
expo export 把圖示字型放在 dist/assets/vendor/ 底下，而 wrangler 上傳時會略過所有叫 node_modules 的資料夾，字型根本沒有傳上去。
解法
匯出後多跑一支腳本，把 assets/node_modules 改名成 assets/vendor，再把 HTML、JS、CSS 裡的路徑一起換掉。之後一律用一個指令完成「建置內容、匯出、改名」三步，不再直接跑 expo export。改完多上傳了 37 個檔案，圖示全部回來。
終端機
npm run export:web
終端機
npx wrangler pages deploy dist --project-name 你的專案名稱
2
iPhone 的 Safari 播不了影片，也不能拖進度
症狀
電腦上的 Chrome 能播講解影片，iPhone 上卻播不了，或是能播但進度條拖不動。
原因
Safari 播影片會先送 Range 請求只要一小段，伺服器必須回 206 Partial Content。Cloudflare Pages 的靜態檔不支援 Range，一律回 200 和整個檔案，Safari 就不播了。
解法
加一個 Pages Function（functions/models/[id]/video.mp4.js）攔下影片請求，讀出檔案後依 Range 切出那一段，回 206、Content-Range 和正確的 Content-Length；範圍不合法就回 416。第一版想用串流省記憶體，但 next() 拿到的回應沒有 Content-Length，算不出檔案多大，所以改成先讀成 ArrayBuffer 再切。用 curl 驗證，要看到 206 1000：
終端機
curl -s -o /dev/null -w "%{http_code} %{size_download}\n" -H "Range: bytes=1000-1999" https://howdidai.com/models/v12/video.mp4
代價是每次請求都要讀整個檔案，流量變大之前要把影片搬到 R2 或 YouTube。
3
影片快 200 MB，Pages 單檔只收 25 MiB
症狀
部署時影片檔傳不上去。
原因
Cloudflare Pages 每個檔案上限 25 MiB，講解影片的原檔是 1080×1920、將近 200 MB。
解法
同步時用 ffmpeg 兩階段編碼：先用片長算出剛好塞進 23.5 MiB 的位元率，畫面縮到 720×1280，再加上 -movflags +faststart，讓影片下載一點就能開始播。2 分 29 秒的 V12 引擎片壓完約 23.4 MiB，字幕仍然清楚。結果存進快取，原片沒變就不重壓。
4
新網址接上後，前一分鐘打不開
症狀
在 Cloudflare 把網址接到 Pages 後馬上測試，出現 TLS 握手失敗。
原因
新的自訂網域要先簽發憑證，這段時間 HTTPS 還沒準備好。
解法
不用改任何設定，等一下再測。我們實測約 40 秒後就正常，http:// 也會自動轉到 https://。
5
想好的網址都被註冊了，還差點說錯
症狀
想要短、好記、全世界都能用的 .com，第一輪想到的幾乎都被註冊了。我們還犯了一個錯：沒查就說 unstuck.com 可以買，實際上它 1997 年就被註冊了。
原因
短的英文 .com 大多早就有人註冊。另外，用 rdap.org 這類通用查詢站查 .co、.io，常常回 404，看起來像沒人註冊，其實只是查不到。
解法
直接查網域主管機關的 RDAP：.com 查 Verisign、.tw 查 TWNIC。回 200 代表已經有人註冊，404 才是沒人註冊。最後從「How did AI」想到 howdidai.com：howdid.com 從 2003 年就被註冊了，加上 AI 反而讓人一看就知道網站在做什麼。
終端機
curl -s -o /dev/null -w "%{http_code}\n" https://rdap.verisign.com/com/v1/domain/howdidai.com
6
影片換成繁體版，網站上還在播舊的
症狀
影片專案通知繁體版交付了，網站同步完，其中一支還是簡體版。
原因
同步指令一開始就讀完所有交付單。那支片的交付單是在同步跑到一半時才改的，這一輪讀到的還是舊路徑。
解法
再跑一次同步。部署後比對本機壓好的檔案和網站上下載回來的檔案，SHA-256 一樣才算換好，再抽幾格畫面看字幕。
終端機
curl -s https://howdidai.com/models/euv/video.mp4 | sha256sum
學到的事
•
第一次畫面要和靜態網頁一模一樣。 網址參數（例如 ?tab=video）在建置時讀不到，要等頁面掛載後才套用；排序、相對時間這類每次不同的東西也一樣，不然搜尋引擎看到的和使用者看到的會不同。
•
上正式網址前，先在測試網址用手機點過。 圖示消失和 iPhone 影片的問題，本機預覽都看不出來。
•
驗證要看實際結果。 指令跑成功不代表上線了，用 curl 看狀態碼、比對檔案雜湊才算數。
•
說「可以」之前先查。 網域、名稱這類事實，用主管機關的資料確認，不要憑印象。
•
試營運先擋搜尋引擎。 等內容和會員系統都準備好，再拿掉 noindex。
現在進度與下一步
•
網站在 howdidai.com 試營運，搜尋引擎不收錄。
•
會員資料庫還沒接上，帳號和發文只存在自己的裝置上。
•
正式上線前要做：接上 Supabase、設定客服信箱、查商標、把影片搬到 R2，然後拿掉 noindex、提交 sitemap。
廣告版位
想讓正在用 AI 的人看到你的產品？了解廣告合作
3D 模型與講解影片
這個專案做出來的成品
V12 引擎
動力與傳動・219 個零件
想自己做做看
從這些攻略開始
你也卡在類似的地方？
到論壇發問並附上這一頁，或分享你自己的解法。整理好的問題會放進專案實錄的問題索引。