Engineering & Systems

บันทึกการย้ายจาก Jekyll ไปยัง Hugo และ Github pages ไปเป็น Netlify

PG
Panu Guyson Lead Feline Infrastructure & Logistics Engineer
August 27, 2018

เนื่องจากได้ย้าย blog จาก Jekyll ไปใช้ Hugo แทน และย้าย host จาก Github pages ไปใช้ Netlify เลยบันทึกลำดับการย้ายระบบไว้ เผื่อเป็นประโยชน์ต่อคนที่จะลองใช้ Hugo

รู้จัก Hugo

Hugo เป็น Framework ในการสร้าง static site จาก markdown เหมือนกับ Jekyll โดย Hugo สร้างจาก golang และ Jekyll สร้างจาก ruby ทำให้ Hugo เคลมตัวเองว่าเป็น “The world’s fastest framework for building websites” และมี features ต่างๆมากมาย เช่น Content Management รายละเอียดดูได้ที่ https://gohugo.io/

เริ่มใช้ Hugo

สามารถดูได้จาก https://gohugo.io/getting-started/quick-start/

  1. install hugo จาก package management ได้เลย หรือจะ compile ก็ตามสะดวก โดยในที่นี้ใช้ pacman บน archlinux
    sudo pacman -S hugo
  2. สร้าง site ใหม่โดยใช้ hugo command
    hugo new site <site-folder>
  3. ลองสร้าง post โดยใช้ hugo command โดย post จะอยู่ใน folder content/post
    hugo new post/hello-hugo.md
  4. ลองรัน ที่ http://localhost:1313 {{< highlight bash >}} hugo server -D {{< /highlight >}}
  5. ติดตั้ง theme ที่ชอบ สามารถดูได้ที่ https://themes.gohugo.io

ย้าย content จาก Jekyll มายัง Hugo

สามารถใช้ hugo command ได้เลย โดยใส่ —force ไว้เนื่องจาก create hugo folder ไว้แล้ว {{< highlight bash >}} hugo import jekyll —force {{< /highlight >}}

Setup Netlify

  1. สมัคร Netlify และทำการ create site
  2. import repository และทำการ setup CI
  3. Netlify จะ detect ได้ว่าเป็น hugo โดยอัตโนมัติ
  4. ทำการ build
  5. setup custom domain และ SSL ถ้าต้องการ

ดูเพิ่มเติมได้ที่ https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

ข้อที่ต้องทำหลังจาก import จาก Jekyll

  • url ใน Jekyll จะใช้จาก filename ของ post แต่ใน Hugo จะใช้จาก Title เป็น default ต้องเพิ่ม alias เพื่อให้ 301 redirect มา {{< highlight yaml >}} aliases:

    • {{< /highlight >}} ดูเพิ่มเติมได้ที่ https://gohugo.io/content-management/urls/
  • Pages จะไม่ถูก import มาด้วย ต้องทำการสร้างใหม่ที่ Hugo และ copy มา

สรุปข้อดีในการย้ายมา Hugo และ Netlify

  • Hugo มี feature เพิ่มขึ้น ทั้งในด้านการทำ SEO และ Image processing
  • Hugo มีการจัด content ได้เป็นระเบียบกว่า
  • Hugo เร็วกว่าอย่างเห็นได้ชัด
  • ไม่ต้องลง Ruby ในเครื่อง
  • Netlify สามารถทำ Custom Domain พร้อม SSL จาก Let’s Encrypt ได้ ซึ่งข้อนี้ Github pages ทำไม่ได้

สรุปว่าย้ายจาก Jekyll มากันเถอะครับ!!!

hugonetlifyjekyllcodegolang