Hugo + Firebase

เป็น Deveploper มาก็นานทำงานมาไม่ว่าจะเป็นงานบริษัท งานฟรีแลนซ์ หรือจะเป็นโปรเจ็คของตัวเองก็ดี แต่เพิ่งมานึกได้ว่าตอนนี้เรายังไม่มีเว็บ portfolio เป็นของตัวเองเลย

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

หลังจากการเซาะแสวงหาความรู้ใน internet ได้ซักพัก ก็ได้ข้อสรุป Hugo + Firebase เป็นบทสรุปที่ลงตัวสำหรับผม ณ ตอนนี้เป็นที่สุด

ทำไมต้อง Hugo + Firebase

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

1. โหลดเร็ว
2. ง่ายต่อการเขียน blog แค่ Markdown พอ
3. ง่ายต่อการพัฒนา
4. ง่ายต่อการบำรุงดูแลรักษาและจัดการตัวโค้ด
5. ไม่ต้องปวดหัวเรื่องระบบความปลอดภัย
6. Free hosting จัดการง่าย

นั่นคือที่มาของการเลือกเครื่องมือ ซึ่งนั่นก็คือ Hugo Static Site Generators + Firebase Hosting ในครั้งนี้

ทำไมต้อง Hugo

เหตุผลหลักๆที่เลือกใช้ Hugo

• ความเร็วในการคอมไพล์ html
• ความเรียบง่ายของโครงสร้างในส่วนของการจัดการโปรเจ็ค
• ง่ายต่อการพัฒนาเช่นเมื่อเราทำการอัพเดต Theme เจ้า Hugo ก็จะทำการ refresh อัพเดตให้เราโดยอัตโนมัติเลย
• เอกสารที่เข้าใจง่าย

การติดตั้งในครั้งนี้ผมทำการติดตั้งในเครื่อง Mac หากว่าใครใช้ Window หรือ Linux ก็เข้าไปดูวิธีติดตั้งได้ใน Install Hugo

ติดตั้ง Hugo

เริ่มกันเลย พร้อมแล้วก็เปิด iTerm หรือ Mac Terminal ขึ้นมา พิมพ์คำสั่ง

# ติดตั้ง Hugo ด้วย Homebrew
brew install hugo

