เล่าเรื่องทำเว็บบล็อกส่วนตัว naijab.com เวอร์ชั่น react.js ด้วย gatsby.js

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

https://www.facebook.com/naijabcom

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

ตอนแรกไม่ได้คิดว่าจะทำเว็บด้วย react.js เลยแม้แต่น้อย ด้วยที่ว่าเราอยากจะทำอะไรง่ายๆ และสวยๆ ไม่ต้องลงโค้ดมากนัก มาดูกันว่าผมเคยเลือกตัวไหนกันบ้าง

TOOLS ที่เคยลองใช้

1.wordpress ตัวแรกเลยนะครับ น่าจะรู้จักกันดี บทความแรกๆ ที่เขียนบนเว็บ naijab.com ก็ใช้ wordpress ในการทำ มาทำความรู้จัก wordpress แบบสรุปๆ เลยมันคืออะไร สำหรับคนไม่เคยใช้นะครับ

ขอบคุณภาพจาก https://s.w.org/images/home/screen-themes.png?3

wordpress เป็น cms (Content Management System) ตัวนึงที่ได้รับความนิยมในการทำเว็บไซต์ ทั้งทำบล็อก เว็บองค์กร เว็บร้านค้า เพราะด้วยมีระบบที่สะดวกต่อการในการทำเว็บ ซึ่งเบื้องต้น wordpress เขียนด้วย php ทำให้เราเขียนพวก theme + plugin ด้วย php ได้เลย (ผมเริ่มรู้จัก php เพราะ wordpress เลยละ) โดย wordpress มีสอง version คือ version .org กับ .com (ฟรีกับเสียตังค์นั่นละครับ) .org จะเป็น version ที่ลงบน hosting เราเองได้ ส่วน .com เป็นบริการเว็บไซต์แบบ blogger, wix อะไรทำนองนั้น โอเคมาดูฟีเจอร์หลักๆ ของตัวนี้กัน

  • มีระบบ Theme สำหรับเปลี่ยนหน้าตาเว็บ โดยมีทั้งฟรี และต้องเสียตังค์ โดยหลายๆ คนเลือกจะซื้อ theme จากเว็บ https://themeforest.net/ (ไม่ได้โฆษณานะ) ซึ่งเป็นตลาดรวม Theme wordpress สวยๆ แจ่มๆ เยอะมาก เรียกว่าซื้อจากเว็บนี้ คุณจะได้ทั้ง theme และ plugin ด้วย — ทำให้ไม่ต้องเสียเวลากับ HTML + CSS เพราะสามารถตั้งค่าจาก Theme ได้ (ถ้ายิ่ง theme เสียตัง ยิ่งไม่ต้องลงโค้ดเลย) ทำให้ลดเวลา เพิ่มความสะดวก แถมเว็บออกมาดูสวยดั่งใจหลายๆ คน
  • มีระบบ Plugin นี่ถือเป็นจุดที่หลายๆ คนเลือกจะใช้ wordpress มาทำเว็บ เพราะด้วยโคตร plugin ฟรีที่มีเยอะ จนเลือกไม่หวาดไม่ไหว (หรืออาจจะเสียตังค์สักนิด เพื่อ version pro) อยากได้ฟีเจอร์อะไรที่ wordpress ไม่มี แค่ไปติดตั้ง plugin ก็เป็นอันว่าไม่ต้องเหนื่อยเลย เช่น ระบบตระกร้าสินค้า, ระบบสำรองข้อมูล, ระบบเว็บบอร์ด และอื่นๆ มากมาย
  • ได้รับการ update เรื่อยๆ เพราะด้วยมีคนใช้เยอะมากๆ ทั้งเปิดเป็น open-source อีก ยิ่งทำให้เกิดการพัฒนาต่างๆ ไปมากมาย

หลายคนคิดในใจ ตัวนี้มีของเยอะขนาดนี้ทำไม่ได้ใช้ ส่วนตัวผมเองเป็นคนคลั่งใคล้การเขียน markdown เป็นที่สุด ส่วนใครไม่รู้จักว่าคืออะไร ลองอ่านบล็อกนี้ได้เลย
https://medium.com/devahoy/introduction-to-markdown-fdc7ba5d33b5

