วิธีสร้างเว็บ GPT Image Prompt Gallery 200 รายการบน Hostinger ด้วย Claude Code

สร้างเว็บ AI Prompt Gallery ที่รวม Prompt สำหรับ GPT‑Image‑2 และเครื่องสร้างรูป AI อื่น ๆ มากกว่า 200 รายการ ไม่ใช่เรื่องยาก ถ้าคุณมี GitHub, Claude Code และ Hostinger Node.js Hosting สิ่งที่ต้องทำคือโคลนเทมเพลต, ปรับดีไซน์ให้เป็น Masonry Grid แบบ Pinterest, แล้ว Deploy ไปยังเซิร์ฟเวอร์ของ Hostinger เพียงไม่กี่คลิก

ผมเริ่มต้นคลิปด้วยการแนะนำ ai‑gallery‑starter template ที่เผยบน GitHub ซึ่งเป็นโครงสร้างพื้นฐานสำหรับหน้าเว็บที่แสดง Prompt ในรูปแบบการ์ดหลายคอลัมน์ ผมอธิบายว่าเทมเพลตนี้มีไฟล์ index.html, styles.css และ data.json ซึ่งเก็บ Prompt ไว้เป็น JSON array ทุกไฟล์ถูกจัดโครงสร้างให้พร้อมสำหรับการทำงานบน Node.js

ต่อจากนั้นผมแนะนำ Hostinger Node.js Hosting พร้อมคูปองส่วนลด 10% (Coupon: AICEO) เพื่อให้ผู้ชมสามารถตั้งค่าเซิร์ฟเวอร์ได้ทันที ผมอธิบายขั้นตอนสมัคร, เลือกแผน “Node.js” และใส่คูปองเพื่อรับส่วนลด จากนั้นผมสรุปว่า Hostinger จะให้คุณสร้าง “Deploy” ที่เชื่อมกับ GitHub repository ของคุณโดยอัตโนมัติ

สรุปสั้น ๆ

• โคลน ai-gallery-starter จาก GitHub
• สร้างบัญชี Hostinger Node.js พร้อมคูปอง AICEO
• เชื่อม Repository กับ Hostinger Deploy
• ใช้ Claude Code + getdesign.md ปรับ Masonry Grid
• เชื่อม custom domain และเปิดเว็บออนไลน์

โคลนและทำความเข้าใจเทมเพลตบน GitHub

การเริ่มต้นทำเว็บ AI Prompt Gallery ต้องอาศัยการโคลน repository ที่ผมเตรียมไว้บน GitHub ก่อน ขั้นแรกคือกด “Fork” เพื่อสร้างสำเนาในบัญชีของคุณเอง การ Fork ทำให้คุณมีสิทธิ์แก้ไขโค้ดโดยไม่กระทบต้นฉบับ หลังจาก Fork เสร็จแล้วคุณจะเห็นโครงสร้างไฟล์หลัก 3 ไฟล์ที่สำคัญ: index.html สำหรับโครงสร้างหน้า, styles.css สำหรับสไตล์ Masonry Grid, และ data.json ที่บรรจุ Prompt ทั้ง 200 รายการ

ผมสังเกตว่าผู้ชมหลายคนมักสงสัยว่าข้อมูล Prompt อยู่ในรูปแบบใด ในไฟล์ data.json แต่ละอ็อบเจกต์มี prompt, description และ image_url ซึ่งทำให้การดึงข้อมูลไปแสดงบนหน้าเว็บเป็นเรื่องง่าย การเข้าใจโครงสร้างนี้จะช่วยให้คุณปรับเพิ่ม Prompt หรือแก้ไขข้อมูลเดิมได้โดยไม่ต้องแก้โค้ด JavaScript ใด ๆ

"การเข้าใจโครงสร้าง Repository เป็นพื้นฐานที่ทำให้ขั้นตอนต่อไปเป็นไปอย่างราบรื่น"

ตั้งค่า Hostinger Node.js Hosting และเชื่อม Deploy

เมื่อคุณมี Repository แล้วขั้นต่อไปคือสร้างโฮสต์บน Hostinger ผมแนะนำให้เลือกแผน “Node.js Hosting” ซึ่งรองรับการรัน npm install และ npm start อัตโนมัติ หลังจากสมัครและใส่คูปอง AICEO ระบบจะให้คุณใส่ URL ของ GitHub Repository ที่ Fork ไว้ Hostinger จะทำการดึงโค้ด, ติดตั้ง dependencies, แล้วสร้าง URL สำหรับการทดสอบบนสภาพแวดล้อม staging

ขั้นตอนเชื่อม Deploy ใช้เวลาไม่ถึง 5 นาที เพียงแค่คลิก “Connect GitHub”, เลือก repository ที่ Fork ไว้, ยืนยันสาขา main แล้วกด “Deploy” ระบบจะเริ่มกระบวนการ build และแสดง log การติดตั้ง หากไม่มี error เว็บของคุณจะพร้อมให้เข้าถึงผ่าน URL ที่ Hostinger จัดให้

