ทำเว็บใหม่หมดด้วย Astro 3.0!

August 30, 2023 •

วันนี้จะมาเล่านิดหน่อยว่าทำไมถึงอยู่ดี ๆ ก็มีไอเดีย + ไฟ มานั่งทำเว็บใหม่หมดแบบ 100% ทั้ง stack และ design และทำไมถึงมาลงเอย กับ stack นี้

โดย ณ ตอนนี้ ตัวเว็บไซต์จะทำด้วย stack Astro, Svelte, Tailwind ซึ่งก็ถือว่าเป็น tech ที่คนก็ค่อนข้างจะ hype กันนั่นแหละ 5555 (แต่ก็แอบมีเหตุผลนะ)

ทำไมต้องทำใหม่หมด?

1. Design

เหตุผลหลักข้อแรกเลยก็คือเหมือนพอเวลาผ่านไป ความรู้สึกกับตัว design เดิมมันเริ่มไม่ค่อยชอบขึ้นเรื่อย ๆ (ทั้งในแง่ ux, ui และความขี้เบื่อ)

โดยต้องขอเท้าความมาก่อนว่า ตัว design เก่านั้นคือพยายามทำให้มันเหมือน TUI ที่สุด (ช่วงนั้นค่อนข้างบ้า terminal)

ซึ่งมันก็ไม่ค่อยมีปัญหาอะไรมาก แต่สิ่งที่รู้สึกได้เลยคือพอเป็น dark mode แล้วตัวหนังสือมันชิด ๆ กัน มันทำให้เวลาอ่าน text แล้วมันจะรู้สึกตาลาย พอเจอแบบนี้เลยรู้สึกว่าคงต้องเปลี่ยน theme เว็บไปเลยดีกว่า

โดย design ใหม่ หลัก ๆ คืออยากให้มันแอบมีความเป็น monochromatic ที่ใช้สีโทน beige แต่หลัง ๆ ก็เริ่มอยากใส่ความเป็น neo-brutalism ลงไปนิดหน่อย เลยเกิดเป็นหน้าตาแบบปัจจุบัน

2. Stack เก่าไม่ได้ออกแบบมาให้ทำ Static Site แบบเว็บส่วนตัว

คือความที่ว่าตัวเก่ามันเป็น Vite + React (สมัยนั้นยังแอบไม่ค่อยอยากใช้ astro เพราะขก.มานั่งอ่าน) ซึ่งจริง ๆ แล้วก็เป็น Stack มาตรฐานในการทำ SPA ในตอนนี้ แต่ปัญหาคือมันไม่ได้ออกแบบมาให้ทำ Static Site แบบเว็บส่วนตัว ทำให้หลาย ๆ อย่างเวลาทำแล้วมันรู้สึกได้เลยว่าเป็น workaround ที่ทำยังไงก็ยังไม่ค่อยดี

อย่างแรกเลยก็คือการทำ route navigation ที่มันไม่มี built-in ให้ + ไม่ค่อยอยากใช้ react-router (for some reason) ก็เลยกลายเป็นว่ามาใช้ state จัดการหน้าเอง (อันนี้เพราะแอบอยากให้มัน seamless แบบ TUI ด้วยแหละมั้งถ้าจำไม่ผิด)

ข้อสองคือตัว SEO ที่แย่ ซึ่งเป็นสิ่งที่รู้ ๆ กันอยู่แล้วว่ามันเป็นข้อเสียหลักเลยของ SPA ซึ่งตอนนั้นก็รู้สึกไม่ได้แคร์เท่าไหร่ (ด้วยเหตุผลบางประการ) แต่พอมาตอนนี้ก็แบบมีความรู้สึกว่าให้เว็บมันติดหน้า Search Engine หน่อยก็ดีนะ

3. Markdown ไม่ค่อยจะดีเท่าไหร่

อันนี้ก็เป็นอีก workaround นึงที่ทำในตอนนั้น ด้วยความที่ vite มันไม่มีระบบ generate จาก md (อย่างน้อยก็ในตอนนั้น) ก็เลยเกิดเป็นท่าที่ ship code ที่แปลง text md เป็น react component แล้วก็ค่อยส่งไฟล์ md ไปตอนกดเลือกหน้า ซึ่งถือว่าประหลาดนิดหน่อย

