เว็บไซต์ Astro ผ่าน Claude Code: จากโฟลเดอร์สู่การเผยแพร่

แม้แต่คนที่ไม่เคยเขียนโค้ดสักบรรทัดก็สร้างเว็บไซต์ด้วย Astro ผ่าน Claude Code ได้ ฉันเลิกเขียนโค้ดด้วยมือตั้งนานแล้ว ทุกอย่างทำผ่าน AI ด้วยคำพูด และการสร้างเว็บไซต์ด้วย Astro ก็ทำงานแบบเดียวกันเป๊ะ: คุณอธิบายว่าต้องการอะไร แล้ว Claude ก็เขียนโค้ดให้

โดยทั่วไป ปัญหาไม่ได้อยู่ที่การสร้างเว็บไซต์ แต่อยู่ที่ขั้นตอนต่าง ๆ ถูกแยกเป็นส่วน ๆ บทความหนึ่งอธิบายการติดตั้ง อีกบทความพูดถึงคำสั่ง ส่วนบทความที่สามพูดถึงการเผยแพร่ ทำให้ภาพรวมทั้งหมดไม่เคยต่อกันในหัวของคุณ ที่นี่ฉันจะพาคุณจากโฟลเดอร์ว่างเปล่าไปสู่เว็บไซต์ที่เปิดได้บนอินเทอร์เน็ตผ่านลิงก์: ต้องติดตั้งอะไร ใช้คำสั่งใดเพื่อเริ่มโปรเจกต์ สร้างหน้าเว็บผ่าน Claude Code อย่างไร และเผยแพร่ผลลัพธ์ฟรีได้อย่างไร ฉันอ้างอิงจากเอกสารทางการของ Astro

เกี่ยวกับการใช้งานบริการ — ดูได้ในเอกสารของ Ailoot

ต้องเตรียมอะไรก่อนเริ่มต้น?#

Astro ไม่ได้ขอให้คุณดาวน์โหลดอะไรไว้ล่วงหน้า — คำสั่งในขั้นตอนถัดไปจะดาวน์โหลดให้ แต่คุณต้องมีสภาพแวดล้อมที่ใช้รันทุกอย่าง Astro อธิบายการเริ่มต้นไว้ดังนี้ — คุณต้องมีสามอย่าง:

มาดูกันว่าแต่ละอย่างหมายถึงอะไรในการใช้งานจริง:

1. Node.js — โปรแกรมที่หากไม่มีแล้ว ทั้ง Astro และเครื่องมือ vibe-coding ส่วนใหญ่จะทำงานไม่ได้ ดาวน์โหลดจาก nodejs.org แล้วติดตั้งเหมือนแอปทั่วไป หมายเลขเวอร์ชันในเอกสารจะเพิ่มขึ้นเรื่อย ๆ ดังนั้นก่อนเริ่ม ให้ไปที่หน้าการติดตั้ง Astro แล้วตรวจสอบข้อกำหนด เวอร์ชันเลขคู่ (22, 24) คือเวอร์ชันที่ต้องใช้ ควรหลีกเลี่ยงเวอร์ชันเลขคี่ (23, 25)
2. VS Code — โปรแกรมแก้ไขฟรีจาก Microsoft คุณเปิดโฟลเดอร์โปรเจกต์ในโปรแกรมนี้ และ Claude Code ก็ทำงานที่นี่ด้วย โดยจะเขียนโค้ดให้
3. เทอร์มินัล — หน้าต่างสำหรับป้อนคำสั่ง ไม่ต้องติดตั้งแยกต่างหาก เพราะเปิดได้จากเมนูใน VS Code และป้อนคำสั่งทั้งหมดด้านล่างได้ที่นั่น

ถ้าคุณติดตั้ง Claude Code และสร้างอะไรสักอย่างมาแล้ว คุณก็มีทุกอย่างที่กล่าวมาครบแล้ว และข้ามขั้นตอนนี้ได้ หากยังไม่มี ฉันมีคู่มือแยกเกี่ยวกับวิธีติดตั้ง Claude Code

สร้างโปรเจกต์ Astro ด้วยคำสั่งเดียวได้อย่างไร?#