** หากใครยังไม่ได้ลง Homebrew ก็ให้ติดตั้งก่อนโดยพิมพ์คำสั่ง

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`

หลังจากติดตั้งเรียบร้อยก็เช็คดูว่าการติดตั้งเรียบร้อยดีหรือไม่

# เรียกดูเวอร์ชั่นของ hugo ที่ทำการติดตั้ง
hugo version

เพียงเท่านี้เราก็จะได้ Hugo มาไว้กำมือของเราแล้ว

สร้างเว็บด้วย Hugo

พิมพ์คำสั่งเพื่อเริ่มสร้างโปรเจ็คใหม่กันเลย

hugo new site dejo

ตอนนี้เราก็จะได้โปรเจ็คที่อยู่ในโฟลเดอร์ที่มีชื่อว่า dejo

เลือก Theme สำหรับโปรเจ็ค

Theme สำหรับ Hugo มีให้เลือกเยอะมาก เราสามารถเข้าไปดูได้จาก https://themes.gohugo.io/ สำหรับ Theme ที่เลือกมาใช้ในบทความนี้มีชื่อว่า Hyde Theme

# เข้ามายังโฟลเดอร์ themes
cd dejo/themes/

# โคลน Theme ที่ชื่อว่า hyde
git clone https://github.com/spf13/hyde.git

# ทำการเพิ่ม Hyde Theme เข้าไปยัง config.toml
echo 'theme = "Hyde"' >> config.toml

เท่านี้เราก็ได้ theme สวยๆมาใช้แล้ว

เพิ่มบทความให้กับ Blog ของเรา

# ทำการสร้างไฟล์ที่มีขื่อว่า first-post.md ในโฟลเดอร์ posts
hugo new posts/first-post.md

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

# สร้าง server จำลองพร้อมทั้งเปิดใช้งาน draft โหมด
hugo server -D

ส่วนที่เหลือก็อยู่ที่การตกแต่งต่อยอดเว็บไซต์ให้เป็นไปในสไตล์ที่เราชอบ และเพิ่มเนื้อหาของเว็บไซต์ของเรา

ทำไมต้อง Firebase

เหตุผลหลักๆที่ผมเลือกใช้ Firebase ก็เพราะ

• ง่ายต่อการเพิ่ม Custom domain อีกทั้งยังมี SSL ให้เราใช้ฟรีอีกด้วย
• ฟรี Worldwide CDN edge servers

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

ขั้นตอนการติดตั้งและใช้งาน

หลังจากทำการสร้างโปรเจ็คใน Firebase Console เสร็จเรียบร้อยแล้ว เราก็ต้องทำการติดตั้ง Firebase CLI Tool ซึ่งเราจำเป็นจะต้องทำการติดตั้ง Node.js ให้เรียบร้อยเสียก่อน หลังจากที่เราติดตั้ง Node.js เรียบร้อยแล้วก็ให้เราพิมพ์คำสั่ง

# ติดตั้ง firebase tools ด้วย Node.js
npm install -g firebase-tools

ต่อไปเราก็ต้องทำการเชื่อมต่อ Firebase Tools เข้ากับบัญชี Google ของเราด้วยคำสั่ง

firebase login

คำสั่งนี้จะทำการเปิดเบราเซอร์เพื่อให้เราเลือกบัญชีและทำการล็อกอิน เราสามารถใช้คำสั่ง firebase logout เพื่อทำการล็อกเอาท์ในกรณีที่เราทำการล็อกอินผิดบัญชี

ใช้คำสั่ง firebase list เพื่อดูรายชื่อทั้งหมดของโปรเจ็คใน Firsbase project ของเรา โดยที่รายชื่อทั้งหมดควรที่จะเหมือนกับรายชื่อโปรเจ็คที่อยู่ใน Firebase console ของเรา

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

firebase init

จากตรงนี้

• เลือก Hosting ใน feature question
• เลือก โปรเจ็คที่เราต้องการ ที่เพิ่งสร้างใน Firebase Console
• เลือก default สำหรับดาต้าเบส rules file
• เลือก default สำหรับ publish directory (public)
• เลือก “No” ถ้าเราทำการ deploy a single-page app, แต่สำหรับผมเลือก "Yes"

จากนั้นเราจะได้ ไฟล์ใหม่ 2 ไฟล์อยู่ในโปรเจ็คโฟลเดอร์คือ firebase.json และ .firebaserc

เราสามารถ ignore .firebaserc ใน git ได้เพราะไฟล์ตัวนี้มีไว้เพียงเพื่อเก็บข้อมูลว่าโปรเจ็คที่เราใช้อยู่นั้น ใช้ firebase tool อะไรบ้าง ในส่วนของไฟล์ firebase.json นั้นเอาไว้เพื่อทำการตั้งค่า Hosting

{
  "hosting": {
    "public": "public",
    "ignore": [
      "**/.*",
      "firebase.json",
    ],
  }
}

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

firebase deploy

จากนั้นก็รอ... เมื่อการโอนย้ายเสร็จสิ้น เพียงเท่านี้เราก็สามารถเข้าไปดูเว็บไซต์ใหม่ของเราด้วย URL ที่ได้จากหน้า Firebase Console ในส่วนของ Hosting ได้เลย

ยังไงต่อล่ะทีนี้

ในบทความนี้เราพูดถึงเรื่องของพื้นฐานการติดตั้ง Hugo และการเซ็ตอัพ Firebase hosting เพื่อการ deploy เท่านั้น

ในส่วนตัวของผม นอกเหนือจากการตกแต่งและเพิ่มเนื้อหา ขั้นตอนต่อไปก็เห็นจะเป็น

• การผูกโดเมนเข้ากับ Firebase hosting
• การเซ็ตค่า header ต่างๆให้กับโปรเจ็ค
• การทำ continuous integration

อู้หู!! เหลืออีกหลายอย่างเลยกว่าจะเสร็จตามต้องการ