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

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

Source: https://ailoot.ai/blog/th/astro-site-with-claude-code/
Canonical: https://ailoot.ai/blog/th/astro-site-with-claude-code/
Language: th
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-149
Revision: sha256-9806254f4eff0f4dab3e80bb67e39632d9ee1efce88e265d1653f0bef010cc1c


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

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

เกี่ยวกับการใช้งานบริการ — ดูได้ใน[เอกสารของ Ailoot](https://ailoot.ai/docs/)



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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญ">

ประเด็นสำคัญ

มีสามอย่างในคอมพิวเตอร์ของคุณ: Node.js เวอร์ชันใหม่ โปรแกรมแก้ไขโค้ด และเทอร์มินัล Node.js คือสภาพแวดล้อมที่เครื่องมือเหล่านี้ทำงานอยู่ ตามเอกสาร Astro ณ วันที่เขียนบทความ กำหนดให้ใช้เวอร์ชัน 22.12.0 ขึ้นไป และเตือนว่าไม่รองรับเวอร์ชันเลขคี่อย่าง 23 โดยทั่วไปโปรแกรมแก้ไขคือ VS Code ซึ่งมี Claude Code อยู่ด้วย ส่วนเทอร์มินัลคือหน้าต่างสีดำสำหรับป้อนคำสั่ง ซึ่งมีอยู่ใน VS Code แล้ว ไม่ต้องติดตั้งทุกอย่างแยกต่างหากเพื่อใช้ Astro: หากคุณเคยสร้างอะไรด้วย Claude Code มาแล้ว แสดงว่าสภาพแวดล้อมของคุณพร้อมแล้ว

</div>

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

<figure>
<blockquote>
<p>Node.js — เวอร์ชัน v22.12.0 ขึ้นไป ไม่รองรับเวอร์ชันเลขคี่อย่าง v23 โปรแกรมแก้ไขข้อความ — เราแนะนำ VS Code พร้อมส่วนขยาย Astro อย่างเป็นทางการของเรา เทอร์มินัล — จัดการ Astro ผ่านบรรทัดคำสั่ง</p>
</blockquote>
<figcaption>— เอกสาร Astro ส่วนการติดตั้ง https://docs.astro.build/en/install-and-setup/</figcaption>
</figure>

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

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](https://ailoot.ai/blog/th/install-claude-code/)

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญ">

ประเด็นสำคัญ

สร้างโปรเจกต์ใหม่ด้วยคำสั่ง `npm create astro@latest` ในเทอร์มินัล จากนั้นวิซาร์ดจะเริ่มทำงานและถามคำถามสองสามข้อ (จะติดตั้งไว้ที่ไหน ใช้เทมเพลตใด และจะติดตั้ง dependencies หรือไม่) แล้วสร้างโครงโปรเจกต์ให้คุณ หากโฟลเดอร์โปรเจกต์ยังไม่มี วิซาร์ดจะสร้างให้ หลังจากนั้นใช้คำสั่ง `cd` เข้าไปในโฟลเดอร์โปรเจกต์ แล้วเริ่มทำงานได้เลย ไม่ต้องสร้างโฟลเดอร์เปล่าไว้ล่วงหน้า

</div>

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

```bash
npm create astro@latest
```

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

<figure>
<blockquote>
<p>คุณสามารถเรียกใช้คำสั่ง create astro ได้จากทุกที่ในคอมพิวเตอร์ จึงไม่จำเป็นต้องสร้างโฟลเดอร์โปรเจกต์เปล่าไว้ล่วงหน้า หากยังไม่มีโฟลเดอร์นั้น วิซาร์ดจะช่วยสร้างให้อัตโนมัติ</p>
</blockquote>
<figcaption>— เอกสาร Astro ส่วนการติดตั้ง https://docs.astro.build/en/install-and-setup/</figcaption>
</figure>

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

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

```bash
cd your-project-name
```

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

<figure>
<blockquote>
<p>src/pages — โฟลเดอร์ย่อยที่จำเป็นของโปรเจกต์ หากไม่มี โครงการก็จะไม่มีหน้าเว็บหรือเส้นทาง</p>
</blockquote>
<figcaption>— เอกสาร Astro ส่วนโครงสร้างโปรเจกต์ https://docs.astro.build/en/basics/project-structure/</figcaption>
</figure>

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญ">

ประเด็นสำคัญ

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

</div>

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

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

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

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

Astro จัดโครงสร้างที่สะดวกสำหรับ AI: แยกเนื้อหาของหน้าออกจากการจัดรูปแบบ และสร้างหน้าต่าง ๆ ตามกฎร่วมกัน โครงสร้างนี้ช่วยลดโอกาสที่ Claude จะสับสน และลดโอกาสที่จะแก้ส่วนใกล้เคียงจนเสียหายเมื่อแก้ไขจุดหนึ่ง หาก Claude มองไม่เห็นไฟล์ของคุณหรือเริ่มตอบไม่ตรงเรื่องกะทันหัน อ่านคู่มือเรื่อง[สาเหตุที่ Claude Code มองไม่เห็นไฟล์โปรเจกต์](https://ailoot.ai/blog/th/claude-code-cant-see-project-files/)





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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญ">

ประเด็นสำคัญ

หากต้องการดูเว็บไซต์ก่อนเผยแพร่ Astro มีเซิร์ฟเวอร์สำหรับพัฒนา ป้อนคำสั่ง `npm run dev` ในเทอร์มินัลภายในโฟลเดอร์โปรเจกต์ แล้ว Astro จะเริ่มแสดงตัวอย่างในเครื่อง — โดยปกติที่ localhost พอร์ต 4321 เปิดที่อยู่นี้ในเบราว์เซอร์แล้วดูเว็บไซต์แบบสด การเปลี่ยนแปลงไฟล์ที่ Claude ทำจะปรากฏตามไปด้วย: เปลี่ยนข้อความ แล้วหน้าเว็บจะอัปเดตเอง เซิร์ฟเวอร์นี้มองเห็นได้เฉพาะคุณบนคอมพิวเตอร์ของคุณ และไม่ได้เผยแพร่เว็บไซต์สู่อินเทอร์เน็ต

</div>

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

```bash
npm run dev
```

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญ">

ประเด็นสำคัญ

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

</div>

คุณต้องนำเว็บไซต์ที่เสร็จแล้วไปไว้ในที่ที่คนอื่นเปิดผ่านลิงก์ได้ วิธีฟรีที่ง่ายที่สุดคือผ่าน 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 กับบริการโฮสติ้งมีดังนี้:

<figure>
<blockquote>
<p>บริการโฮสติ้งยอดนิยมหลายแห่งจะตรวจพบว่าโปรเจกต์ของคุณเป็นเว็บไซต์ Astro และเลือกการตั้งค่า build และ deployment ที่เหมาะสมให้อัตโนมัติ บริการโฮสติ้งจะติดตาม branch หลักของ repository สร้างเว็บไซต์ใหม่ และปรับใช้อีกครั้งทุกครั้งที่มีการเปลี่ยนแปลงใหม่</p>
</blockquote>
<figcaption>— เอกสาร Astro ส่วนการปรับใช้ https://docs.astro.build/en/guides/deploy/</figcaption>
</figure>

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

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

<figure>
<blockquote>
<p>Astro รองรับ GitHub Action อย่างเป็นทางการสำหรับปรับใช้โปรเจกต์ไปยัง GitHub Pages โดยแทบไม่ต้องกำหนดค่า และนี่เป็นวิธีที่แนะนำสำหรับการปรับใช้บน GitHub Pages</p>
</blockquote>
<figcaption>— เอกสาร Astro ส่วนการปรับใช้บน GitHub Pages https://docs.astro.build/en/guides/deploy/github/</figcaption>
</figure>

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญ">

ประเด็นสำคัญ

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

</div>

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญ">

ประเด็นสำคัญ

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

</div>

<div class="section">

### คำถามที่พบบ่อย

ต้องรู้วิธีเขียนโปรแกรมไหมจึงจะสร้างเว็บไซต์ด้วย Astro ผ่าน Claude Code ได้?

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

ต้องสร้างโฟลเดอร์โปรเจกต์ไว้ล่วงหน้าหรือไม่?

ไม่ต้อง คำสั่ง `npm create astro@latest` จะเริ่มวิซาร์ดที่สร้างโฟลเดอร์ให้เองหากยังไม่มี คุณเรียกใช้คำสั่งได้จากทุกที่ในคอมพิวเตอร์ หลังสร้างเสร็จแล้ว ใช้คำสั่ง `cd` เข้าไปในโฟลเดอร์โปรเจกต์และทำงานภายในนั้น

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

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

เผยแพร่เว็บไซต์ Astro ฟรีได้ไหม?

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

Astro เหมาะกับเว็บไซต์ทุกประเภทหรือไม่?

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

Astro ดีกว่าเครื่องมือสร้างเว็บไซต์อย่าง Tilda สำหรับ vibe-coding อย่างไร?

ความแตกต่างอยู่ที่สิ่งที่คุณยังมีอยู่ เว็บไซต์ Astro ประกอบด้วยไฟล์ของคุณ ซึ่งจัดเก็บอยู่กับคุณและเผยแพร่ได้บนบริการโฮสติ้งใดก็ได้ ไม่มีบริการของบุคคลที่สามเก็บไฟล์เหล่านั้นไว้ หากอยากย้ายหรือแก้ไขในอีกหกเดือน คุณก็เปิดทุกอย่างด้วยเครื่องมือใดก็ได้ การเลือกระหว่าง Astro กับเครื่องมืออื่นขึ้นอยู่กับแนวทางทั่วไปของ vibe-coding: เลือกเครื่องมือให้เหมาะกับงาน ดูแผนผังเครื่องมือได้ในคู่มือทางเลือกแทน Claude Code

</div>

<div class="section" role="doc-bibliography" aria-label="แหล่งที่มา">

### แหล่งที่มา

- [เอกสาร Astro การติดตั้งและข้อกำหนด](https://docs.astro.build/en/install-and-setup/)
- [เอกสาร Astro อินเทอร์เฟซบรรทัดคำสั่ง](https://docs.astro.build/en/reference/cli-reference/)
- [เอกสาร Astro โครงสร้างโปรเจกต์](https://docs.astro.build/en/basics/project-structure/)
- [เอกสาร Astro การปรับใช้เว็บไซต์](https://docs.astro.build/en/guides/deploy/)
- [เอกสาร Astro การปรับใช้บน GitHub Pages](https://docs.astro.build/en/guides/deploy/github/)
- [เอกสาร Astro “Why Astro?”](https://docs.astro.build/en/concepts/why-astro/)

</div>







ทำความรู้จักกับ [Ailoot](https://ailoot.ai/)

## คำถามที่พบบ่อย

### preview Astro ในเครื่องเผยแพร่เว็บไซต์ออนไลน์แล้วหรือไม่?

ยังไม่ใช่ npm run dev เปิดตัวอย่างสำหรับพัฒนาในเครื่องและแสดงที่อยู่ ซึ่งมักเป็น localhost:4321 การเผยแพร่ต้องทำแยกผ่านโฮสต์หรือเวิร์กโฟลว์ GitHub Pages

### ควรตรวจค่าบิลด์ใดกับโฮสต์ Astro?

เส้นทางเว็บสแตติกในบทความต้องใช้ astro build หรือ npm run build และเผยแพร่โฟลเดอร์ dist หลัง deploy ให้เปิด URL สาธารณะของโฮสต์แล้วตรวจหน้าจริง preview ในเครื่องไม่ยืนยันการเผยแพร่


## Ailoot · บริษัทและพอร์ตโฟลิโอโครงการของบริษัท

Ailoot อาศัยประสบการณ์การดำเนินงานที่สั่งสม ฐานลูกค้าขนาดใหญ่ บริการที่เสถียร และการติดตาม KPI อย่างต่อเนื่อง

บริษัทและพอร์ตโฟลิโอโครงการของบริษัท: ลูกค้าหลายล้านราย; ยอดขายระดับหลายพันล้านต่อเดือน.

Ailoot นำประสบการณ์การดำเนินงานนี้มาใช้เพื่อให้เข้าถึงฟังก์ชัน AI ผ่าน API ในผลิตภัณฑ์ของลูกค้า เอเจนต์ แอปพลิเคชัน และระบบอัตโนมัติ