Installation & Setup

หลังจากที่เราได้ทำความเข้าใจภาพรวมของ Astro และเห็นพลังของสถาปัตยกรรม Astro Islands ใน EP 1 กันไปแล้ว บทเรียนนี้เราจะมาลงมือทำ (Hands-on) กันครับ

เป้าหมายของ EP นี้คือการเตรียมสภาพแวดล้อมบนเครื่องคอมพิวเตอร์ สร้างโปรเจกต์ Astro ขึ้นมาใหม่ และติดอาวุธลับอย่าง Tailwind CSS เพื่อเตรียมพร้อมสำหรับการเนรมิตหน้าเว็บที่ทั้งสวยและทำงานได้รวดเร็ว

สิ่งที่ต้องเตรียมก่อนเริ่มต้น (Prerequisites)

ก่อนที่เราจะไปพิมพ์คำสั่งแรก รบกวนตรวจสอบให้แน่ใจก่อนครับว่าคอมพิวเตอร์ของเพื่อน ๆ มีเครื่องมือพื้นฐานเหล่านี้พร้อมแล้ว

1. Node.js: แนะนำให้ใช้เวอร์ชัน 18.14.1 หรือใหม่กว่า (เช็กเวอร์ชันง่าย ๆ โดยเปิด Terminal แล้วพิมพ์คำสั่ง node -v ครับ)
2. Terminal / Command Line: โปรแกรม Terminal บน Mac/Linux หรือ PowerShell/Command Prompt บน Windows
3. Text Editor: โปรแกรมเขียนโค้ดที่คุณถนัด (สาย Terminal สามารถใช้ Neovim, Vim, Nano หรือ Text Editor อื่น ๆ อย่าง Zed, Cursor หรือ VS Code ได้ตามสบายเลยครับ คอร์สนี้เราไม่ได้จำกัดเครื่องมือ)

ขั้นตอนที่ 1: สร้างโปรเจกต์ Astro

เปิดโปรแกรม Terminal (สำหรับ Mac) หรือ PowerShell / Command Prompt (สำหรับ Windows) ขึ้นมา แล้วทำตามขั้นตอนดังนี้ครับ

เราจะใช้คำสั่งเดียวในการเริ่มต้นโปรเจกต์ ให้พิมพ์คำสั่งนี้แล้วกด Enter ครับ:

npm create astro@latest

ระบบจะเรียกใช้งาน Astro CLI (สังเกตว่าจะมีน้องหุ่นยนต์ Houston โผล่มาทักทาย) และจะมีชุดคำถามเพื่อตั้งค่าโปรเจกต์ปรากฏขึ้นมา ให้ตอบคำถามตามนี้ได้เลยครับ:

• Where should we create your new project?
  ให้พิมพ์ชื่อโปรเจกต์ เช่น web-astro (ระบบจะทำการสร้างโฟลเดอร์ชื่อนี้และนำไฟล์โปรเจกต์ไปใส่ให้อัตโนมัติ แบบคลีน ๆ เลยครับ)
• How would you like to start your new project?
  เลือก Use blog template (เราจะใช้เทมเพลตบล็อกเป็นโครงสร้างเริ่มต้นสำหรับคอร์สนี้ครับ)
• Install dependencies?
  เลือก Yes (เพื่อให้ระบบดาวน์โหลดแพ็กเกจที่จำเป็นมาติดตั้งให้)

💡 Note สำหรับการตั้งค่าเพิ่มเติม: หากระบบมีถามเรื่อง TypeScript ให้เลือก Yes และ Strict ส่วนเรื่อง Git ให้เลือก No ไปก่อนได้ครับ

ตัวอย่างหน้าจอ Terminal เมื่อรันคำสั่งสร้างโปรเจกต์สำเร็จ พร้อมให้นักพัฒนาย้ายเข้าสู่ Directory เพื่อเริ่มต้นการเขียนโค้ด

⚠️ กรณีพบปัญหา: Dependencies failed to install (Timeout)

ในบางครั้ง หากอินเทอร์เน็ตไม่เสถียร คุณอาจจะเจอข้อความแจ้งเตือนสีแดงใน Terminal ว่า:
error Error: Timeout
error Dependencies failed to install, please run npm install to install them manually after setup.

