ตอนพิเศษ: สร้างเว็บ 1 หน้าขึ้นเน็ตจริงตั้งแต่ศูนย์

คำสั่งที่ใช้ในตอนนี้

หยุดคลิปแล้วก๊อปไปวางได้เลย เรียงตามลำดับที่ใช้ในคลิป

1. 1.macOSพิมพ์ cd เว้นวรรค แล้วลากโฟลเดอร์ my-shop-site จาก Finder มาวาง แล้วกด Enter
   cd
2. 2.macOSถ้าลากวางไม่ติด พิมพ์ที่อยู่เองแบบนี้
   cd ~/Desktop/my-shop-site
3. 3.macOSต้องเห็น shop-info.txt กับโฟลเดอร์ photos
   ls
4. 4.ทุกเครื่องเปิด Claude Code ในโฟลเดอร์ที่อยู่ตอนนี้
   claude
5. 5.ทุกเครื่องด่าน 1 กติกา 5 บรรทัดก่อนสั่งงานแรก (ตอนที่ 5)
   เขียน CLAUDE.md ว่า โปรเจคนี้คือหน้าเว็บ 1 หน้าของร้าน ข้อมูลร้านอยู่ใน shop-info.txt ข้อความบนเว็บเป็นภาษาไทย รูปอยู่ในโฟลเดอร์ photos ห้ามแก้ shop-info.txt และไฟล์ใน photos ก่อนบอกว่าเสร็จให้เปิดหน้าเว็บในเบราว์เซอร์ให้ดู
6. 6.ทุกเครื่องด่าน 1 ให้มันตั้ง git ให้ ไม่ต้องพิมพ์ 3 คำสั่งเอง
   ตั้ง git ในโฟลเดอร์นี้ แล้วบันทึกจุดย้อนกลับแรก ตั้งชื่อว่า เริ่มต้น
7. 7.ทุกเครื่องด่าน 2 สั่งในโหมดวางแผน (Shift+Tab สองครั้ง) มันจะเสนอก่อน ไม่แตะไฟล์
   อ่าน shop-info.txt แล้วเสนอแผนหน้าเว็บ 1 หน้า ไฟล์เดียวชื่อ index.html มี 5 ส่วน หัวเว็บมีชื่อร้าน สโลแกน และรูป เมนูเด่น เกี่ยวกับร้าน ที่อยู่ เวลาเปิด และแผนที่ และติดต่อ ต้องดูดีบนมือถือ ยังไม่ต้องสร้าง
8. 8.ทุกเครื่องด่าน 2 ส่วนที่ 1 หัวเว็บ
   ทำข้อ 1 ส่วนหัวอย่างเดียว สร้าง index.html ใช้รูปแรกในโฟลเดอร์ photos
9. 9.ทุกเครื่องผ่านแล้วบันทึกทันที ทุกส่วน
   บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า ส่วนหัว
10. 10.macOSเปิดหน้าเว็บในเบราว์เซอร์จากในหน้าต่าง Claude Code
    ! open index.html
11. 11.ทุกเครื่องด่าน 2 ส่วนที่ 2 เมนูเด่น
    ทำข้อ 2 ส่วนเมนูเด่น ใช้เมนู 3 อย่างจาก shop-info.txt อย่างอื่นห้ามแตะ
12. 12.ทุกเครื่องบันทึกหลังส่วนที่ 2
    บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า เมนูเด่น
13. 13.ทุกเครื่องด่าน 2 ส่วนที่ 3 เกี่ยวกับร้าน
    ทำข้อ 3 ส่วนเกี่ยวกับร้าน ใช้รูปที่สองและสามในโฟลเดอร์ photos อย่างอื่นห้ามแตะ
14. 14.ทุกเครื่องบันทึกหลังส่วนที่ 3
    บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า เกี่ยวกับร้าน
15. 15.ทุกเครื่องด่าน 3 ลองพังดู ดูว่ารูปจากมือถือหนักแค่ไหน
    หน้าเว็บนี้รวมรูปแล้วหนักกี่ MB บอกทีละไฟล์
16. 16.macOSด่าน 3 ย่อรูป มันจะใช้คำสั่ง sips ที่มีใน Mac อยู่แล้ว ถ้ามันขอลงโปรแกรมอื่น เลือก No แล้วบอกให้ใช้ sips
    ย่อรูปทุกไฟล์ในโฟลเดอร์ photos ให้ด้านกว้างไม่เกิน 1600 และเก็บต้นฉบับไว้ในโฟลเดอร์ photos-original
