ย้ายบล็อกจาก Blogger ไป Hugo - Part 1

สวัสดีครับ ตอนนี้ผมได้ย้ายบล็อกจาก Blogger ไปใช้ Hugo เรียบร้อยแล้ว เลยอยากจะมาเล่าให้ฟังว่าได้ทำอะไรไปบ้าง

ทำไมถึงย้าย?

บล็อกเดิมตั้งแต่เปิดมาก็ใช้ Blogger มาโดยตลอดไม่เคยย้ายออกไปที่ไหนเลย ด้วยความที่ว่ามันใช้ได้ฟรี + ใช้ง่ายเลยเลือกใช้ตัวนี้มาตั้งแต่ตอนนั้น

ถึงอย่างนั้นการใช้ Blogger ก็ยังมีปัญหาอยู่

• เขียนธีมเองยาก ธีมที่ให้มามันไม่ค่อยถูกใจเท่าไร เลยต้องเขียนธีมขึ้นมาใช้เอง แต่ด้วยความที่ธีมต้องเขียนด้วย XML ฉบับพิเศษของ Blogger เอง ทำให้จะแก้แต่ละทีต้องไปตบตีกับ XML สุดพิเศษนี้ที่รวม HTML + JS + CSS ไว้ด้วยกันในไฟล์เดียว! แถมหน้าแต่ละหน้ามีหน้าตาไม่เหมือนกันก็ต้องเขียนรวมไว้ในไฟล์เดียว แล้วเขียนเงื่อนไขครอบการแสดงผลเอา
• เว็บบวม นอกจาก js และ css ที่เราใส่เองแล้ว ยังมีของจาก Blogger ที่แปะเพิ่มเข้ามา แถมเอาออกไม่ได้ด้วย ทำให้เว็บเราโหลดช้าขึ้นโดยไม่จำเป็น
• ไม่ได้เป็นเจ้าของแพลตฟอร์ม ไม่ว่าจะเป็น Blogger, Medium, Tumblr, Facebook หรือ อื่นๆ ล้วนแล้วแต่เป็นแพลตฟอร์มที่เราใช้บริการอยู่ แพลตฟอร์มเป็นคนกำหนดว่าอะไรควรอยู่อะไรไม่ควรอยู่ อย่างที่ Facebook Page โดนลด Reach ลง หรือถ้าเกิดวันหนึ่ง Medium ตัดสินใจให้มีป็อบอัพโฆษาในเว็บ เราก็ทำอะไรไม่ได้ เราเป็นแค่ผู้ใช้บริการ เราไม่ได้เป็นเจ้าของแพลตฟอร์ม
• ความเป็นส่วนตัวของผู้อ่าน ทุกวันนี้แพลตฟอร์มต่างๆ เก็บข้อมูลและรู้เรื่องราวเกี่ยวกับเราเยอะเกินไป แน่นอนว่าสำหรับแพลตฟอร์มฝากบล็อกเองก็มีการเก็บข้อมูลอยู่แล้ว ผู้ที่เข้ามาอ่านบล็อกเราก็จะโดนเก็บข้อมูลไปด้วย ถ้าผมอยากลดการเก็บข้อมูลพวกนี้ลงหรือไม่เก็บเลย ผมจะทำอะไรแบบนั้นไม่ได้ถ้ายังใช้แพลตฟอร์มคนอื่นอยู่

นั้นเลยเป็นที่มาว่าทำไมถึงอยากย้ายบล็อกออกจาก Blogger ไปไว้ที่อื่นที่

Self-Hosted

ถ้าไม่ฝากบล็อกไว้กับแพลตฟอร์มออนไลน์เราก็ต้องเช่าเซิฟเวอร์มาเปิดบล็อกเอง ตัวระบบบล็อกเราอาจจะเขียนขึ้นมาเองด้วย PHP, NodeJS หรือภาษาอื่นๆ ตามแต่ถนัด ไม่ก็อาจจะใช้ CMS ที่มีอยู่แล้วไม่ว่าจะเป็น WordPress หรือ Ghost สอง CMS ยอดนิยมสำหรับทำบล็อก

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

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

Static Site Generator

เราจะคอยเรนเดอร์หน้าเว็บไซต์ทุกครั้งที่มีคนเข้าเว็บไปทำไมในเมื่อเนื้อหาก็เหมือนเดิม นานทีปีหนจะอัพเดทที…

ทำไมเราเรนเดอร์ทีเดียวแล้วเก็บไว้ใช้ตลอดละ?

Static Site Generator หรือ SSG จึงเกิดมาเพื่อแก้ปัญหานี้

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

ข้อดี

