กลับไปดูแล้วทำตาม
![[มีส่งด่วน] Keychron B6 Pro Ultra slim Wireless Keyboard คีย์บอร์ดไร้สาย 100% ประกัน ศูนย์ไทย 2 ปี](https://cf.shopee.co.th/file/th-11134207-81ztp-mg8bwh64kirt6c)
ตอนที่ 7/7Claude Code จากศูนย์ ฉบับ VS Code100 นาที
ตอนพิเศษ: สร้างเว็บ 1 หน้าขึ้นเน็ตจริงตั้งแต่ศูนย์
ตอนปิดซีซั่น 2 ฉบับ VS Code ใช้ทุกอย่างที่เรียนมากับโฟลเดอร์ว่างเปล่า ทำหน้าเว็บร้านของจริง 5 ส่วน รูปจริง แผนที่จริง ปุ่มโทรและ LINE ดูดีบนมือถือ แล้วเอาขึ้นเน็ตให้คนทั้งโลกเปิดได้ด้วยการลากโฟลเดอร์วาง ทั้งตอนไม่พิมพ์คำสั่งเครื่องสักบรรทัด คลิกใน VS Code กับสั่งเป็นภาษาไทยเท่านั้น ไม่ต้องจ่ายเงิน พังให้ดู 3 จุดที่คนทำเว็บครั้งแรกเจอ
กำลังอัดตอนนี้อยู่
บทและคำสั่งพร้อมแล้วด้านล่าง อ่านทำตามไปก่อนได้เลย พออัปคลิปเสร็จจะขึ้นที่นี่
ภารกิจของตอนนี้
จบตอนนี้ คุณจะมีเว็บของร้านตัวเองอยู่บนเน็ตจริง เปิดจากมือถือได้ทุกเครื่องในโลก และรู้วิธีแก้แล้วอัปเดตเองได้ตลอดไป โดยไม่ต้องพิมพ์คำสั่งเครื่องเลย
- ด่าน 1โฟลเดอร์ กติกา และจุดย้อนกลับ
- ด่าน 2วางแผนแล้วสร้างทีละส่วน
- ด่าน 3รูปจริง ข้อมูลจริง แผนที่จริง
- ด่าน 4ดูดีบนมือถือ
- ด่าน 5ขึ้นเน็ตจริง
- ด่าน 6แก้แล้วอัปเดตได้
คำสั่งที่ใช้ในตอนนี้
หยุดคลิปแล้วก๊อปไปวางได้เลย เรียงตามลำดับที่ใช้ในคลิป
- 1.ทุกเครื่องใช้เฉพาะเมื่อหน้าต่าง Claude Code เปิดเป็นแท็บตรงกลางบังไฟล์ กด Command Shift P แล้วพิมพ์ประโยคนี้ กด Enter มันจะย้ายไปแถบขวาแล้วจำที่ให้
Claude Code: Open in Side Bar - 2.ทุกเครื่องด่าน 1 กติกา 5 บรรทัดก่อนสั่งงานแรก (ตอนที่ 5) พิมพ์ในช่องพิมพ์ด้านล่างของหน้าต่าง Claude Code
เขียน CLAUDE.md ว่า โปรเจคนี้คือหน้าเว็บ 1 หน้าของร้าน ข้อมูลร้านอยู่ใน shop-info.txt ข้อความบนเว็บเป็นภาษาไทย รูปอยู่ในโฟลเดอร์ photos ห้ามแก้ shop-info.txt และไฟล์ใน photos ก่อนบอกว่าเสร็จให้เช็คว่ารูปทุกรูปเปิดได้และไม่มีข้อความตัวอย่างค้างอยู่ - 3.ทุกเครื่องด่าน 1 ใช้เฉพาะเมื่อกด Commit ครั้งแรกแล้วขึ้นกล่องแดงเรื่อง user.name กับ user.email (แบบตอนที่ 2) มันขออนุญาตแล้วตั้งให้เอง
ตั้งชื่อกับอีเมลให้ git เป็น EASY AI easyai@example.com - 4.ทุกเครื่องด่าน 2 สั่งตอนป้ายโหมดใต้ช่องพิมพ์เป็น Plan มันจะเสนอก่อน ไม่แตะไฟล์
อ่าน shop-info.txt แล้วเสนอแผนหน้าเว็บ 1 หน้า ไฟล์เดียวชื่อ index.html มี 5 ส่วน หัวเว็บมีชื่อร้าน สโลแกน และรูป เมนูเด่น เกี่ยวกับร้าน ที่อยู่ เวลาเปิด และแผนที่ และติดต่อ ต้องดูดีบนมือถือ ยังไม่ต้องสร้าง - 5.ทุกเครื่องด่าน 2 ส่วนที่ 1 หัวเว็บ กด Accept ในหน้าต่างเทียบ
ทำข้อ 1 ส่วนหัวอย่างเดียว สร้าง index.html ใช้รูปแรกในโฟลเดอร์ photos - 6.ทุกเครื่องด่าน 2 ส่วนที่ 2 เมนูเด่น
ทำข้อ 2 ส่วนเมนูเด่น ใช้เมนู 3 อย่างจาก shop-info.txt อย่างอื่นห้ามแตะ - 7.ทุกเครื่องด่าน 2 ส่วนที่ 3 เกี่ยวกับร้าน
ทำข้อ 3 ส่วนเกี่ยวกับร้าน ใช้รูปที่สองและสามในโฟลเดอร์ photos อย่างอื่นห้ามแตะ - 8.ทุกเครื่องด่าน 3 ลองพังดู ดูว่ารูปจากมือถือหนักแค่ไหน มันจะขออนุญาตรันคำสั่งดูขนาดไฟล์ กด Yes, allow
หน้าเว็บนี้รวมรูปแล้วหนักกี่ MB บอกทีละไฟล์ - 9.ทุกเครื่องด่าน 3 ย่อรูป มันจะขออนุญาตรันคำสั่ง sips ที่มีใน Mac อยู่แล้ว กด Yes, allow ถ้ามันขอลงโปรแกรมอื่น กดปุ่มไม่ยอม แล้วพิมพ์ในช่อง Tell Claude ว่าใช้ sips ที่มีในเครื่อง (Windows ไม่มี sips มันจะเลือกวิธีอื่นเอง ปล่อยให้เลือก)
ย่อรูปทุกไฟล์ในโฟลเดอร์ photos ให้ด้านกว้างไม่เกิน 1600 และเก็บต้นฉบับไว้ในโฟลเดอร์ photos-original - 10.ทุกเครื่องด่าน 3 ส่วนที่ 4 ต่อท้ายด้วยโค้ดแผนที่ที่ก๊อปจาก Google Maps (Share แล้ว Embed a map แล้ว Copy HTML) ไม่ต้องเข้าใจโค้ดนั้น
ทำข้อ 4 ที่อยู่ เวลาเปิด และแผนที่ ใช้ข้อมูลจาก shop-info.txt และใส่แผนที่ด้วยโค้ดนี้ อย่างอื่นห้ามแตะ: - 11.ทุกเครื่องด่าน 3 ส่วนที่ 5 ติดต่อ
ทำข้อ 5 ส่วนติดต่อ ปุ่มโทร กดแล้วโทรออกได้ และปุ่ม LINE กดแล้วเปิดแชทได้ ใช้เบอร์กับไอดีจาก shop-info.txt อย่างอื่นห้ามแตะ - 12.ทุกเครื่องด่าน 4 ใช้เฉพาะถ้าดูในโหมดมือถือแล้วพัง
ทำให้หน้าเว็บดูดีบนจอมือถือ ตัวหนังสือไม่เล็กเกิน รูปไม่ล้นจอ ปุ่มโทรกับ LINE กดง่าย เนื้อหาห้ามเปลี่ยน - 13.ทุกเครื่องด่าน 4 ให้มันเช็คเองก่อนขึ้นเน็ต (กติกาจากตอนที่ 6)
เช็คว่ารูปทุกรูปโหลดได้ ลิงก์ทุกอันเปิดได้ และไม่มีข้อความตัวอย่างค้างอยู่ ถ้ามีปัญหาให้แก้แล้วรายงาน - 14.ทุกเครื่องด่าน 5 พิมพ์ในเบราว์เซอร์ สมัครฟรีด้วยอีเมล สมัครก่อนลาก จะได้ที่อยู่เว็บสาธารณะทันที
https://app.netlify.com/signup - 15.ทุกเครื่องด่าน 5 พิมพ์ในเบราว์เซอร์ แล้วลากโฟลเดอร์จาก Finder มาวาง
https://app.netlify.com/drop - 16.ทุกเครื่องด่าน 5 ลองพังดู แยกของที่ให้คนทั้งโลกเห็นออกจากกติกาและบันทึกร้าน มันจะขออนุญาตย้ายไฟล์ แล้วเสนอแก้ 2 ไฟล์เป็นหน้าต่างเทียบ
สร้างโฟลเดอร์ site แล้วย้ายเฉพาะไฟล์ที่ต้องขึ้นเว็บไปไว้ในนั้น คือ index.html กับโฟลเดอร์ photos แก้ที่อยู่รูปใน index.html ให้ยังเปิดได้ แล้วเพิ่มกติกาใน CLAUDE.md ว่าไฟล์ที่ขึ้นเว็บอยู่ในโฟลเดอร์ site เท่านั้น - 17.ทุกเครื่องด่าน 6 ลองพังดู แก้ในเครื่องแล้วเว็บจริงยังไม่เปลี่ยน
เวลาเปิดร้านเปลี่ยนแล้วตาม shop-info.txt แก้ใน site/index.html ให้ตรง อย่างอื่นห้ามแตะ - 18.ทุกเครื่องด่าน 6 จดวิธีอัปเดตไว้ให้ตัวเองในอนาคต (ตอนที่ 4)
เขียน handoff.md ว่าเว็บอยู่ที่ URL ไหน อัปเดตยังไง คือลากโฟลเดอร์ site ไปวางที่ Netlify และงานที่ยังอยากทำต่อ - 19.ทุกเครื่องด่าน 6 พิมพ์เองเป็นบรรทัดสุดท้ายของ CLAUDE.md ในพื้นที่แก้ไฟล์ตรงกลาง แล้วกด Command S (ตอนที่ 5)
@handoff.md - 20.ทุกเครื่องด่าน 6 ถ้าไม่อยากพิมพ์เอง สั่งมันแบบนี้แทนได้
เพิ่มบรรทัด @handoff.md ไว้ท้ายไฟล์ CLAUDE.md
การบ้านของตอนนี้
เอาเว็บของธุรกิจคุณจริง ๆ ขึ้นเน็ตตามขั้นตอนในตอนนี้ แล้วส่งลิงก์มาที่กล่องคำถามบนเว็บ ผมจะเปิดดูทุกอัน และเลือกมาโชว์ในซีซั่นหน้า
ตอนหน้าเปิดด้วยเฉลยข้อนี้
อ่านเจาะลึกต่อ
เรื่องพวกนี้มีเขียนไว้ละเอียดแล้วที่อื่นในเว็บ — คู่มือนี้เลยไม่เขียนซ้ำ
- ใช้ในเอดิเตอร์หรือใน terminal ดี — คำตอบคือใช้ทั้งคู่ แต่คนละงานทำไมทั้งตอนนี้ไม่ต้องพิมพ์คำสั่งสักตัว อะไรที่ terminal ทำได้ ใน VS Code ก็มีปุ่มให้คลิกหรือสั่งมันเป็นไทยได้
- ไฮไลต์โค้ดแล้วสั่งเลย — และอ่านหน้าต่างเทียบก่อนกดรับหน้าต่างเทียบก่อนกด Accept ตอนนี้เราจะกดมันเป็นสิบครั้ง อ่านให้เป็นก่อน
- เลิกอธิบายโปรเจคซ้ำทุกวัน — เขียนไว้ในไฟล์เดียวจบกติกา 5 บรรทัดที่เขียนตอนเริ่มโฟลเดอร์ใหม่ ทำไมถึงสำคัญ
- 5 เทคนิคเขียน prompt ให้ AI ทำงานแม่นขึ้น (พร้อม prompt ตัวอย่างใช้ได้จริง)คำสั่งทุกส่วนในตอนนี้เขียนตามหลักในนี้ บอกว่าทำอะไร ใช้ข้อมูลไหน ห้ามแตะอะไร
ของที่ dev แนะนำ
เป็นลิงก์ affiliate — ถ้าคุณช้อปผ่านลิงก์นี้ dev ได้ค่าคอมเล็กน้อย โดยราคาคุณเท่าเดิม 🙏
UGREEN Nexode GaN Charger 20W/30W
หัวชาร์จ GaN ตัวเดียวจบทั้งโน้ตบุ๊กและมือถือ ตัวเล็กกว่าหัวเดิมที่แถมมาเยอะ — ถ้ายังไม่มี เริ่มจากตัวนี้ก่อนได้
330 บาทดูบน Shopee
TNW K20 ไมโครโฟนคอนเดนเซอร์ ตัดเสียงรบกวน
งบยังไม่เยอะแต่ไม่อยากให้เสียงแตก — ไมค์คอนเดนเซอร์ตัวเริ่มต้นที่พอสำหรับอัดคลิปสอนหรือประชุมออนไลน์
589 บาทดูบน Shopee
[มีส่งด่วน] Keychron B6 Pro Ultra slim Wireless Keyboard คีย์บอร์ดไร้สาย 100% ประกัน ศูนย์ไทย 2 ปี
จัดโต๊ะให้ทำงานกับ AI ได้นานขึ้น ไม่ปวดคอปวดหลัง
1,909 บาทดูบน Shopee
