Menu

Subscribe

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

#hugo #netlify #jekyll #code #golang

เนื่องจากได้ย้าย 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 
       hugo server -D
  5. ติดตั้ง theme ที่ชอบ สามารถดูได้ที่ https://themes.gohugo.io

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

สามารถใช้ hugo command ได้เลย โดยใส่ –force ไว้เนื่องจาก create hugo folder ไว้แล้ว 

hugo import jekyll <jekyll-folder> <hugo-folder> --force

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 มา 

      aliases:

  - <old-url>
    ดูเพิ่มเติมได้ที่ 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 มากันเถอะครับ!!!