จุดนี้คือจุดเริ่มต้นของโปรเจกต์ และใช้เพียงคำสั่งเดียว เปิดเทอร์มินัลแล้วป้อน:

npm create astro@latest

วิซาร์ดการติดตั้งจะเริ่มทำงาน เอกสารอธิบายไว้ดังนี้:

วิซาร์ดจะแนะนำคุณไปตามขั้นตอนและถามคำถามสองสามข้อ: จะตั้งชื่อโฟลเดอร์โปรเจกต์ว่าอะไร จะเริ่มด้วยเทมเพลตใด และจะติดตั้ง dependencies ทันทีหรือไม่ คุณเลือกค่าเริ่มต้นสำหรับทุกคำถามได้ — เทมเพลตเปล่าหรือแบบเรียบง่ายก็ใช้ได้สำหรับเว็บไซต์แรกของคุณ หากตอบ “no” เมื่อถูกถามว่าจะติดตั้ง dependencies หรือไม่ ให้ติดตั้งเองภายหลังโดยเรียกใช้คำสั่ง npm install ภายในโฟลเดอร์โปรเจกต์

เมื่อวิซาร์ดทำงานเสร็จ จะแสดงว่าโปรเจกต์ถูกสร้างแล้ว และแนะนำขั้นตอนถัดไป — เข้าไปในโฟลเดอร์โปรเจกต์:

cd your-project-name

เพียงเท่านี้ก็สร้างโปรเจกต์เสร็จแล้ว ภายในมีโครงเว็บไซต์ที่ใช้งานได้อยู่แล้ว: ไฟล์และโฟลเดอร์หลายรายการที่ใช้สร้างหน้าเว็บ คุณไม่จำเป็นต้องแก้ไขด้วยมือ แต่การรู้ว่าอะไรอยู่ตรงไหนก็มีประโยชน์ Astro ระบุว่ามีเพียงโฟลเดอร์เดียวที่จำเป็น:

กล่าวอีกอย่างคือ src/pages เป็นโฟลเดอร์ที่เก็บหน้าเว็บของเว็บไซต์ เช่น หน้าแรก หน้า “เกี่ยวกับเรา” และหน้าติดต่อ โดยทั่วไปจะมี src/components (ชิ้นส่วนที่นำกลับมาใช้ซ้ำได้ เช่น ส่วนหัวและปุ่ม), src/layouts (โครงหน้าร่วมกัน) และโฟลเดอร์ public สำหรับรูปภาพกับไฟล์อยู่ใกล้ ๆ คุณไม่จำเป็นต้องท่องจำโครงสร้าง แค่จำไว้ว่าหน้าเว็บอยู่ใน src/pages แล้วอ้างถึงโฟลเดอร์นี้เมื่อต้องการขอ Claude ว่า “เพิ่มหน้าติดต่อ”

สร้างเว็บไซต์ด้วย Claude Code ได้อย่างไร?#

โครงเว็บไซต์พร้อมแล้ว ตอนนี้ก็สร้างเว็บไซต์จากโครงนี้ โดยให้ Claude Code ทำงาน เปิดโฟลเดอร์โปรเจกต์ใน VS Code เปิดใช้ Claude Code แล้วบรรยายเป็นคำพูดว่าต้องการอะไร จากนั้นมันจะแก้ไขไฟล์ใน src/pages และโฟลเดอร์ใกล้เคียงให้เอง — คุณแค่สั่งงานและดูผลลัพธ์

จากประสบการณ์ของฉัน การทำงานทีละขั้นเล็ก ๆ ได้ผลดีที่สุด คำขอใหญ่คำขอเดียวอย่าง “ทำเว็บไซต์บริษัทให้ฉัน” มักจบลงด้วยสิ่งที่ปะปนกันจนแก้ยาก ดังนั้นแบ่งเป็นงานสั้น ๆ ชัดเจน แล้วส่งทีละงาน:

1. “สร้างหน้าแรก: หัวเรื่องขนาดใหญ่ สองสามประโยคเกี่ยวกับสิ่งที่ฉันทำ และปุ่มที่ลิงก์ไปยังหน้าติดต่อ”
2. “เพิ่มหน้าบริการที่มีรายการสามส่วน”
3. “เพิ่มหน้าติดต่อที่มีหมายเลขโทรศัพท์และลิงก์ไปยัง Telegram”
4. “เปลี่ยนรูปแบบการแสดงผล: พื้นหลังสีอ่อนและแบบอักษรขนาดใหญ่ที่อ่านง่าย”