ดังนั้นผมจึงใช้ plugin markdown เพื่อใช้ในการเขียนบทความต่างๆ ในเว็บ ถามว่ามันใช้ได้ไหม plugin ตัวนั้น ก็ไม่ได้แย่นะ ดีเลยละ (แล้วจะบ่นทำไมมม) 
มาถึงเหตุผลจริงๆ ที่เลิกใช้ นั่นก็คือผมต้องการ tools ที่เรียบง่ายกว่านี้ (นี่ยังไม่เรียบง่ายอีกหรือ) คือจริงอยู่ wordpress อาจจะไม่ใช่ cms ซับซ้อนเท่า joomla หรือตัวอื่นๆ แต่ด้วยมันยังต้องใช้ mysql (ระบบฐานข้อมูล) ซึ่งหมายความว่า ผมต้องดูแลฐานข้อมูลเว็บด้วย ความตั้งใจจริง ของผมคือเว็บที่เขียนบทความได้ + แปะแสดงโค้ดได ้และเบาสุดๆ ตัวเลือกต่อมาที่ผมเคยใช้คือ Ghost CMS

2.Ghost CMS ตัวนี่ตรงใจผมที่สุดแล้ว ด้วยความที่มันเกิดมาเพื่อเขียนบทความ + แปะโค้ดบนบทความ แค่นั่นเลยที่มันทำได้ (อาจจะมีระบบเปลี่ยน theme เล็กน้อย) ซึ่งด้วยความที่ ghost มีแค่นี่ ทำให้เว็บผมโคตรเบา และเร็วมากๆ โดย ghost เป็น CMS เหมือนกับ wordpress เพียงแต่เราไม่จำเป็นต้องใช้ mysql ก็ได้ กล่าวคือตัว ghost ใช้ sqlite เป็นฐานข้อมูลแทนนั่นเอง (ตอนนั้นผมใช้ ghost v. 1) และร้องรับการเขียน markdown ตั้งแต่แรก เรียกว่าโคตรโดนใจมาก ทั้ง theme ที่ให้มาตอนแรกโคตร clean และสวย จนผมคิดว่าจะใช้ ghost ไปพักใหญ่ๆ เลยละ

Ghost CMS 1.0 ภาพจาก https://blog.ghost.org/content/images/2017/07/editor.png

แล้วก็คงสงสัยอีก จะเปลี่ยนทำไมนั้นมันดีขนาดนี้ โดนใจขนาดนั้น กาลเวลายังเปลี่ยนไป นับประสาอะไรกับความคิดคน ใช่แล้วครับ ด้วยระยะเวลาที่ผ่านมา ผมก็ต้องการหาประสบการณ์ใหม่ๆ ในการพัฒนาตนเอง หนึ่งในนั่นคือก้าวไปในโลกที่เราไม่เคยคิดจะเข้าไปเลย นั่นคือโลกของภาษาใหม่ๆ (หมายถึงภาษา programming อื่นๆ ที่ผมไม่เคยใช้) จึงเป็นที่มาของการใช้ Middleman

3.Middleman เป็น site static generator เขียนด้วยภาษา ruby ใช่แล้วครับ ภาษาที่ผมยังไม่เคยเขียนเลย ตอนนั้นคือ ruby , ผมประทับใจการลักษณะของ ruby นะครับ (ภาษาอะไรก็ตามที่ไม่ต้องสนใจ semi-colon ; ผมจะ happy ที่สุด) โดย ruby ว่าไปก็เคยได้รับความนิยมในช่วงๆ นึง และถึงกระแส javascript จะครองโลกในช่วงนี้ก็ตาม 
แต่ผมก็ไม่ได้ใช้ middleman ในทำเว็บจริง กล่าวคือแค่ลองเล่น เฉยๆ และก็หยุดการทำเว็บ naijab.com ไปหลายเดือน

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

