กินลม ชมเว็บ... มานั่งอ่านเรื่องราวของเว็บไซต์นี้กันแบบเพลินๆ

updated at: 11 Nov 2023

เนื่องจากเป็นบล็อกแรกของเว็บ ก็เลยคิดว่าจะเล่าเกี่ยวกับเว็บนี้มันซะเลย... คิดว่าจะยังไม่ลงลึกในมุมเทคนิค อยากจะให้นั่งอ่านกันแบบเพลินๆ ดีกว่า ไว้เดี๋ยวบล็อกอื่นๆ ค่อยเจาะลึกกันเนอะ

กว่าจะมาเป็น “กินลม”

จั่วหัวซะดูเท่แล้วก็แลดูมีอุปสรรคเยอะไปงั้นแหละ จริงๆ แล้วอุปสรรคที่ใหญ่ที่สุดก็คือความขี้เกียจและการผลัดวันประกันพรุ่งนั่นแหละ ฮ่าาา

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

แล้วก็จบด้วยมุกคลาสสิคคือการทำเป็น “เว็บบล็อก” ยังไงหล่าา… แต่เดี๋ยวก่อนน ถึงมันจะคลาสสิคแต่จริงๆ แล้วมันมีอะไรอยู่เบื้องหลังเยอะะะเลย

อันดับแรก เริ่มต้นที่การ “เริ่มทำ”

ก่อนอื่นอยากให้เดาครับว่าเว็บนี้เริ่มจุดไอเดียตั้งแต่ตอนไหน… เฉลย ตั้งแต่ปีพุทธศักราชสองพันห้าร้อยหกสิบสาม (ไม่ค่อยอยากบอกเลยพิมพ์เป็นคำอ่านไทย จะได้อ่านยากๆ)

ไม่ใช่ว่าติดปัญหาอะไรนะครับ ติดแค่ “ไม่ยอมเริ่มทำแบบจริงๆ จังๆ ซักที” ตั้งแต่ที่คิดว่าจะทำออกมาในรูปแบบไหน จริงๆ มันก็มีไอเดียผุดขึ้นมาในหัวเต็มไปหมด ก็มีไปลองเล่น tool นู่น ดู framework นั่นต่างๆ นาๆ เอามาลองใช้บ้างนิดๆ หน่อยๆ รวมไปถึงการไปจดโดเมนนึงไว้รอ (แหม กลัวจะมีคนแย่ง) แต่ว่าก็ยังไม่เห็นเป็นรูปเป็นร่างซักกะที

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

ถ้าจะบอกว่าที่เริ่มทำจนมันเสร็จได้เพราะเหตุผลประหลาดๆ ก็… ใช่ เอาจริงๆ ผมมาลองนั่งคิดย้อนกลับไปดูมันก็ตลกดีเพราะว่าผมนึกเหตุผลที่ฟังดูดีไม่ออกว่าทำไมผมถึงเริ่มทำจนเสร็จนอกจากบอกว่า “ก็เริ่มต้นที่การเริ่มทำ จนทำมันเสร็จนั่นแหละ”

ทำอะไร?

ณ ตอนนี้มันยังเป็นเว็บบล็อกที่ยังเป็น web 1.0 อยู่ (ตอนนี้เค้ากำลังคุยเรื่อง web 3.0 กันแล้วว) ตอนนี้กำลังค่อยๆ เอาสิ่งที่อยู่ในหัวออกมาทำให้มันเกิดขึ้นอยู่ ฮ่าา แล้วก็ในช่วงแรกผมอยากให้มันมีคอนเทนต์ในเว็บไซต์เยอะประมาณนึงก่อน (มันก็เลยเป็นเหตุผลที่เลือกทำเว็บบล็อกก่อนยังไงหละ) จริงๆ มีไอเดียนึงคือ "ทำตามคำขอ" คืออยากจะเปิดช่องทางให้คนที่บังเอิญผ่านมามาเสนอไอเดียว่าอยากให้มีอะไรบ้างในเว็บไซต์นี้ แต่เดี๋ยวค่อยว่ากันละกัน traffic เข้าเว็บยังไม่มีเลย ฮ่าๆ

ใช้อะไรทำอะ