ตรวจสอบแต่ละขั้นก่อนดำเนินการต่อ — วิธีนี้ช่วยให้จับข้อผิดพลาดและย้อนกลับได้ง่ายขึ้น เหตุผลที่งานเล็ก ๆ เชื่อถือได้มากกว่าและวิธีช่วยให้ AI ทำงานตามเป้าหมายเป็นส่วนหนึ่งของ context engineering: ยิ่งงานและโครงสร้างโปรเจกต์ชัดเจน ผลลัพธ์ก็ยิ่งคาดเดาได้

Astro จัดโครงสร้างที่สะดวกสำหรับ AI: แยกเนื้อหาของหน้าออกจากการจัดรูปแบบ และสร้างหน้าต่าง ๆ ตามกฎร่วมกัน โครงสร้างนี้ช่วยลดโอกาสที่ Claude จะสับสน และลดโอกาสที่จะแก้ส่วนใกล้เคียงจนเสียหายเมื่อแก้ไขจุดหนึ่ง หาก Claude มองไม่เห็นไฟล์ของคุณหรือเริ่มตอบไม่ตรงเรื่องกะทันหัน อ่านคู่มือเรื่องสาเหตุที่ Claude Code มองไม่เห็นไฟล์โปรเจกต์

ดูตัวอย่างเว็บไซต์ก่อนเผยแพร่ได้อย่างไร?#

ก่อนแสดงเว็บไซต์ให้คนอื่นเห็น ให้ดูตัวอย่างบนคอมพิวเตอร์ของคุณก่อน Astro มีเซิร์ฟเวอร์พัฒนาสำหรับเรื่องนี้ ซึ่งแสดงเว็บไซต์แบบสดบนคอมพิวเตอร์ของคุณ เริ่มเซิร์ฟเวอร์ด้วยคำสั่งในเทอร์มินัลภายในโฟลเดอร์โปรเจกต์:

npm run dev

Astro จะเริ่มแสดงตัวอย่างในเครื่องและพิมพ์ที่อยู่ลงในเทอร์มินัล โดยค่าเริ่มต้นคือ localhost:4321 คัดลอกที่อยู่ เปิดในเบราว์เซอร์ แล้วคุณจะเห็นเว็บไซต์ของคุณ ตอนนี้มีเพียงคุณที่เปิดที่อยู่นี้ได้ — คนภายนอกเข้าถึงไม่ได้ นี่คือฉบับร่างของคุณ

ข้อดีคือการแสดงตัวอย่างเป็นแบบสด: Claude แก้ไขไฟล์ แล้วหน้าในเบราว์เซอร์จะอัปเดตเอง ไม่ต้องโหลดหน้าใหม่ด้วยมือ ทำได้รวดเร็ว — สั่ง Claude ดูในเบราว์เซอร์ แก้ไข แล้วดูอีกครั้ง ช่วงนี้คือช่วงขัดเกลาเว็บไซต์ เมื่อพอใจกับผลลัพธ์แล้ว ก็นำเว็บไซต์ขึ้นออนไลน์ได้

เผยแพร่เว็บไซต์ Astro ออนไลน์ฟรีได้อย่างไร?#

คุณต้องนำเว็บไซต์ที่เสร็จแล้วไปไว้ในที่ที่คนอื่นเปิดผ่านลิงก์ได้ วิธีฟรีที่ง่ายที่สุดคือผ่าน GitHub: อัปโหลดโค้ดโปรเจกต์ไปยัง repository ก่อน แล้วจึงเชื่อมต่อบริการโฮสติ้งที่สร้างและเผยแพร่เว็บไซต์ ลำดับขั้นตอนมีดังนี้:

