網站做好了，怎麼讓大家一起用？

用 AI 做好一個旅遊網站，傳到家族群組，第一個回覆通常是：「那我可以加一筆嗎？」

網站做好，只是開始。這集用一個虛構的「小森家」家族旅遊網站，從頭走一遍：先做出來、放上網，再讓大家一起記公費、一起改行程，但不會被亂改。

先分清楚：你打得開，不等於別人打得開

先看成品。示範網站有總覽、每天的行程、大家一起記的公費、給店員看的日文，還有打包清單。它其實就是一個網頁、一個網址，加到手機主畫面以後，打開就像一個 App。

但要注意一件事：AI 幫你做好的檔案，存在你自己的電腦裡。網址列上寫的是 Users、Sandra 一長串路徑，這叫本機端，只有你看得到。我離開這台電腦，別人就打不開。

要讓別人用，就要部署，拿到一個真正的網址。這篇照四步走：做出來、拿網址、讓大家一起用、上線前檢查。

示範網站可以直接打開看：komori-trip-demo.vercel.app（虛構的小森家，資料都是假的）。

第一步：一段 prompt，把行程變成手機 App

這段是新手村課程裡的「手機 App 版」prompt。把它複製下來，最下面貼上你自己的行程，整段丟給 ChatGPT 或 Claude。行程寫得亂一點也沒關係。

請根據我下方提供的旅遊行程，幫我做一個「手機 App 風格」的旅遊行程小程式，
輸出成「單一 HTML 檔案」，我要存檔打開、也能上傳網路，
而且要能「加入手機主畫面」，打開後像一個真的 App。

【整體形態：重點，要像 App 不是像網頁】
- 滿版設計，固定佔滿整個手機畫面，不要一直往下捲的網頁感
- 最下方有一排「分頁列」（像 IG、LINE 那種底部 Tab）：
  總覽、Day 1、Day 2、Day 3…（依天數）、打包清單
- 點底部 Tab 就切換畫面，切換時有滑順轉場動畫
- 最上方有固定標題列，不會跟著內容捲走

【可以加入主畫面】
- 加入 PWA 設定與 App 圖示
- 加上 apple-mobile-web-app-capable 等 meta，
  讓 iPhone「加入主畫面」後打開沒有網址列、像獨立 App

【每一頁內容】
- 總覽頁：幾天幾夜、地點、亮點、旅費試算
- 每個 Day 頁：時間軸行程，每個地點有「地圖」按鈕開 https://maps.google.com?q=地名
- 打包清單頁：自動生成行前 checklist，可打勾，存 localStorage（重開不消失）

【操作手感】
- 按鈕和可點區域夠大，點擊有回饋

【設計】配色配合旅遊地氣氛，中文用 Google Fonts 的 Noto Sans TC
【技術】所有程式碼放同一個 HTML 檔，不用外部套件、不用後端，請確保完整輸出不要截斷

--- 以下是我的行程 ---

（在這裡貼上你的行程）

手邊沒有行程可以試？課程簡報裡有一份京都三天的行程素材，也有這段 prompt 的一鍵複製：旅遊教學簡報。

同一份行程，也可以做成往下滑的網頁版。差別只在給 AI 的那句話。這次示範的是 App 版：底部有分頁列，打包清單可以打勾，地點可以直接開 Google 地圖。

第二步：檔名改成 index.html，拖進 Netlify

AI 寫完程式，把 HTML 下載下來。下載完記得把檔名改成 index.html。網站打開時預設會找 index 這個首頁，檔名是一串亂碼的話，我自己測過，很容易失敗。

接著打開 Netlify Drop，用 Google 帳號就能登入。記得先登入：沒登入的話，網站雖然看得到，但會有時間限制，還會卡一個密碼。登入以後網站會留在你的帳號裡，之後也好管理。

• 只有一個 HTML：改好檔名，直接拖進去。
• 有很多圖片：把 index.html 和圖片放進同一個資料夾，拖整個資料夾，或壓成 ZIP 檔再拖。
• 之後網站有更新：再拖一次新的進去，就會覆蓋原本的。

畫面全是英文，真的不要害怕。拖進去以後，Netlify 會給你一個網址，傳給家人，手機就能開。

部署上網，就等於公開

拿到網址的那一刻，上面寫的所有東西都已經公開上網。所以上面可不可以寫護照號碼？不行。不要想說這個網址只給幾個人看，它就是公開了。

Netlify 給的網址常常是一串亂碼，可以改成好記的名字：進網站的 Project configuration → General，按 Change project name。

• 名字只能用英文小寫、數字、連字號，跟別人重複會請你換一個。
• 改名以後舊網址就失效，改好再傳給家人。
• 不想公開了，也可以在設定裡改成私人。

最後一定要檢查：用無痕視窗打開你的網址。無痕看不到，一般人就看不到。很多人會忽略另一種情況：以為有網址就公開了，結果設定是私人的。這兩種都要確認一下。

第三步：網站後面，接一張 Google 試算表

到這裡，大家都能看，但只能看。如果你的網站不需要讓大家編輯，這樣就夠用了。

想讓大家一起記公費，網站後面就要接一張 Google 試算表。試算表的「擴充功能」裡有一個 Apps Script，可以在試算表後面寫程式。它不是 AI，在 AI 出現之前就存在了，但現在有 AI 幫我寫程式，它幫了我很多。

在手機上記一筆「早餐 500 日圓」，按下送出，試算表的「帳目」分頁就多一列。在網站上刪掉一筆，試算表裡的那筆也跟著不見。