ขอลงเนื้อหาเชิงเทคนิคสักนิด เดี๋ยวสาย Hard Skill จะเบื่อซะก่อน... จริงๆ เข้าไปที่หน้าแรกก็จะเจอโลโก้ของเครื่องมือหรือเฟรมเวิร์คที่ผมใช้อยู่ ซึ่งเดี๋ยวผมจะเล่าว่าไอ้สิ่งที่ใช้เนี่ย ผมใช้ทำในส่วนไหนอะไรยังไงบ้าง

1. Gatsby
   เป็น framework ที่เว็บไซต์นี้ใช้ทำหน้าบ้านครับ ซึ่ง Gatsby เค้าก็ไปใช้ React อีกทีนึงสำหรับปั้น UI ต่างๆ แล้วก็ใช้ GraphQL ในการดึงข้อมูลต่างๆ มาเตรียมไว้เพื่อสร้างหน้าเว็บแต่ละหน้า

2. Strapi
   ตัวนี้เป็น framework สำหรับทำ headless CMS ที่เว็บไซต์นี้ใช้ครับ... CMS ย่อมาจาก Content Management System แปลอีกทีก็คือระบบที่ใช้จัดการคอนเทนต์ครับ ส่วน headless ก็หมายถึงไม่มีหัว ไม่มีหน้าตาตามคำเลยครับ ซึ่ง framework ที่เอามาเสียบเป็นหัวเพื่อให้มีหน้าตาของเว็บขึ้นมาก็คือ Gatsby ที่ได้อ้างถึงด้านบนนั่นเองครับ (หลายๆ คนคงรู้จัก Wordpress ให้จินตนาการว่า เอา wordpress มาแยกอออกเป็นสองส่วน ส่วนนึงใช้สำหรับทำหน้าตาของเว็บไซต์ที่คนเข้าเว็บไซต์ปกติจะเห็น อีกส่วนจะเป็นระบบสำหรับจัดการคอนเทนต์ที่จะถูกใช้โดย admin หรือ editor ครับ) สำหรับ Strapi นั้นก็มี GraphQL ให้ใช้โดยที่เราไม่ต้องเขียนอะไรเยอะแยะ (เช่น Schemas, Queries ฯลฯ) ก็ใช้งานได้เพียงแค่ไปเปิดให้มันทำงาน (ยังไม่เล่าแบบละเอียดว่าทำยังไงละกันเนอะ เดี๋ยวยาว) ดังนั้นมันจึงเอา Gatsby มาเสียบได้ค่อนข้างง่าย

3. TailwindCSS
   เรียกได้ว่าเป็น CSS framework ที่ค่อนข้างมาแรงมากครับ สำหรับคนที่ยังไม่เคยใช้ ผมแนะนำให้ไปลองใช้กันนะ ตัวนี้จะมีความคล้ายกับ Bootstrap ในมุมของการใช้งานครับ (ใช้การเขียนคลาสเพื่อปรับแต่ง UI) แต่ในมุมของ tools/packages ที่ตัว framework ใช้นั้นต่างกันค่อนข้างมาก เช่นการใช้ Javascript ซึ่ง TailwindCSS จะใช่แค่ตอน build time แต่จะไม่ใช้ตอน run time เลยครับ และ Bootstrap จะมี Component ส่วนใหญ่ที่จำเป็นต้องใช้ Javascript ถึงจะทำงานได้ตามที่เค้าออกแบบไว้ (ลึกนิดนึงนะครับ ใครอ่านแล้วงงๆ อย่าเพิ่งคิ้วขมวด แหะๆ)

4. Firebase Hosting
   โฮสติ้งชื่อดังสำหรับสายฟรีที่ต้องการโฮส Static Website ซึ่งเว็บไซต์นี้ก็ใช้มันสำหรับโฮสไฟล์ HTML, CSS, JS ที่ได้จากการ build ของ Gatsby ครับ

