สร้าง Static Site Blog ง่าย ๆ - ด้วย Astro framework

❓ Astro framework คืออะไร ?#

Astro framework เป็น web framework ตัวหนึ่ง ที่มีแนวคิดการทำงานแบบ content-driven เหมาะสำหรับการนำมาทำเว็บไซต์ที่เน้นการอ่านและการแสดงผลเนื้อหาเป็นหลัก เช่น เว็บบล็อก หรือ เว็บไซต์ของบริษัท เป็นต้น

โดยที่ตัว Astro มีจุดเด่นในเรื่องของ “ความเร็ว” เป็นหลัก ไม่ว่าจะเป็น ความเร็วในการเริ่มต้นใช้งานที่สามารถเริ่มเรียนรู้ได้อย่างง่ายดาย และความเร็วของเว็บไซต์ที่ทำให้เว็บของคุณมี SEO ที่ดีและเป็นที่รักของ search engine อีกด้วย

🚀 ทำไม Astro ถึงเร็ว ?#

เหตุผลที่ทำให้ Astro นั้นเร็วกว่า framework เจ้าดังอื่น ๆ นั้นเป็นเพราะว่าตัว Astro จะ build เว็บไซต์ของเราเป็น static HTML ก่อนที่จะเสิร์ฟถึงผู้ใช้งานนั่นเอง ซึ่งตัว static HTML นี้ทาง Astro เคลมว่าเป็น Zero Javascript หรือก็คือจะไม่มี JavaScript ที่ใช้สำหรับ render HTML เลย จะมีก็แต่ JavaScript ที่เป็นฟังก์ชันการทำงานจริงอยู่เท่านั้น ต่างจาก framework เจ้าดังอื่น ๆ ที่ยังคงใช้ JavaScript ในการ render HTML อยู่

ซึ่งตัว Astro มีการบอกเอาไว้ในหน้าเว็บไซต์ของตัวเองว่า ประสบการณ์การใช้งานเว็บไซต์ที่ถูกสร้างด้วย Astro นั้นดีกว่า framework ตัวอื่น ๆ อยู่พอสมควร

🖥️ เกริ่นนำพอแล้ว เริ่มเลยดีกว่า#

หลังจากที่ทำความรู้จักและเข้าใจข้อดีของ Astro กันมาพอสมควรแล้ว เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มการสร้างเว็บบล็อกของเราด้วย Astro กันเลยดีกว่า

ในการติดตั้ง Astro สามารถทำได้หลายวิธีตามเอกสาร ซึ่งในบทความนี้จะขอใช้ tool มาตรฐานคือ npm ในการติดตั้งก่อน แต่หากผู้ใช้งานมี tool อื่นติดตั้งอยู่แล้วก็สามารถเลือกใช้งานได้ตามสะดวก

เริ่มต้นติดตั้ง Astro ด้วยการพิมพ์คำสั่งง่าย ๆ ดังนี้

npm create astro@latest

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

หลังจากนั้นตัว Astro จะดาวน์โหลดไฟล์โค้ดและ packages ทั้งหมดที่ต้องใช้งานเก็บไว้ที่โฟลเดอร์ชื่อโปรเจกต์ตามที่เราตั้ง หลังจากที่ npm ทำการติดตั้งเสร็จสิ้น ให้เราเข้าไปที่พาธของโปรเจกต์และพิมพ์คำสั่งเพื่อเริ่มใช้งานได้เลย

npm run dev

รอสักครู่ให้ระบบเริ่มทำงาน จากนั้นเปิด browser และเข้าไปที่ URL http://localhost:4321 ได้เลย เพียงเท่านี้เราก็จะได้เว็บไซต์เริ่มต้นสำหรับใช้งาน Astro มาใช้งานแล้ว 😎

📝 เริ่มต้นเขียนบทความแรกที่ src / pages#

โดยพื้นฐานแล้ว Astro จะมีระบบ routing ของเว็บไซต์แบบ file-base routing คือ เมื่อเราสร้างไฟล์หรือโฟลเดอร์ชื่ออะไร เราก็สามารถเข้าสู่เว็บไซต์ด้วยการพิมพ์ชื่อไฟล์หรือโฟลเดอร์นั้น ๆ ได้เลย เช่น

หากเราต้องการเพิ่มหน้าสำหรับทดสอบสร้างบทความ และอยากให้มี URL ของเว็บไซต์เป็น /hello-world เราต้องสร้างไฟล์ index.astro ไว้ที่โฟลเดอร์ src/pages/hello-world/index.astro

จากนั้นให้ลองเข้าเว็บไซต์เดิมอีกครั้งด้วย URL http://localhost:4321/hello-world หน้าเว็บก็จะแสดงเนื้อหาตามที่เราเขียนไว้

🎨 เพิ่มความสวยงามให้เว็บไซต์ด้วย Astro Theme#

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

ซึ่งธีมของ Astro นั้นจะมีทั้งธีมที่เป็น official ของทาง Astro เองและธีมที่นักพัฒนาคนอื่น ๆ สร้างมาให้เราใช้อยู่มากมาย โดยเราสามารถดูรายชื่อธีมแบบ official ได้ที่ https://github.com/withastro/astro/tree/main/examples ↗