• ไม่ต้องมี Database Management System (DBMS) ในการจัดการข้อมูล ทุกอย่างเป็นไฟล์ Text-based ธรรมดาใช้อะไรแก้ก็ได้
• ประหยัดค่าใช้จ่าย ไม่ต้องเช่าเซิฟแรงๆ สำหรับประมวลข้อมูลจาก Database ขอแค่ฝากไฟล์ HTML ได้ก็พอแล้ว
• แบล็คอัพข้อมูลง่าย ทุกอย่างถูกเก็บเป็นไฟล์ในเครื่องเรา จะเก็บลง Flash Drive, External Drive หรือ Cloud ก็ทำได้หมดเลย
• แก้เนื้อหาด้วยโปรแกรมอะไรก็ได้ ทุกอย่างเราเก็บเป็นไฟล์แบบ Text-based อยู่แล้ว หมายความว่าเวลาแก้ไขเนื้อหาก็แค่ใช้โปรแกรมที่เปิดไฟล์ Text ได้อย่าง Notepad, VSCode, Vim หรืออื่นๆ ได้ตามที่ต้องการเลย
• จัดฟอร์แมตข้อความได้ในตัว พอเราเขียนบล็อกเป็นไฟล์ Markdown เราสามารถทำพวกตัวหนา, ตัวเอียง, หัวข้อ ได้เอง ไม่ได้ขึ้นอยู่กับโปรแกรมที่ใช้เปิด
• เขียนบล็อกได้แม้ออฟไลน์อยู่ พอทุกอย่างมันเป็นไฟล์ในเครื่องเราอยู่แล้วก็ไม่จำเป็นต้องต่อเน็ตอีกต่อไป (ตอนอัพขึ้นเซิฟเวอร์ยังต้องต่อเน็ตอยู่)

ข้อเสีย

• ต้องเก็บข้อมูลเอง ถ้าเป็นบล็อกปกติคือข้อมูลเราทุกอย่างถูกเก็บไว้บนเซิฟเวอร์อยู่แล้วจะย้ายไปทำเครื่องอื่นก็ไม่มีปัญหา แต่พอเป็น SSG ที่ข้อมูลทุกอย่างถูกเก็บเป็นไฟล์อยู่ในเครื่องเรา เวลาย้ายเครื่องเราต้องย้ายข้อมูลพวกนี้ไปด้วยไม่งั้นทำบล็อกต่อจากเดิมไม่ได้
• ต้องรัน SSG ใหม่ทุกครั้งที่มีการอัพเดทเนื้อหาหรือปรับดีไซน์เว็บไซต์ ทำให้ไม่ค่อยเหมาะกับเว็บไซต์ที่มีการอัพเดทเนื้อหาบ่อยๆ
• นอกจากต้องรัน SSG ทุกครั้งแล้ว เรายังต้องคอยอัพไฟล์ HTML ขึ้นไปบนเซิฟเวอร์ใหม่ทุกครั้งด้วย

พอมาเทียบข้อดีกับข้อเสียแล้ว สำหรับบล็อกผมข้อเสียดูจะไม่ค่อยมีผลสักเท่าไร ทั้งในเรื่องที่ต้องคอยเก็บข้อมูลเองหรือค่อยรัน SSG และอัพขึ้นเซิฟเวอร์ทุกครั้ง ซึ่งเดี๋ยวจะมีบอกครับว่าทำไมส่วนนี้ผมถึงไม่มีปัญหา

Hugo

ในปัจจุบัน SSG มีตัวเลือกให้ใช้อยู่หลายตัว ไม่ว่าจะเป็น Jekyll, Hexo, Middleman, Gastsby, Gridsome และอื่นๆ อีกมากมาย ใครสนใจแนะนำให้ลองไปเช็คดูที่ Jamstack ครับ เขาทำลิตส์รวมไว้ให้หมดแล้ว อีกทั้งยังมีแนะนำการใช้ SSG และประเด็นอื่นๆ ที่เกี่ยวข้องอีกด้วย

สำหรับใครที่เขียน React อยู่แล้วแนะนำให้ลองไปดู Gastsby ครับ หรือถ้าเขียน Vue ก็ Gridsome

แม้ตัวผมจะเขียน React กับ Vue เป็นประจำ แต่สำหรับบล็อกนี้ผมมาจบที่ Hugo ครับ ด้วยความที่บล็อกผมไม่ได้ต้องการอะไรมาก ไม่ได้ทำลูกเล่นอะไรในเว็บอยู่แล้วเลยไม่จำเป็นต้องใช้ UI Framework ตัวไหน ขออะไรที่ใช้ได้ง่ายและเร็วก็พอแล้ว ซึ่ง Hugo ตอบโจทย์นี้ทั้งหมด