react.js นั่นเป็น modern stack ที่ได้รับกล่าวขานในชื่อ MERN Stack , ซึ่ง web dev หรือ frontend หลายคนคงจะได้ยินชื่อ และลองใช้กันบ้าง เอาละคร่าวๆ react.js เป็น javascript library ตัวนึงที่นำมาทำส่วนของ view หรือ frontend ของเว็บได้ โดย concept ใหญ่ๆ เลยคือการทำเว็บในลักษณะ component base คือแบ่งส่วนต่างๆ ของเว็บเป็น component ย่อยๆ แล้วนำมาประกอบกัน แล้วโยนข้อมูลเข้าได้ ก็จะ render ออกมาเป็น html ในที่สุด (เร็วๆ ผมจะมีซีรีย์บทความ react.js รอติดตามกันด้วยนะครับ)

ก็น่าจะสงสัยอีก ทำไมต้องแบ่งส่วนต่างๆ เป็นส่วนเล็กด้วย สาเหตุคือถ้าเราแบ่งแบบที่ว่า จะทำให้เราสามารถ re-use ตัว component นั้นได้ เช่นผมทำปุ่มไว้แล้ว ใครอยากจะใช้ปุ่ม ก็เรียกปุ่มไปใช้ ส่วนถ้าผมจะปุ่มก็แก้ที่ไฟล์เดียว เห็นไหมครับมันมีข้อดีในตัวของมันเอง

ถ้ามีข้อดีแล้ว react เองก็มีข้อเสีย คือด้วยความที่เป็น javascript ซึ่งจะทำงานบน browser หรือ client side (ยกเว้นพวก node.js อันนั้นทำงานบน server-side ได้) ทำให้มีปัญหาเกี่ยวกับการทำ SEO หรือพูดให้ง่ายขึ้น ถ้า google bot เข้ามาอ่านเว็บเราแล้ว จะทำให้โอกาสติด google นั่นยากนั้นเองครับ จึงเกิดเทคนิค SSR (Server-side-rendering) กล่าวคือใช้ node.js มาช่วยในการทำ Server-side เพื่อประมวลผล เรื่องการทำ SEO ได้ Framework ที่ออกมาแก้ปัญหานี้ และได้รับความนิยมมากๆ นั่นคือ

Next.js เป็น React Framework ที่มีของแถม plugin และการทำ SSR ให้มาด้วย ทำให้คนทำเว็บด้วย React ก็สบายขึ้นไปอีก ถึงอย่างนั้นผมก็เลือกไม่ใช้อยู่ดีในส่วนของการทำเว็บบล็อกของผม เพราะด้วยที่ยังจำเป็นต้องใช้ node.js ในการ run และเวลา dev มันจะอืดมากๆ เวลาที่ยังไม่ build (ถามว่าทำไมถึงรู้ เพราะตอนใช้กับโปรเจกลูกค้า กว่าจะสลับไปมาระหว่างหน้าตอน dev มันอืดสุดๆ) หลายคนก็รับได้ในเงื่อนไขนี้ แต่อย่าลืมนะว่าผมยังต้องการ การเขียนบทความด้วย markdown + แปะโค้ดได้ ผมจึงมองหาตัวเลือกอื่นแทน ที่เป็น react + SSR+ markdown + code snippet

ใช่แล้วครับตามหัวข้อบล็อกนี้เลย นั้นก็คือ Gatsby.js

ขอบคุณภาพจาก http://stayregular.net/content/2-blog/20180416-deploy-a-static-react-blog-using-gatsbyjs-and-github/gatsbyjs-deploy-blog%400.5x.jpg

Gatsby.js

เป็น React Framework สำหรับการทำ site static generator โดยเฉพาะเลย กล่าวคือพอ build ออกมาแล้ว เราจะได้ไฟล์ html + css + javascript ธรรมดาออกมาไป deploy หลายๆ เว็บที่รองรับได้เลย เช่น hosting ธรรมดา, firebase, github pages หรือ netlify อื่นๆ อีกหลายเว็บ