ในบทความนี้เราจะทดลองสร้างเว็บไซต์ที่เป็นเว็บบล็อกกัน ดังนั้นเราสามารถเลือกธีมที่เป็น template ของ blog ได้เลย โดยในการสร้างโปรเจกต์เราต้องเพิ่มคำสั่งเข้าไปดังนี้

npm create astro@latest -- --template blog

เพียงเท่านี้เราก็จะได้โปรเจกต์ตั้งต้นที่มีหน้าตาเป็นเว็บบล็อกให้ใช้งานแล้ว

แต่ถ้าหากว่าธีมนี้ยังไม่สวยถูกใจ เราก็สามารถเลือกธีมอื่น ๆ เพิ่มเติมได้ที่ https://astro.build/themes ↗ จะพบธีมให้เลือกมากมายทั้งแบบฟรีและเสียเงิน

สมมุติว่าเราสนใจธีมที่มีชื่อว่า bookworm ซึ่งมี repository อยู่ที่ https://github.com/themefisher/bookworm-light-astro ↗

เราก็สามารถติดตั้ง Astro ผ่านการระบุ template ได้เช่นกัน โดยการพิมพ์คำสั่งดังนี้

npm create astro@latest -- --template themefisher/bookworm-light-astro

จากนั้นก็เพียงแต่ทำแบบเดิมในการติดตั้ง เพียงเท่านี้เราก็สามารถเริ่มต้นใช้งาน Astro ด้วยธีมที่สวยงามได้แล้ว

⚙️ การปรับแต่งอื่น ๆ ที่สำคัญ#

แม้การแก้ไขเนื้อหาใน Astro จะทำได้ง่าย ๆ ผ่าน md ไฟล์ แต่นอกจากนี้เรายังสามารถปรับแต่งส่วนอื่น ๆ ได้อีก เช่น การแก้ไข SEO บางอย่างหรือเพิ่มเติมรายละเอียดเล็ก ๆ น้อย ๆ ตามแต่ธีมนั้น ๆ จะมีมาให้

ซึ่งในการแก้ไขนี้เราสามารถแก้ได้ที่ไฟล์ astro.config.mjs ซึ่งการแก้ไขไฟล์นี้จะขึ้นอยู่กับธีมที่เลือกใช้ด้วย ดังนั้นก่อนแก้ไขขอให้ศึกษาโครงสร้างของธีมและเอกสารของธีมนั้น ๆ อีกครั้งเพื่อที่จะได้ไม่เกิดข้อผิดพลาดขึ้น

🌐 build เว็บไซต์ขึ้น vercel เพื่อให้เพื่อน ๆ ได้ชม#

หลังจากที่เราเขียนบล็อกเสร็จเรียบร้อย สิ่งถัดไปที่ต้องทำก็คือการนำบล็อกที่เราเขียนอัปโหลดขึ้นเว็บไซต์จริงเพื่อให้เราสามารถแชร์บทความนี้ไปยังเพื่อน ๆ ของเราได้

ในเมื่อตัว Astro สามารถ build เว็บของเราเป็น static HTML แล้วเราก็สามารถเลือก cloud เจ้าดังได้มากมายที่สามารถอัปโหลด static HTML ได้แบบฟรี ๆ โดยในบทความนี้เราจะลอง build และอัปโหลดขึ้นบน vercel กัน

ก่อนอื่นเราต้องสมัครใช้งาน vercel ให้เรียบร้อยก่อน หลังจาก login เข้ามาแล้วให้ทำการผูก repository ที่เรา push code ของโปรเจกต์ขึ้นไป จากนั้นก็เลือก repository ที่ต้องการและกด build ได้เลย

จากนั้นก็เพียงแค่รอจนกว่าหน้าจอเว็บไซต์จะแสดงข้อความผลลัพธ์จากการ build เสร็จสิ้น

หากหน้าเว็บไซต์ขึ้นว่า build success แบบนี้ก็หมายความว่าบล็อกของเราพร้อมที่จะออนไลน์ให้เพื่อน ๆ ได้อ่านกันแล้ว เราสามารถคัดลอก URL ที่ vercel แสดงผลอยู่บนหน้าจอแล้วส่งต่อได้เลย

👨‍💻 ทักษะพื้นฐานยังสำคัญ#

แม้ Astro จะเตรียมข้อมูลให้เราพร้อมสรรพแล้ว แต่หากเราต้องการที่จะแก้ไขเว็บไซต์ให้ได้อย่างมีประสิทธิภาพจริง ๆ ก็ต้องไม่มองข้ามทักษะในการเขียนโปรแกรมโดยเด็ดขาด

ซึ่งใน Astro เองจะมี syntax ของ Javascript, JSX, CSS หรือแม้แต่การเขียนเนื้อหาใน markdown เองก็ตาม สิ่งเหล่านี้ถือเป็นพื้นฐานในการปรับแต่งและแก้ไขเว็บทั้งสิ้น

ไว้ในโอกาสถัดไปแอดมินจะมาแนะนำเทคนิคการเขียนและการปรับแต่ง Astro ให้ได้ดั่งใจกัน สำหรับวันนี้ ขอให้ทุกคนสนุกกับการเขียนบล็อกของตัวเองให้เต็มที่ได้เลย 🥰