• เร็ว Hugo เขียนด้วย Go เลยทำงานเร็วมากเมื่อเทียบกับ SSG ตัวอื่นๆ ไฟล์เยอะแค่ไหนก็ยังเร็วอยู่ ในอนาคตถ้าเกิดเรามีโพสต์มากถึง 1000 โพสต์ก็รันเสร็จได้ในไม่กี่วินาที
• ครบจบในตัว อยากทำ Post-process เหรอทำได้เลย, อยากเขียน SASS / SCSS เหรอเขียนได้เลย, จะทำ minify หรือ bundle ก็ยังได้ ไม่ต้องลง node modules หรืออะไรเลย เรียกได้ว่ามีทุกอย่างครบจบในตัว
• ใช้ได้เลย โหลดมาลงแล้วใช้ได้เลย ไม่มี dependency ไม่มี node_modules ไม่ต้องลงอะไรเพิ่ม ก๊อปใส่ Flash drive ไปใช้ที่เครื่องอื่นยังได้เลยครับ

Git

สำหรับใครที่อ่านบทความนี้แล้วอาจจะยังไม่รู้ว่า Git คืออะไร ถ้าจะให้พูดก็คือเครื่องมือที่เหล่านักพัฒนาซอฟต์แวร์ใช้ในการเก็บบันทึกการเปลี่ยนแปลงของไฟล์ซอร์สโค้ด (Version control) อารมณ์ประมาณประวัติการแก้ไขใน Google docs อะครับ ที่เราสามารถย้อนกลับไปดูประวัติในอดีตได้ว่าใครแก้อะไรตรงไหนไปบ้าง แต่ของ Git นี้จะ advance กว่าและมีคุณสมบัติอื่นๆ อีกมากครับ

ที่นี้พอเราใช้ SSG ที่เก็บทุกอย่างเป็นไฟล์เลยเอาไปใช้กับ Version control อย่าง Git ได้! ซึ่งก็จะได้ประโยชน์ของ Git มาด้วย ไม่ว่าจะเป็นประวัติการแก้ไข การเก็บข้อมูลแบบกระจายศูนย์เอาไปอัพทิ้งไว้ที่ git provider ไหนก็ได้ไม่ต้องกลัวโดนล็อคอยู่บริการของเจ้าไหน ไม่ต้องกลัวข้อมูลจะหายเพราะแบล๊คอัพได้หลายที่ ย้ายเครื่องก็แค่ clone repo ลงมาก็ทำงานต่อได้เลย หรือถ้าจะให้คนอื่นมาเขียนบล็อกด้วยก็ซิงค์ข้อมูลกันง่ายมากๆ

Netlify

Netlify เป็นบริการฝาก Static Website ไว้บน CDN ทั่วโลก ซึ่งไม่เหมือนกับการเช่าเซิฟเวอร์มาเปิดบล็อกทั่วไปนะครับ เราไม่ได้ยุ่งในส่วนเซิฟเวอร์เลยด้วยความที่เป็น Static Website ด้วยไม่ต้องใช้เซิฟเวอร์ในการประมวลผลอยู่แล้ว Netlify เลยเป็นคนจัดการแลดูเองทั้งหมด หน้าที่ของเราคืออัพโหลดไฟล์เว็บเราให้ Netlify ก็พอแล้วเดี๋ยวที่เหลือปล่อยให้ Netlify เป็นคนจัดการ

ความเจ๋งอย่างนึงคือเราสามารถเชื่อม Git repo จาก Github, Gitlab หรือ Bitbucket เข้ากับ Netlify ได้ ทุก ๆ ครั้งที่มี commit ใหม่ push ขึ้นไป Netlify ก็จะดึงโค้ดใน repo ไปอัพโหลดขึ้น CDN ให้เราให้อัตโนมัติ นอกจากนี้เรายังตั้งค่าให้ Netlify รันตัว SSG และให้เอาผลลัพธ์จาก SSG อัพขึ้นไปแทนโค้ดใน repo ได้อีกด้วย ตรงนี้เองทำให้เราแค่เขียนบทความเป็น Markdown ไฟล์เก็บไว้ใน repo กับไฟล์ template อีกนิดหน่อย แล้วเดี๋ยวที่เหลือปล่อยให้ Netlfiy เป็นคนจัดการ เราเลยไม่ต้องมารัน SSG ใหม่เองทุกครั้งที่จะอัพเดทเนื้อหา

ตัว Netlify เองใช้ได้ฟรีแบบจำกัดแบนด์วิดท์ (Bandwith) 100GB/เดือน และจำกัดเวลาบิ้ว (ฺBuild time) ที่ 300 นาที/เดือน แต่เสียเงินเพื่ออัพเกรดเพิ่มได้ สำหรับบล็อกผมเองเท่านี้ถือว่าเพียงพอแล้วครับ

พอเอาทุกอย่างมารวมกัน Hugo + Git + Netlify นี้เรียกได้สมบูรณ์แบบสุดๆ ไปเลยครับ ที่สำคัญคือฟรีไม่มีค่าใช้จ่ายอะไรเลย (ไม่นับค่าโดเมนเว็บไซต์นะครับ อันนั้นยังไงก็ต้องเสียอยู่แล้ว)

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