ไม่ต้องตกใจครับ! โปรเจกต์ของเรายังสร้างสำเร็จอยู่ (Project initialized!) เพียงแค่ระบบดาวน์โหลดแพ็กเกจไม่ทัน วิธีแก้คือ ให้พิมพ์คำสั่งด้านล่างนี้ใน Terminal ด้วยตัวเองเพื่อเข้าไปในโฟลเดอร์และโหลดแพ็กเกจใหม่อีกครั้ง:

cd web-astro
npm install

รอจนโหลดเสร็จ ก็สามารถไปขั้นตอนต่อไปได้เลยครับ

Project Ready: หน้าตาของโปรเจกต์ Astro เริ่มต้นเมื่อเปิดผ่าน Text Editor พร้อมสำหรับการเจาะลึกโครงสร้างไฟล์ในบทเรียนถัดไป

ขั้นตอนที่ 2: ติดตั้ง Tailwind CSS

ในการตกแต่งหน้าเว็บ เราจะใช้ Tailwind CSS เป็นเครื่องมือหลักครับ ความโดดเด่นของ Astro คือมีระบบคำสั่งอัตโนมัติ (Integration) ที่ช่วยลดความยุ่งยากในการตั้งค่าไปได้เยอะมาก

จุดนี้สำคัญมาก! ตรวจสอบให้แน่ใจว่าคุณย้ายตัวเองเข้ามาอยู่ในโฟลเดอร์โปรเจกต์แล้ว (หากยังไม่เข้า ให้รันคำสั่ง cd web-astro ก่อนครับ) จากนั้นรันคำสั่งสำหรับติดตั้ง Tailwind ใน Terminal ได้เลย:

npx astro add tailwind

Tailwind Integration: กระบวนการติดตั้งอัตโนมัติที่ Astro ช่วยปรับแต่งไฟล์ Configuration ให้รองรับ Tailwind v4 ในรูปแบบ Vite Plugin เพื่อประสิทธิภาพสูงสุด

ให้เราพิมพ์ y แล้วกด Enter ตลอดทางครับ จากหน้าจอก็เป็นอันเสร็จสิ้นครับ พร้อมรันล่ะ

ขั้นตอนที่ 3: รัน Development Server

เมื่อกระบวนการติดตั้งและดาวน์โหลดทุกอย่างเสร็จสิ้น ขั้นตอนสุดท้ายคือการทดสอบรันเซิร์ฟเวอร์จำลอง (Local Development Server) เพื่อดูหน้าตาเว็บไซต์แรกของเราครับ

รันคำสั่งต่อไปนี้ใน Terminal:

npm run dev

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

  🚀  astro  v4.x.x started in 32ms

  ┃ Local    http://localhost:4321/
  ┃ Network  use --host to expose

ให้เปิด Web Browser ที่เราใช้งานเป็นประจำ (เช่น Chrome, Safari, Edge) แล้วพิมพ์ URL http://localhost:4321/ ลงไปครับ

เรียบร้อยครับ! คุณจะพบกับหน้าเว็บต้อนรับเริ่มต้นของ Astro (ในรูปแบบ Blog Template) ซึ่งเป็นการยืนยันอย่างสมบูรณ์ว่าโปรเจกต์ของคุณพร้อมสำหรับการพัฒนาแล้ว

Development Server Ready: เมื่อรันคำสั่งสำเร็จ ระบบจะแสดง URL สำหรับเข้าชมเว็บไซต์ (localhost:4321) เป็นอันยืนยันว่าโปรเจกต์พร้อมสำหรับการเริ่มต้นเขียนโค้ดแล้ว

จะได้หน้า blog ตามที่เราเลือกเป็น template ตอนติดตั้ง setup Astro ครับ ลุยยยยย

Hello, Astronaut! หน้าตาเว็บไซต์แรกของคุณที่รันผ่าน Localhost โดยใช้เทมเพลตบล็อกพื้นฐาน ซึ่งมาพร้อมกับโครงสร้าง Navigation และตัวอย่างบทความที่พร้อมให้เราเข้าไปปรับแต่งครับ