ทำให้ gatsby ไม่จำเป็นต้องลง node.js เพื่อ run บน server เลย เพราะได้ไฟล์ build เป็น static file นั้นเอง โดยตอนนี้ naijab.com ใช้ github pages เป็น hosting นั้นเอง ทำให้เว็บเป็น static โดยสมบูรณ์ และเบาๆ มาก ส่วนเวลาจะ deploy แค่สั่ง build แล้ว deploy ขึ้น github pages ก็เป็นอันจบในกระบวนการ ไม่ต้องไปทำ ci ใดๆ เลยด้วยซ้ำ ทำให้ผมยิ่งชอบวิธีนี้เป็นที่สุด และเว็บก็มีประสิทธิภาพตามที่ต้องการ โอเคโปรโมทเยอะละ มาต่อเลยที่ feature ของ gatsby กันเลยครับ

Core feature ของ gatsby.js หลักๆ ที่รองรับ

ภาพจาก https://scotch-res.cloudinary.com/image/upload/dpr_3,w_350,q_auto:good,f_auto/v1540817903/zjrxkwntrf0turc1c6f9.png
  • graphql โดย graphql เป็นหนึ่งใน open-source api pattern แบบใหม่จาก facebook นั่นเอง สั่นๆ คือ จากปกติที่เราเขียน rest api กันจากฝั่ง backend และให้ frontend เขียนเรียกใช้ path ที่กำหนด แต่ graphql จะเป็นฝั่ง frontend เองที่จะกำหนดว่าต้องการข้อมูลอะไรบ้าง ส่วน backend มีหน้าที่ระบุสิ่งที่สามารถเรียกได้ หรือฟังค์ชั่นสำหรับการแก้ไขต่างๆ ที่เข้าถึงได้ ทำให้โลกของการเขียน api เปลี่ยนเลยก็ว่าได้ ดังนั้นตัวนี้เป็นตัวที่น่าสนใจสุดในช่วงไม่กี่ปีที่ผ่านมา ถ้าสนใจก็ตามไปอ่านที่เว็บ official โลด , ตอนแรกผมเองก็ยังไม่ชินกับการใช้ graphql เลย แต่หลังๆ เริ่มติดใจที่มันตอบโจทย์สาย frontend อย่างผมมาก เช่น ต้องการข้อมูลแค่นี้ ทำไมต้องเรียก path อะไรเยอะแยะเต็มไปหมด แถมเวลา
ภาพจาก https://i.github-camo.com/49795e7aa84c3510ca7a56c903d1c3ecb42e896d/68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f3337383032332f31303031333038362f32346361643233652d363134392d313165352d393065362d3636333030393231303231382e706e67
  • markdown เป็น feature สำคัญที่สุดที่ผมตัดสินใจเลือก gatsby เลยก็ว่าได้ ด้วยที่มี plugin รองรับโดยตรง ทำให้การเขียนเขียนไฟล์ markdown ง่ายยิ่งขึ้น กล่าวคือผมแค่เขียน markdown (.md โดยตรง) เดี๋ยว gatsby จะทำการแปลงเป็น html ออกมาให้เลย

- code-snippet ตัวนี้ก็เป็นส่วนที่ผมต้องการเช่นกัน ในการทำเว็บ เพราะด้วยความที่เว็บเน้นการเขียนแชร์เรื่อง programming จำเป็นอย่างมากกับการแปะโค้ดในบทความ ตอนแรกๆ ก็ใช้วิธีแคปรูป หรือใช้ gist แปะลงไป มันก็โอเคนะ ไม่ใช่ปัญหา แต่ด้วยที่เป็นของคนอื่น เราก็ปรับอะไรไม่ได้มาก เลยเลือกใช้ plugin ของ gatsby อย่าง gatsby-prismjs เป็นตัวที่รองรับการแปะโค้ด ลงไปใน markdown แล้ว prismjs จะทำการแสดงผลโค้ดให้เรา แบบสวยๆ

  • image optimize อันนี้ก็เป็น plugin ที่เจ๋งสุดๆ เพราะการทำเว็บ ต้องการ optimize ทำให้เว็บเร็วที่สุดเท่าที่เป็นไปได้ เพราะส่วนใหญ่ user ทุกวันนี้ส่วนใหญ่เล่นผ่าน smart devices ต่างๆ เช่น smartphone, tablet บางคนอาจจะใช้ 3G, 4G ว่ากันไป เลยยิ่งต้องทำให้ต้องลดขนาดรูปให้เหมาะสม เพื่อลดปริมาณที่ต้องใช้เน็ตในการโหลด (ใครเคยเน็ตหมดโควต้าคงจะเข้าใจ TT) โดย gatsby-image สามารถที่จะปรับขนาดรูปตามที่เรากำหนด กำหนดการประมวลผลภาพก็ได้ เช่นให้ใช้ webp ถ้า browser รองรับ, การทำ image responsive โดยจะ generate ภาพของมาหลายๆ ขนาด เพื่อให้เหมาะสมต่ออุปกรณ์ที่กำลังเปิดอยู่ ยิ่งทำให้ประสิทธิภาพเว็บดีขึ้นมากๆ