วิเคราะห์ Design System ด้วย getdesign.md

เพื่อให้เว็บ Prompt Gallery มีลักษณะ Masonry Grid ที่ดูสวยและใช้งานง่าย ผมใช้ไฟล์ getdesign.md ซึ่งเป็นฟอร์แมตที่ Claude Code รองรับ ในไฟล์นี้ผมระบุรายละเอียดของ Grid เช่น จำนวนคอลัมน์, ระยะห่างระหว่างการ์ด, การจัดตำแหน่งภาพและข้อความ ตัวอย่างเช่น:

# Design System
- layout: masonry
- columns: 3
- gap: 16px
- card:
  - border-radius: 8px
  - shadow: true

Claude Code จะอ่าน getdesign.md แล้วสร้าง CSS ที่สอดคล้องกับคำสั่งเหล่านั้น การทำเช่นนี้ช่วยลดเวลาแก้ไขสไตล์ด้วยมือและทำให้ผลลัพธ์สอดคล้องกับแนวคิดการออกแบบที่เราต้องการ

ใช้ Claude Code ปรับโค้ดตาม Design.md

ขั้นตอนต่อไปคือให้ Claude Code ทำการปรับ styles.css และบางส่วนของ index.html ตามที่ระบุใน getdesign.md ผมเปิด Claude Code ผ่าน UI ของ Anthropic แล้วอัปโหลดไฟล์ getdesign.md พร้อมกับโค้ดต้นฉบับ Claude ทำการสร้าง Pull Request ที่มีการแก้ไข CSS เช่น การตั้งค่า grid-template-columns: repeat(3, 1fr); และเพิ่ม gap: 16px; รวมถึงการเพิ่ม class card ที่มี border-radius และ box-shadow ตามที่กำหนด

หลังจากรับ Pull Request แล้วผมทำการ merge เข้า main branch จากนั้น Hostinger Deploy จะทำการอัปเดตอัตโนมัติและคุณจะเห็นการเปลี่ยนแปลงบนเว็บทันที การใช้ Claude Code ทำให้ขั้นตอนปรับ UI เสร็จในไม่กี่นาที แทนการเขียน CSS ด้วยตนเองหลายชั่วโมง

ทดสอบบน localhost และเชื่อม Domain

ก่อนเปิดให้สาธารณะ ผมแนะนำให้รันเว็บบนเครื่องของคุณเพื่อทดสอบว่า Prompt ทั้ง 200 รายการแสดงผลถูกต้องหรือไม่ ด้วยคำสั่ง npm install แล้ว npm run dev คุณจะได้เซิร์ฟเวอร์พัฒนา (localhost) ที่แสดง Masonry Grid พร้อม Prompt หากพบข้อผิดพลาด เช่น การโหลดรูปภาพล้มเหลวหรือข้อมูล JSON ไม่ตรงรูปแบบ ให้แก้ไข data.json แล้วรีสตาร์ทเซิร์ฟเวอร์

เมื่อทดสอบผ่านแล้วขั้นตอนต่อไปคือเชื่อม custom domain ที่คุณมีกับ Hostinger ในแผงควบคุมของ Hostinger ให้เลือก “Domains”, ใส่ชื่อโดเมนของคุณ แล้วตั้งค่า DNS ให้ชี้ไปที่ Nameserver ของ Hostinger หลังจาก DNS แพร่กระจาย (ประมาณ 30‑60 นาที) คุณสามารถเข้าถึงเว็บ Prompt Gallery ผ่าน URL ของคุณเอง การเชื่อมโดเมนทำให้เว็บดูเป็นมืออาชีพและช่วย SEO ได้ดี

สรุป

การสร้างเว็บ AI Prompt Gallery ไม่จำเป็นต้องเป็นโปรเจกต์ที่ซับซ้อน ด้วยเทมเพลต ai‑gallery‑starter, Claude Code เพื่อปรับดีไซน์, และ Hostinger Node.js Hosting คุณสามารถทำให้เว็บไซต์พร้อมใช้งานได้ภายในคลิปเดียว ขั้นตอนสำคัญคือการ Fork repository, เชื่อม Deploy กับ Hostinger, ใช้ getdesign.md เพื่อกำหนด Masonry Grid, ให้ Claude Code สร้างสไตล์อัตโนมัติ, ทดสอบบน localhost, แล้วเชื่อมโดเมนเพื่อเปิดให้สาธารณะ

ขั้นตอนต่อไป

• Fork ai-gallery-starter จาก GitHub
• สมัคร Hostinger Node.js Hosting และใช้คูปอง AICEO
• เชื่อม Repository กับ Hostinger Deploy
• สร้าง getdesign.md ระบุ Layout Masonry Grid
• ให้ Claude Code ปรับ CSS ตาม Design.md
• ทดสอบบน localhost, แก้ไข Prompt หากจำเป็น
• เชื่อม custom domain แล้วเปิดเว็บให้ใช้งาน