คู่มือ ChanTan Studioวิธีเผยแพร่เว็บไซต์ให้ออนไลน์จริงด้วย ChanTan Studio
พาเว็บของคุณขึ้นออนไลน์ที่อยู่จริงภายใน 1–4 นาที เลือกที่อยู่ฟรี .chantan.one กดเผยแพร่ แล้วส่งการแก้ไขครั้งถัดไปขึ้นเว็บด้วยปุ่มอัปเดต
ระหว่างที่คุณกำลังสร้างงาน แอปของคุณอยู่แค่ในหน้าตัวอย่างส่วนตัวเท่านั้น การเผยแพร่ คือการคัดลอกมันขึ้นอินเทอร์เน็ตสาธารณะที่อยู่เว็บจริง ใครก็เปิดดูในเบราว์เซอร์ได้ ไม่ต้องล็อกอิน ไม่ต้องมีบัญชี ChanTan
สมมติร้าน "ครัวริมคลอง" เพิ่งให้ AI ทำหน้าเมนูกับพิกัดร้านเสร็จ ตราบใดที่ยังไม่กดเผยแพร่ ลูกค้าที่เดินผ่านหน้าร้านก็ยังเปิดดูไม่ได้
สิ่งที่ควรรู้ก่อนเริ่ม:
- การเผยแพร่ใช้เวลาราว 1–4 นาที ปิดหน้าต่างได้เลย ระบบทำงานต่อเบื้องหลัง
- ที่อยู่ฟรีของคุณฟรีตลอดไป และ HTTPS (รูปกุญแจ) ถูกตั้งค่าให้อัตโนมัติ
- โฮสติงฟรีเดือนแรก สำหรับแอปที่เผยแพร่แต่ละตัว หลังจากนั้นมีค่าเครดิตรายเดือนเล็กน้อย — อ่าน ค่าโฮสติง ChanTan Cloud
- ลิงก์หน้าตัวอย่าง ไม่ใช่ ลิงก์ที่เอาไว้แชร์ มันเป็นตัวอย่างชั่วคราวและจะหลับไปเอง ที่อยู่ที่เผยแพร่แล้วต่างหากคือของจริงและอยู่ถาวร
1. กดปุ่ม "เผยแพร่"
ปุ่ม "เผยแพร่" อยู่ท้ายสุดของแถบหัวโปรเจกต์ (คำอธิบายเมื่อชี้เมาส์: "เผยแพร่แอปของคุณสู่เว็บ") บนมือถือคือไอคอนจรวดวงกลมที่ปลายแถวหัวเรื่อง
ถ้าปุ่มเป็นสีจาง แปลว่า AI ยังทำงานอยู่ คำอธิบายจะบอกว่า "รอสักครู่ — คุณเผยแพร่ได้เมื่อการสร้างเสร็จ" รอให้เสร็จก่อน
2. เลือก "ที่อยู่ฟรี"
หน้าต่างจะเปิดขึ้นชื่อ "คนจะเข้าชมเว็บไซต์ของคุณที่ไหน?" พร้อมการ์ดสามใบ
| การ์ด | ป้าย | ได้อะไร |
|---|---|---|
| "ที่อยู่ฟรี" | "ฟรี · เร็วที่สุด" | my-app.chantan.one |
| "ฉันมีโดเมนแล้ว" | — | ใช้โดเมนที่คุณมีอยู่แล้ว |
| "ซื้อโดเมน" | "เริ่มต้น $1/ปี" | ได้ yoursite.com เราตั้งค่าให้ทุกอย่าง |
กด "ที่อยู่ฟรี" สามทางนี้ ไม่ใช่ ทางเลือกที่ต้องเลือกอย่างใดอย่างหนึ่ง ที่อยู่ฟรีถูกสร้างก่อนเสมอและใช้ได้ตลอดไป ส่วนโดเมนของคุณเองจะมาต่อทับทีหลัง
3. ตั้งชื่อที่อยู่ของคุณ
การแตะ "ที่อยู่ฟรี" ยังไม่ใช่การเผยแพร่ มันจะเปิดหน้า "เลือกที่อยู่ฟรีของคุณ" โดยเติมชื่อโปรเจกต์ให้ล่วงหน้า
⚠️ "เลือกอย่างระมัดระวัง — ที่อยู่เว็บของคุณเปลี่ยนภายหลังไม่ได้" หนึ่งโปรเจกต์ต่อหนึ่งที่อยู่ ถาวร ถ้าภายหลังอยากได้ที่อยู่อื่น วิธีที่ระบบรองรับคือเชื่อมต่อโดเมนของคุณเองเข้ามา
กติกาการตั้งชื่อ:
| กติกา | ค่า |
|---|---|
| ความยาว | 3–30 ตัวอักษร |
| ใช้ได้ | ตัวอักษรพิมพ์เล็ก ตัวเลข และขีดกลาง |
| ต้องขึ้นต้นและลงท้ายด้วย | ตัวอักษรหรือตัวเลข ห้ามเป็นขีดกลางทั้งสองด้าน |
| ตัวพิมพ์ใหญ่ เว้นวรรค อักขระพิเศษ | ระบบล้างให้อัตโนมัติขณะพิมพ์ |
| ใช้ไม่ได้ | คำสงวนราว 45 คำ เช่น www, app, admin, api, mail, support, blog, dashboard, login |
ช่องนี้ตรวจสอบให้ทันทีขณะพิมพ์ ถ้าขึ้นเครื่องหมายถูกสีเขียวว่า "ว่าง!" แปลว่าใช้ได้ (เช่น kruarimklong สำหรับร้านครัวริมคลอง)
ถ้าขึ้นกากบาทสีแดง ข้อความจะบอกสาเหตุตรง ๆ:
| ข้อความ | ต้องทำอะไร |
|---|---|
| "ใช้อย่างน้อย 3 ตัวอักษร" | ตั้งชื่อให้ยาวขึ้น |
| "ขึ้นต้นหรือลงท้ายด้วยขีดกลางไม่ได้" | ย้ายขีดกลางไปไว้ตรงกลาง |
| "ชื่อนั้นถูกสงวนไว้" | เปลี่ยนไปใช้คำอื่น |
| "ใช้ตัวอักษร ตัวเลข และขีดกลาง 3-30 ตัว" | เอาอักขระที่ไม่ใช่ตัวอักษร ตัวเลข หรือขีดกลางออก |
| "ที่อยู่นั้นถูกใช้แล้ว" | มีคนจองไปก่อน เติมคำหรือขีดกลางเพิ่ม |
| "ตรวจสอบที่อยู่นั้นไม่ได้ในตอนนี้ — พิมพ์ต่อหรือลองอีกครั้ง" | ตัวตรวจสอบเองมีปัญหา ระบบจงใจตอบว่า "ไม่ว่าง" ไว้ก่อน เพื่อไม่ให้ที่อยู่เดียวกันถูกแจกซ้ำสองครั้ง |
4. กด "เผยแพร่แอปของฉัน"
คุณจะเห็นข้อความ "กำลังเผยแพร่แอปของคุณ…" พร้อมหมายเหตุตรงไปตรงมาว่า "โดยปกติใช้เวลา 1–4 นาที คุณปิดหน้านี้ได้ — เราจะทำต่อในเบื้องหลัง"
มีห้าขั้นตอนทำงานตามลำดับ:
- "กำลังเตรียมไฟล์ของคุณ"
- "กำลังปลุกตัวสร้าง"
- "กำลังส่งการเปลี่ยนแปลงล่าสุดของคุณ"
- "กำลังสร้างและอัปโหลดแอปของคุณ"
- "กำลังขึ้นออนไลน์"
ด้านล่างมีตัวจับเวลาเดินอยู่ และเมื่อผ่าน 3 นาทีจะเพิ่มข้อความ "ยังทำงานอยู่ — แอปขนาดใหญ่ใช้เวลานานขึ้นเล็กน้อย" การปิดหน้าต่างไม่ได้ยกเลิกอะไรทั้งสิ้น
5. เปิดเว็บไซต์จริงของคุณ
เมื่อเสร็จ คุณจะเห็น "🎉 แอปของคุณออนไลน์แล้ว!" พร้อมกระดาษหลากสี ที่อยู่เต็มในกล่องคัดลอก และปุ่มใหญ่ "เข้าชมเว็บไซต์ของคุณ"
✅ เรียบร้อย! แอปของคุณออนไลน์อยู่ที่ https://your-name.chantan.one ใครมีลิงก์ก็เปิดได้ในเบราว์เซอร์ ผู้เข้าชมไม่ต้องมีบัญชี ChanTan และรูปกุญแจ (HTTPS) มาให้พร้อมแล้ว
จำประโยคที่สำคัญที่สุดบนหน้าจอนั้นไว้:
"การแก้ไขในอนาคตจะยังเป็นส่วนตัวจนกว่าคุณกดอัปเดต"
ส่งการแก้ไขครั้งถัดไปขึ้นเว็บ
ข้อความในแชท การแก้ไขด้วยการคลิก หน้าใหม่ รูปใหม่ — ทั้งหมดยังเป็นส่วนตัว จนกว่าคุณจะเผยแพร่อีกครั้ง เช่น ร้านครัวริมคลองเปลี่ยนราคาข้าวผัดปูในเมนู ลูกค้าจะยังเห็นราคาเดิมจนกว่าคุณจะกดอัปเดต
- กดปุ่มบนแถบหัวเรื่อง ซึ่งตอนนี้เขียนว่า "อัปเดต" พร้อมจุดสีเหลืองอำพัน
- หน้าต่าง "แอปที่คุณเผยแพร่" จะแสดงที่อยู่ออนไลน์ของคุณ (พร้อมปุ่ม "คัดลอก" และ "เข้าชม") กับบรรทัดสถานะ — จุดเขียวว่า "ออนไลน์ · เผยแพร่ {ago}" หรือจุดเหลืองอำพันว่า "คุณมีการเปลี่ยนแปลงที่ยังไม่ออนไลน์"
- กด "อัปเดตเว็บไซต์"
ถ้าปุ่มเป็นสีจาง แปลว่าไม่มีอะไรเปลี่ยนตั้งแต่การเผยแพร่ครั้งล่าสุด คำอธิบายจะขึ้นว่า "เว็บไซต์ออนไลน์ของคุณเป็นเวอร์ชันล่าสุดแล้ว" ความแตกต่างใด ๆ ก็นับ แม้แต่การเปลี่ยนรูปเพียงรูปเดียว
การอัปเดตไม่เคยทำให้เว็บของคุณล่ม เวอร์ชันใหม่ถูกอัปโหลดจนครบแล้วค่อยสลับทีเดียวตอนท้าย ถ้าการสร้างล้มเหลวก่อนหน้านั้น เว็บเดิมของคุณยังให้บริการต่อไป — หน้าจอแจ้งข้อผิดพลาดสัญญาไว้ตรง ๆ ว่า "เว็บไซต์ออนไลน์ปัจจุบันของคุณไม่ได้รับผลกระทบ" ผู้เข้าชมจะเห็นเวอร์ชันใหม่ทันทีที่รีเฟรช
รายการ "เวอร์ชันก่อนหน้า" ที่กางออกได้จะแสดงการเผยแพร่ล่าสุดไม่กี่ครั้ง พร้อมเวลาและสถานะ
⚠️ รายการนั้นเป็นประวัติเท่านั้น ไม่มีปุ่ม "กู้คืนเวอร์ชันนี้" ถ้าจะเปลี่ยนสิ่งที่ออนไลน์อยู่ ให้แก้ไขแอปของคุณ (หรือใช้ปุ่มย้อนกลับในแชท) แล้วเผยแพร่ใหม่
นำเว็บไซต์ออฟไลน์
หน้าต่างเผยแพร่ → "ตัวเลือกเพิ่มเติม" → "นำเว็บไซต์ของฉันออฟไลน์" (สีแดง) → ยืนยัน
| คำถาม | คำตอบ |
|---|---|
| ยังได้ที่อยู่ของฉันไว้ไหม | ได้ ที่อยู่ยังถูกจองไว้ให้โปรเจกต์นี้อย่างถาวร |
| ผู้เข้าชมจะเห็นอะไร | หน้าเปล่า ๆ ว่า "Nothing here yet — There is no app published at this address." (ยังไม่มีอะไรที่นี่ — ไม่มีแอปเผยแพร่อยู่ที่อยู่นี้) และเสิร์ชเอนจินจะถูกสั่งไม่ให้เก็บรายการ |
| เอากลับมาได้ไหม | ได้ กดเผยแพร่อีกครั้ง ระบบจะสร้างใหม่ที่อยู่เดิม |
| ไฟล์โปรเจกต์ของฉันถูกลบไหม | ไม่ ถูกลบเฉพาะสำเนาสาธารณะเท่านั้น โปรเจกต์ แชท ไฟล์ และข้อมูลของคุณยังอยู่ครบ |
| ทำแล้วกลับมาทันทีไหม | ไม่ การเผยแพร่ใหม่จะสร้างทั้งหมดอีกรอบ จึงใช้เวลา 1–4 นาที |
| แล้วโดเมนของฉันล่ะ | ยังผูกอยู่ แต่ไม่มีอะไรให้แสดงจนกว่าคุณจะเผยแพร่อีกครั้ง |
การนำเว็บออฟไลน์ยัง หยุดค่าโฮสติง ของเว็บนั้นด้วย
ถ้าการเผยแพร่ล้มเหลว
ทุกข้อผิดพลาดจะแสดงคำยืนยันว่า "เว็บไซต์ออนไลน์ปัจจุบันของคุณไม่ได้รับผลกระทบ" พร้อมปุ่ม "ลองอีกครั้ง" และส่วน "รายละเอียดทางเทคนิค" ที่กางดูได้
ข้อความแจ้งความล้มเหลวเหล่านี้ยังมาเป็นภาษาอังกฤษ ตารางนี้บอกความหมายไทยและสิ่งที่ต้องทำ:
| ข้อความ | ต้องทำอะไร |
|---|---|
| "This project has no files to publish yet — build something first." (ยังไม่มีไฟล์ให้เผยแพร่) | สั่ง AI ในแชทให้สร้างแอปของคุณก่อน |
| "Could not start the builder…" / "The builder took too long to start. Try again." (เริ่มตัวสร้างไม่ได้) | ปัญหาชั่วคราวของเครื่องสร้าง ลองใหม่ |
| "Could not sync your latest files… Try again." / "The build could not start… Try again." (ซิงก์ไฟล์ไม่สำเร็จ) | ชั่วคราว ลองใหม่ |
| "The app failed to build. Check the technical details and fix the error, or try again." (แอปสร้างไม่ผ่าน) | เป็นข้อผิดพลาดจริงในแอป เปิด "รายละเอียดทางเทคนิค" แล้วเล่าให้ AI ในแชทช่วยแก้ |
| "Publishing took too long and was stopped. Try again." (ใช้เวลานานเกินกำหนด) | การสร้างชนเพดานเวลา ลองใหม่ |
| "Publishing was interrupted. Try again." (การเผยแพร่ถูกขัดจังหวะ) | ระบบรีเซ็ตให้แล้ว ลองใหม่ |
| "The build produced no publishable files." / "The build produced no index.html." (สร้างแล้วไม่ได้ไฟล์เว็บ) | แอปของคุณไม่ได้ถูกสร้างออกมาเป็นเว็บไซต์ ให้ AI ตรวจสอบ |
| "This app is too large to publish (200 MB limit)." (แอปใหญ่เกิน 200 MB) | ลบหรือบีบอัดรูปและวิดีโอขนาดใหญ่ |
| "This file contains <secret>. Secret keys must never ship in a published app…" (ไฟล์มีคีย์ลับ) | ให้ AI ย้ายคีย์นั้นไปฝั่งเซิร์ฟเวอร์ แล้วใช้คีย์สาธารณะในเบราว์เซอร์แทน |
| "Publishing failed — open Publish to retry" (เผยแพร่ล้มเหลว เปิดหน้าเผยแพร่เพื่อลองใหม่) | หน้าต่างถูกปิดไป เปิดหน้าเผยแพร่แล้วลองใหม่ |
ข้อจำกัดที่บอกกันตรง ๆ
| ข้อจำกัด | ค่า |
|---|---|
| จำนวนไฟล์ในแอปที่เผยแพร่ | 2,000 ไฟล์ |
| ไฟล์เดียว | 25 MB |
| ทั้งแอป | 200 MB |
คีย์ลับส่วนตัวเผยแพร่ออกไปไม่ได้เด็ดขาด ถ้าระบบเจอ การเผยแพร่จะถูกปฏิเสธพร้อมคำอธิบาย การป้องกันนี้ปิดไม่ได้ เพราะมันปกป้องคุณเอง — แอปที่เผยแพร่แล้วใครก็อ่านได้
ที่อยู่ฟรีเป็นของคุณตั้งแต่วินาทีที่จอง ก่อนมีอะไรขึ้นออนไลน์ การเข้าที่อยู่นั้นจะเห็นหน้าเปล่าว่า "Nothing here yet — There is no app published at this address." (ยังไม่มีอะไรที่นี่ — ไม่มีแอปเผยแพร่อยู่ที่อยู่นี้)