4. เว็บค่อนข้างหนัก

อันนี้เกิดมาจากทั้งการที่ใช้ react และ การที่แปลง md ในฝั่ง client ซึ่งกลายเป็นว่าต้องมี logic การแปลงส่งมา และก็ต้องส่งไฟล์ md ทุกครั้งที่เลือกหน้าด้วย (อันนี้ยังดีที่ browser มันก็ cache ไว้ให้)

แล้วทำไมต้องเป็น Astro

บ่นของเก่ามาเยอะละ งั้นมาอวยของใหม่ที่ใช้ดีกว่า

TLDR: Astro เป็น framework สร้าง SSG ที่น่าจะดีที่สุดในตลาดแบบไม่ต้องสงสัย

1. SSG gud for personal site

ยังไงแล้ว เว็บ personal site/blog ก็ควรเป็น SSG จะดีที่สุด เพราะเป้าหมายของ personal site คือ SEO ดีและเบา ซึ่ง Astro ก็เป็น framework ในการทำ SSG อยู่แล้ว

2. มีของทุกอย่างสำหรับการทำ personal blog

จริง ๆ แล้ว เมื่อก่อนก็คิดมาตลอดว่าไอการทำเว็บ blog เองนี่ไม่ค่อยจำเป็นขนาดนั้น เพราะมี platform เยอะแยะที่เปิดให้ทำฟรี (แบบ medium) แต่กลายเป็นว่าพอจะทำเว็บตัวเองแล้ว ถ้าอยากให้เว็บมันดูไม่โหวง การยัด blog เข้าไปก็เป็นสิ่งที่น่าสนใจ (5555) ซึ่งตัว Astro มัน support การทำ blog ด้วย MD แบบแทบจะ out of the block ไม่ต้องไปหา third party มาใช้ แถมมัน build ออกมาเป็น plain html ให้เรียบร้อย และทุกอย่างที่ว่ามาคือทำง่ายมาก ๆ

3. Support front end library/framework อื่นแบบมหาศาล

อีกอย่างนึงที่น่าสนใจคือตัว Astro มันก็แบบเป็น meta-framework ที่ support front end หลายตัวมาก (React, Vue, Svelte, etc.) หรือจริง ๆ จะไม่ใช้เลยก็ได้เพราะตัวมันก็มีตัว .astro เองที่ based on JSX ซึ่งจะแอบเหมือน react ทำให้กลายเป็นว่าจริง ๆ แล้ว learning curve มันต่ำมากถ้าเคยใช้ตัวอื่นมา เพราะคุณเขียนของส่วนใหญ่ใน lib ตัวเก่งของคุณเลยก็ได้ (แต่ layout กับ page แอบบังคับว่าต้องใช้ astro อยู่ดีนะ)

4. View Transition แบบโคตรง่าย

เดิมทีคือเว็บนี้มันเขียนใน Astro 2 แต่พอจะทำ blog ไอเจ้าตัว Astro 3.0 ก็มาพอดีเป๊ะ และมาพร้อมของสุดเจ๋งแบบตัว View Transition ซึ่งถือว่าเป็น killer feature เลย เพราะมันทำให้เว็บ static มีลูกเล่นที่เป็นอาหารตา แถมยังใช้ง่ายอีก

แต่ด้วยความที่มันเป็นของใหม่ (ใหม่ขนาดที่ว่าบาง browser มันยังไม่ support API ด้วยซ้ำ) ก็เลยแบบมีปัญหาด้าน visual ให้เห็นเรื่อย ๆ แต่เวลามัน work มันดูสวยจริง ๆ

แล้วของอันอื่นล่ะ มีทำไม?

Svelte: อันนี้เอาจริง ๆ คือเพราะไม่รู้ว่า astro มันมี JSX ของตัวเอง ก็เลยลงมาใช้ ซึ่งตอนนี้เอาไว้ทำ component นิดหน่อย แต่ยอมรับเลยว่าถ้าจะทำอะไรที่เป็น client state ยังไงก็มีไว้ก็ดีกว่า
Tailwind: เป็นของอีกตัวที่ใช้แล้วไม่สามารถเลิกใช้ได้ DX มันดีเกินไป หลับหูหลับตาใช้แบบไม่ต้องคิดแบบชิว ๆ

จริง ๆ ก็มีแค่นี้แหละ บัย