12 พฤษภาคม 2566
เริ่มเขียนบล็อกด้วย Astro
นี่คือโพสต์แรกของบล็อกที่ผมเขียนด้วย Astro
เริ่มเขียนบล็อกด้วย Astro
สวัสดีครับผมนายปีเตอร์และนี่คือโพสต์แรกของบล็อกใหม่ของผม ผมจะมาเรียนรู้ไปพร้อมๆ กับการเขียนบล็อกนี้ และผมคิดว่านี่เป็นวิธีที่ดีวิธีหนึ่งที่จะทำได้
คู่มือการเริ่มต้นการเขียนบล็อกของ Astro ได้ทำให้ผมได้มีแรงบันดาลใจในการเริ่มเขียนบล็อกของตัวเอง ผมคิดมานานแล้วว่าจะเริ่มเขียนบล็อกแต่ไม่รู้จะเริ่มต้นอย่างไร
ก่อนหน้านี้ผมใช้ Svelte มานานแล้ว ผมชอบมันมาก แต่ SvelteKit ตัวล่าสุดมันทำให้ผมมีปัญหาบ้าง ส่วนใหญ่เพราะว่ามันใช้การเรียกหน้าจากไฟล์โดยทุกหน้าจะมีชื่อ +page.svelte เหมือนๆ กันหมด ผมไม่ชอบมันเท่าไหร่ และเมื่อเปิดไฟล์ใน VSCode มันจะแสดงชื่อไฟล์เป็น +page เต็มไปหมด ผมอยากให้มันแสดงเป็นชื่อ page.svelte แบบเดิม ก็รู้อยู่ว่ามันแก้ได้ แต่ผมไม่อยากใช้เวลาไปกับมัน ผมอยากเขียนบล็อกง่ายๆ แค่นั้น เป็นไปได้ก็ใช้ Markdown พอ
ทีนี้ไอ้เจ้า Astro เนี่ยมันก็รองรับ Markdown ได้พอดี แถมใช้งานง่ายไม่ซับซ้อน และยังสามารถใช้ Svelte component ได้ด้วย ทีนี้ถ้าเกิดอยากเอาไปแสดงไอเทมของเกม Path of Exile ก็ทำได้ หรืออาจจะเป็นพวกโปรแกรมคำนวณต่างๆ ก็ยังทำได้ด้วย
ผมไม่แน่ใจว่าผมจะใช้ Astro ไปอีกนานแค่ไหน แต่ผมจะลองใช้ดูก่อนครับ อย่างน้อยๆ ก็ลองเขียนสักโพสต์สองโพสต์แล้วมาดูกันว่าจะเป็นยังไงครับ
ขั้นตอนที่ผมทำเพื่อเริ่มเขียนบล็อกนี้
- สร้างโปรเจคใหม่ด้วย Astro Starter Kit: Minimal template
- เปิดโปรเจคใน VS Code และติดตั้ง extensions ตามที่แนะนำ
- อัพโหลดโปรเจคไปยัง GitHub
- สร้างโปรเจคใหม่ใน Cloudflare Pages และเชื่อมต่อกับ GitHub repository
- เลือก Astro preset
- เพิ่ม environment variables ตามนี้:
NODE_VERSION:18.16.0 - เพิ่ม custom domain:
www.xiaz.tv,xiaz.tvซึ่งมันจะไปสร้าง CNAME record ใน Cloudflare DNS ให้เอง
- ติดตั้ง Tailwind
- ติดตั้ง Svelte
- ติดตั้งฟอนต์ ผมใช้ฟอนต์ Inter ในการแสดงผลภาษาอังกฤษและ Kanit ในการแสดงผลภาษาไทย จึงเรียงลำดับให้ Inter อยู่หน้าสุด และ Kanit อยู่หลังสุด เพราะ Inter มันไม่มีภาษาไทยมันก็จะ Failover ไปใช้ Kanit แทนเมื่อเจอภาษาไทย
- ทำตามคู่มือต่อและปรับแต่งตามสมควร