5. Docker
   ถ้าจะเรียกชื่อเทคโนโลยีให้ถูก ต้องเรียกว่า Docker Engine (ที่มี Container Runtime, CLI และอื่นๆ รวมอยู่ในนั้น) แต่ว่าส่วนใหญ่จะเรียกกันแค่ว่า Docker ที่เป็นชื่อเจ้าของเทคโนโลยีเพราะเนื่องจากตอนแรกนั้นเจ้าที่ทำให้เกิดสิ่งที่เรียกว่า containerization นั่นก็คือ Docker นั่นเอง แต่ในภายหลังเค้าก็ได้แยกบางส่วนออกมาเป็น Open Source โดยให้ชื่อว่า Containerd (ภายหลังก็ถูกหยิบไปใช้ในหลายๆ เทคโนโลยีดังๆ มากมาย หนึ่งในนั้นก็คือ Kubernetes) จากนั้นก็ได้เขียนสเปครวมถึงมาตรฐานของเทคโนโลยีนี้โดยให้ชื่อว่าเป็น Container Runtime ซึ่งต่อมามันก็เป็นมาตรฐานที่หลาย ๆเจ้าจะนำไปอ้างอิงในการพัฒนาเทคโนโลยีเป็นของตัวเอง... โทษทีครับ เกริ่นซะยาวเลย จริงๆ สั้นๆ ก็คือเว็บไซต์นี้ก็ใช้ Docker Engine ในการรันตัว Strapi ที่เป็น CMS ซึ่งประกอบไปด้วย application (ตัว Strapi เอง) และ database (ตัวที่ Strapi ใช้จัดการกับข้อมูล) นั่นแหละครับ

6. PostgreSQL
   เนื่องจากเรามี CMS ดังนั้นก็จะมีสิ่งที่เรียกว่า database ที่ใช้จัดการกับข้อมูล โดยเว็บไซต์นี้เลือกใช้ PostgreSQL ซึ่งเป็น SQL database ที่เป็นหนึ่งในตัวเลือกของ Strapi ครับ ในที่นี้ผมเอาตัว database ไปรันเป็น container โดยใช้ Docker Engine ตามที่ได้กล่าวไปด้านบน

7. Google Container Registry
   เริ่มลึกไปเรื่อยๆ แฮะ ฮ่าๆ... เนื่องจากผมใช้ Docker Engine ในการรัน Strapi เนอะ ทั้งตัว application และ database ก็จะรันเป็น container อยู่ใน VM (Virtual Machine) หนึ่ง และก็จะมีสิ่งที่เรียกว่า Container Registry เอาไว้จัดการกับ Docker container Images ในที่นี้ก็เลือกใช้ GCR หรือ Google Container Registry ครับ

8. Google Cloud Storage
   สั้นๆ คือเอาไว้เก็บรูปที่อัพโหลดผ่าน CMS ครับฮ่าๆ

9. Google Analytics
   ผมขอวิเคราะห์ข้อมูลการใช้งานเว็บไซต์ของพวกท่านทั้งหลายหน่อยนะครับ ฮ่าๆ ถึงจะมีการเก็บ IP หรือคุ้กกี้แต่รับรองว่าข้อมูลเป็น anonymous แน่นอน

10. Squoosh
    เป็น tool ที่ผมใช้บ่อยมาก และเว็บไซต์นี้ก็ใช้ด้วย มันเกิดมาเพื่อใช้สำหรับ optimize ขนาดไฟล์รูปภาพหรือจะใช้แปลงสกุลไฟล์ก็ได้ ซึ่งเว็บนี้ก็ได้ใช้มัน optimize ขนาดรูปภาพต่างๆ ให้เล็กลงเท่าที่ทำได้ เพื่อให้ท่านๆ ประหยัด internet bandwidth ที่ใช้ดาวน์โหลดรูปภาพจากเว็บไซต์นี้ครับ

11. และอื่นๆ
    อาจจะเล่าไม่ครบ แต่ถ้าผมเห็นว่าตัวไหนควรแชร์ ตัวไหนน่าหยิบมาบอกเล่าก็เดี๋ยวจะมาอัพเดทต่อให้อ่านครับ

กล่าวปิดจากนั้นก็ปูพรม

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

ในส่วนของฟีเจอร์ต่างๆ ในอนาคต ก็ขอให้รออีกสักหน่อยเพราะตอนนี้ยังติดอยู่อีกหลายประเด็นเช่น ปริมาณ traffic, ค่าใช้จ่าย (ตอนนี้ก็ใช้ resource ต่างๆ แบบประหยัดที่สุดอยู่อะนะ ไอ้เรามันสายทุนบาง ฮ่าา) ฯลฯ

ก็ขอฝากติดตาเว็บไซต์นี้ด้วยนะครับ หากมี traffic เข้ามาเยอะๆ ผมก็จะพยายามมาอัพเดทบทความและเว็บไซต์เรื่อยๆ ซึ่งหวังว่าจะมีประโยชน์กับผู้มาอ่านนะครับ ^^