網站和試算表怎麼接起來？只要三個動作：

• 在 Apps Script 右上角按「部署」→「新增部署作業」，類型選「網頁應用程式」。第一次會請你授權。
• 部署完會拿到一串網址，長得像 https://script.google.com/macros/s/…/exec。之後可以在「管理部署作業」再找到它。
• 把這串網址貼回網站程式碼裡的 ENDPOINT 那一行。兩邊就接起來了。

我的示範網站裡，這行在第 800 多行，前面寫著「後端 Google 試算表」。你可以把這串網址想成一個串聯的通關密碼：貼對了，網頁就能把資料送到試算表。

試算表就是後台：把「成員」那格的成員 A、B、C 改成爸爸、媽媽、阿嬤，回到網站重新整理，名字就變了。

改行程要密碼，密碼只放試算表

行程也開放大家編輯：展開每一站、調順序、新增一站。但不是每個人都該能改，所以看行程不用密碼，改行程要密碼。輸入一次，這支手機就記住。

• 只放後端：密碼放在試算表「設定」分頁，Apps Script 去拿來比對，比對在 Google 那邊做。打開網頁原始碼搜尋，找不到密碼。
• 猜不完：錯太多次，會先鎖住一段時間。
• 隨時能換：改試算表那一格就好。
• 兩個人同時改：後存的人會被問，要不要蓋過去。
• 改錯能救回：每次存檔都留一個版本。

那平台本身的密碼呢？Netlify 整站加密碼的功能，免費方案沒有（2026 年 10 月查 Netlify 官方文件）。而寫在網頁裡的密碼，原始碼就看得到。

補一句：這裡示範的是全家共用的通行碼。如果要做每個人自己的登入密碼，那要另外加密存放。

換你做：一段話，接上試算表＋密碼

把下面這段，加上你網站的 HTML，一起貼給 AI。它會回你兩份程式和設定步驟。

我有一個旅遊行程網站（單一 HTML 檔，貼在最下面）。
我想讓家人一起用，請幫我加兩個功能：

【要加的功能】
1. 公費記帳：新增「公費」分頁，大家都能記一筆（日期、項目、金額、誰付的），所有人看到同一份帳
2. 改行程要密碼：大家都能看行程，要修改時先輸入密碼才能存

【資料存哪裡】
- 用 Google 試算表當資料庫，Google Apps Script 當後端
- 試算表分頁：「設定」（成員名單、編輯密碼）、「帳目」、「行程」
- 密碼只放在試算表「設定」分頁，網頁裡不能出現密碼，比對交給 Apps Script
- 密碼錯太多次，先鎖 10 分鐘
- 刪除只做標記，不要真的刪掉資料（刪錯救得回來）

【請給我】
1. 改好的完整 HTML（留一行 ENDPOINT，先寫「貼上你的網址」）
2. Apps Script 的完整程式碼
3. 一步一步的設定教學：建試算表 → 貼程式碼 → 部署成「網頁應用程式」→ 把網址貼回 HTML
4. 程式碼要完整輸出，不要中途截斷

--- 以下是我的網站程式碼 ---

（貼上你的 HTML）

• AI 回你兩份程式：Apps Script 那份，貼進試算表的 Apps Script，部署成網頁應用程式。
• 拿到的 /exec 網址，貼回網站的 ENDPOINT。
• 改好的 HTML 重新拖進 Netlify，就接起來了。

卡住了？把畫面截圖和錯誤訊息丟回去，問它「哪裡出錯、要改哪一行」。當下不知道該選什麼，也直接問 AI。

第四步：給大家網址之前，先問自己五題

• 誰能看？
• 誰能寫、誰能改？
• 密碼放在哪裡？
• 刪錯了，救不救得回來？
• 資料有沒有備份？

問完自己，也可以把這五題直接丟給 AI，請它想想還有什麼遺漏的風險。

做給自己看，和大家一起用，差在哪

新手村教到的，是做出一個網頁、拿到網址，大家都看得到。這集往前多走一步：大家不只看，還要一起寫。

只做給自己看的時候，檔案在本機端，打得開就好。一旦網址傳出去，問題就變了：誰能看、誰能寫、誰能改。旅遊網站只是一個例子。團購表、社團活動、家裡的帳本，都是同一套。

不要想說，這個網址只給幾個人看

直播裡我講了好幾次：部署上網，就等於公開了。網址只傳到家族群組，不代表只有家人看得到。

如果是做生意，甚至收集到使用者的個資，要顧慮的資安風險就更多。所以我自己的習慣是，每次部署完都用無痕視窗打開看一次。無痕看得到，大家就看得到。

密碼和規則，放在後端

網頁是前端，任何人都能打開原始碼。所以有一些運算、有些密碼，只能放在試算表，交給 Apps Script 去比對。

這也是為什麼試算表不用開共用。大家碰到的是櫃台，試算表本身只有你看得到。櫃台照規則收資料：刪除只做標記，錯太多次就先鎖住，改錯了還救得回來。

草稿可以自動，送出必須上鎖

這集的電子報裡，我寫了一句自己的白話原則：草稿可以自動，送出必須上鎖。送信、付款、公開發文這類動作，要留一道由人按下的最後確認。

小森家的旅遊網站，其實就是這個原則的小版本。看行程、記一筆公費，大家都能做；改行程這種會影響所有人的動作，就先上一道鎖。

不管是自己做網站，還是讓 AI 替你做事，先想清楚哪些動作可以放手，哪些要留給人按。