17. 17.ทุกเครื่องด่าน 3 ส่วนที่ 4 ต่อท้ายด้วยโค้ดแผนที่ที่ก๊อปจาก Google Maps (Share แล้ว Embed a map แล้ว Copy HTML) ไม่ต้องเข้าใจโค้ดนั้น
    ทำข้อ 4 ที่อยู่ เวลาเปิด และแผนที่ ใช้ข้อมูลจาก shop-info.txt และใส่แผนที่ด้วยโค้ดนี้ อย่างอื่นห้ามแตะ:
18. 18.ทุกเครื่องบันทึกหลังส่วนที่ 4
    บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า ที่อยู่และแผนที่
19. 19.ทุกเครื่องด่าน 3 ส่วนที่ 5 ติดต่อ
    ทำข้อ 5 ส่วนติดต่อ ปุ่มโทร กดแล้วโทรออกได้ และปุ่ม LINE กดแล้วเปิดแชทได้ ใช้เบอร์กับไอดีจาก shop-info.txt อย่างอื่นห้ามแตะ
20. 20.ทุกเครื่องบันทึกหลังส่วนที่ 5
    บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า ติดต่อ
21. 21.ทุกเครื่องด่าน 4 ใช้เฉพาะถ้าดูในโหมดมือถือแล้วพัง
    ทำให้หน้าเว็บดูดีบนจอมือถือ ตัวหนังสือไม่เล็กเกิน รูปไม่ล้นจอ ปุ่มโทรกับ LINE กดง่าย เนื้อหาห้ามเปลี่ยน
22. 22.ทุกเครื่องด่าน 4 ให้มันเช็คเองก่อนขึ้นเน็ต (กติกาจากตอนที่ 6)
    เช็คว่ารูปทุกรูปโหลดได้ ลิงก์ทุกอันเปิดได้ และไม่มีข้อความตัวอย่างค้างอยู่ ถ้ามีปัญหาให้แก้แล้วรายงาน
23. 23.ทุกเครื่องบันทึกก่อนขึ้นเน็ต
    บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า พร้อมขึ้นเน็ต
24. 24.ทุกเครื่องด่าน 5 พิมพ์ในเบราว์เซอร์ สมัครฟรีด้วยอีเมล สมัครก่อนลาก จะได้ URL สาธารณะทันที
    https://app.netlify.com/signup
25. 25.ทุกเครื่องด่าน 5 พิมพ์ในเบราว์เซอร์ แล้วลากโฟลเดอร์จาก Finder มาวาง
    https://app.netlify.com/drop
26. 26.ทุกเครื่องด่าน 5 ลองพังดู แยกของที่ให้คนทั้งโลกเห็นออกจากกติกาและบันทึกร้าน
    สร้างโฟลเดอร์ site แล้วย้ายเฉพาะไฟล์ที่ต้องขึ้นเว็บไปไว้ในนั้น คือ index.html กับโฟลเดอร์ photos แก้ที่อยู่รูปใน index.html ให้ยังเปิดได้ แล้วเพิ่มกติกาใน CLAUDE.md ว่าไฟล์ที่ขึ้นเว็บอยู่ในโฟลเดอร์ site เท่านั้น
27. 27.macOSเปิดหน้าเว็บจากโฟลเดอร์ site
    ! open site/index.html
28. 28.ทุกเครื่องบันทึกหลังแยกโฟลเดอร์
    บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า แยกโฟลเดอร์ site
29. 29.ทุกเครื่องด่าน 6 ลองพังดู แก้ในเครื่องแล้วเว็บจริงยังไม่เปลี่ยน
    เวลาเปิดร้านเปลี่ยนแล้วตาม shop-info.txt แก้ใน site/index.html ให้ตรง อย่างอื่นห้ามแตะ
30. 30.ทุกเครื่องบันทึกจุดสุดท้ายของตอน
    บันทึกจุดย้อนกลับใหม่ด้วย git ตั้งชื่อว่า ขึ้นเน็ตแล้ว
31. 31.ทุกเครื่องด่าน 6 จดวิธีอัปเดตไว้ให้ตัวเองในอนาคต (ตอนที่ 4)
    เขียน handoff.md ว่าเว็บอยู่ที่ URL ไหน อัปเดตยังไง คือลากโฟลเดอร์ site ไปวางที่ Netlify และงานที่ยังอยากทำต่อ
32. 32.ทุกเครื่องผูก handoff เข้ากับกติกา (ตอนที่ 5)
    เพิ่มบรรทัด @handoff.md ไว้ท้ายไฟล์ CLAUDE.md
33. 33.ทุกเครื่องออกจาก Claude Code กลับมาที่ terminal
    /exit