1. สร้าง repository บน GitHub Repository คือที่เก็บโค้ดออนไลน์ซึ่งคุณส่งไฟล์โปรเจกต์ไปไว้ Claude Code ช่วยได้ด้วยคำสั่งภาษาธรรมชาติ: ขอให้ “อัปโหลดโปรเจกต์ไปยัง repository GitHub ใหม่” แล้วมันจะแนะนำคำสั่ง หากคุณไม่เคยใช้ GitHub มาก่อน ควรเตรียมคำแนะนำเรื่องการสมัครและเข้าสู่ระบบไว้ใกล้มือ
2. เชื่อมต่อโฮสติ้ง ไปที่บริการใดบริการหนึ่ง (Netlify, Vercel) ลงชื่อเข้าใช้ผ่านบัญชี GitHub แล้วเลือก repository ของคุณ เอกสาร Astro อธิบายวิธีนี้ว่า บริการโฮสติ้งจะติดตาม repository สร้างเว็บไซต์ และเผยแพร่เว็บไซต์
3. ตรวจสอบการตั้งค่า build โดยปกติบริการโฮสติ้งจะตรวจพบ Astro และกรอกค่าที่จำเป็นให้ หากระบบขอให้ป้อนเอง คำสั่ง build ในเอกสารคือ astro build (หรือ npm run build) และเว็บไซต์ที่เสร็จแล้วจะอยู่ในโฟลเดอร์ dist
4. คลิก “Publish” บริการจะสร้างเว็บไซต์และให้ลิงก์อย่าง site-name.netlify.app ใคร ๆ ก็เปิดเว็บไซต์จากที่อยู่นั้นได้

ถ้อยคำในเอกสารเกี่ยวกับการเชื่อมต่อ repository กับบริการโฮสติ้งมีดังนี้:

หลังจากนั้น การเผยแพร่จะเป็นไปโดยอัตโนมัติ: ส่งการเปลี่ยนแปลงใหม่ไปยัง repository แล้วเว็บไซต์ก็จะถูกสร้างและอัปเดตเอง ไม่ต้องคลิกอะไรเพิ่มเติม

ยังมีอีกวิธีฟรี — GitHub Pages ซึ่งเผยแพร่เว็บไซต์โดยตรงจาก repository ด้วยเครื่องมือของ GitHub เอง Astro มี starter อย่างเป็นทางการสำหรับวิธีนี้:

ด้วยวิธีนี้ เว็บไซต์จะเปิดได้ที่ที่อยู่อย่าง your-name.github.io/repository-name และคุณสามารถเชื่อมต่อโดเมนของตัวเองภายหลังได้ ตั้งค่าผ่าน Claude Code ได้เช่นกัน: อธิบายงานด้วยคำพูด แล้วมันจะเตรียมไฟล์ที่จำเป็นให้

สร้างเว็บไซต์ Astro มีค่าใช้จ่ายเท่าไร?#

มาพูดถึงค่าใช้จ่ายกัน Astro เป็นเครื่องมือฟรีและโอเพนซอร์ส ไม่มีราคาแยกต่างหาก บริการโฮสติ้งพื้นฐานก็มีตัวเลือกฟรีเช่นกัน ได้แก่ GitHub Pages และแพ็กเกจเริ่มต้นของ Netlify กับ Vercel ซึ่งโดยทั่วไปเพียงพอสำหรับเว็บไซต์ Astro ขนาดเบา (แพ็กเกจฟรีมีขีดจำกัดด้านทราฟฟิก แต่โดยทั่วไปก็เพียงพอสำหรับเว็บไซต์นามบัตรธุรกิจขนาดเล็กหรือหน้า Landing Page)

ในทางปฏิบัติจึงมีสองอย่างที่คุณอาจต้องจ่าย และบางครั้งก็ไม่ต้องจ่ายด้วยซ้ำ อย่างแรกคือเครื่องมือ AI ที่ใช้สร้างเว็บไซต์ อย่างที่สองคือโดเมนของตัวเองแทนที่อยู่อย่าง name.netlify.app ซึ่งเป็นทางเลือกและมีค่าใช้จ่ายรายปีไม่มาก คุณสามารถทำตามขั้นตอน “สร้างเว็บไซต์และเผยแพร่ออนไลน์” โดยจ่ายแค่ค่า Claude

ผู้คนถามอะไรอีกเกี่ยวกับเว็บไซต์ Astro และ Claude Code?#

ทำความรู้จักกับ Ailoot