ภาพจาก http://s3.amazonaws.com/prod.word/images/747/original.png?1389640479
  • sass ตัวต่อมาคือมี plugin ที่ทำให้รองรับการเขียน sass ซึ่งส่วนตัวผมเลือกที่จะใช้ sass เพราะด้วยความที่มันเป็น css-pre-processor คือสามารถเขียนตัวแปร, for loop สุดท้ายจะ render เป็น css ตามปกติให้ เรียกว่าสะดวกต่อการเขียนเว็บมากๆ เช่น ต้องการจะแก้ไขค่าสี ก็แค่แก้ที่ตัวแปรตัวเดียว
  • SSR (Server-Side-Rendering) เป็นอีกอย่างที่ผมชอบมาก คือด้วยความที่เขียนบทความ ก็ย่อมอยากจะให้คนเข้ามาอ่านเยอะๆ นึงในวิธีก็คือทำให้ Search Engine ต่างๆ มาเก็บข้อมูลเว็บเราได้สะดวก ดังนั้นการทำ SSR จึงจำเป็นมากนั่นเอง

มาดูโครงสร้างของ Gatsby.js กันเล็กน้อย (ดูโค้ดประกอบได้ที่ลิงค์ล่างสุดบทความนะครับ ใน branch develop) จะพบว่ามี folder หลักๆ ดังนี้

  • content เป็น folder เป็น content ต่างๆ ของเว็บไซต์
    — assets จะเป็นส่วนของไฟล์รูปภาพอื่นๆ เพิ่มเติม หรือ css, sass
     — blog จะเป็นที่เก็บไฟล์ markdown บทความต่างๆ ของเว็บ
  • src จะเก็บตัว source code หลักๆ ของ project , โค้ด react.js ก็อยู่ในนี้เลยครับ
     — components จะเก็บ react component 
     — pages เก็บหน้าต่างๆ เพิ่มเติม นอกเหนือจากโพสหรือบทความ เช่น 404 page
     — templates ตรงนี้จะเก็บ file template ที่ใช้ generate หน้าบทความนั่นเองครับ
  • ไฟล์สำคัญ
     — gatsby-browser.js จะเป็นไฟล์สำหรับ import global css เช่น bootstrap
     — gatsby-config.js จะเก็บการตั้งค่าเว็บไซต์เบื้องต้น และจัดการ plugin ของ gatsby 
     — gatsby-node.js เป็นส่วนของการเขียน function generate หน้าต่างๆ เช่น การดึง graphql ที่ไปอ่าน markdown แล้วสร้างเป็นหน้าบทความต่างๆ โดยใช้ template ที่มีอยู่

จากข้างต้นจะเห็นได้ว่า gatsby ที่จะวางโครงโปรเจคแบบเข้าใจง่าย และไม่ซับซ้อนมากนัก แต่อาจจะไปปวดหัวกับ graphql แทน 555+ และสุดท้ายใน branch master จะเป็น branch ที่มีแต่ไฟล์ build เสร็จแล้วของ gatsby ก็คือไฟล์ static ที่ผมเคยกล่าวถึงนั้นเอง

สรุปเลยละกัน ว่าตอนนี้ naijab.com เสร็จแล้ว โดยบทความจะเริ่มลงเร็วๆ นี้ แล้วพบกันใหม่ในบทความหน้าครับ :D

ปล. ส่วนจะดู source code ตามไปดูกันได้ที่ https://github.com/naijab/naijab.github.io