Making of adkdev.com Part 3: Hugo

June 19, 2017
howto hugo

เมื่อวันก่อนเราได้ Introduction และเมื่อวานก็ได้จัดทำ GitHub pages เป็น Web Hosting และใช้ Cloudflare เพื่อเป็น DNS server ไปแล้ว วันนี้จะต่อในส่วนของการใช้ Hugo เพื่อสร้าง Static web site กัน :D

Hugo static site engine

Hugo - A fast and modern static website engine

Hugo บอกว่าตัวเองเป็น A fast and modern static website engine คืออะไร? ก็คือตัวสร้าง static website ให้เราอย่างไร โดยจะมีระบบย่อยต่างๆ มากมาย ไว้สร้าง website ให้เราทั้ง categories, tags, series และอื่นๆ โดยที่ user ที่เข้าชมเว็บ อาจไม่รู้เลย ว่านี่คือเว็บที่เป็นไฟล์เหี่ยวๆ แห้งๆ (แต่อันที่จริงพวก dynamic web ต่างๆ ก็ gen code ออกมาเป็น html ธรรมดาๆ นี่เหมือนกัน :D)

Hugo Quickstart

ก่อนจะใช้งานได้้ ก็ต้อง install กันก่อน เลือกได้จาม OS ของท่านจากหน้า Release ได้เลย

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

อ้าว แล้วแก จะมาเขียน blog นี้ทำไม???

อ้อ ส่วนที่จะเขียนจะเป็นส่วนที่เชื่อม Hugo เข้ากับ Post ก่่อนหน้านี้ครับ คือเอาไปไว้บน Github pages ครับ

ซึ่งใน Quickstart ข้อ 12 ก็จะมีวิธีบอกอยู่ครับ แต่ผมไม่ได้ใช้วิธีนั้น ไปใช้อีกแบบ คือแยก Repository ของ Code Hugo แยกออกจาก Statis site (adkdev.github.io) โดยที่ repository ของ static site นั้น จะเอาของที่อยู่ใน directory “public” ขึ้นไปอย่างเดียวครับ

ถึงจุดนี้ จะตีความว่า
ทุกท่านได้ทำตาม tutorial หมดแล้ว และทำหน้าเว็บของตัวเองเสร็จแล้ว
และใช้ Git เป็น และเคยสร้าง repostory บน GitHub มาแล้วนะครับ

โดยวิธีการที่ผมใช้ ก็ไม่ได้คิดเอง แต่ทำตามวิธีบนเว็บเขาอีกทีนั่นแหละ ดูรายละเอียดได้ที่ Hosting Hugo on GitHub Pages ในส่วนของ Hosting Personal/Organization Pages

โดยวิธีการโดยสรุป เป็นดังนี้ คือ

  1. สร้าง GitHub repository เพื่อเก็บ code ของ Hugo ตัวอย่างจากของผมก็จะเป็น adkdev-hugo
  2. สร้าง GitHub repository ของ User เรา อันนี้เราสร้างแล้ว จาก post ใน part 2 ตัวอย่างของผมก็จะได้เป็น adkdev.github.io
  3. เราน่าจะมี code ใน directory นี้แล้ว ก็ควรจะ add origin จากข้อ 1 ให้ working directory ของเรา
  4. ใช้คำสั่ง hugo server เพื่อ run hugo server บน localhost ของเรา
  5. เมื่อ run แล้ว hugo จะสร้าง directory “public” ขึ้นมา ให้กด ctrl+c แล้วลบ directory “public” ทิ้ง (ลบได้เลย ระบบสร้างให้ใหม่เอง ลบเพื่อต่อข้อ 6)
  6. เพ่ิม git submodule ให้ directory “public” เพื่อแยกกับ commit, push จาก repostory หลัก โดยใช้คำสั่ง git submodule add -b master [email protected]:<username>/<username>.github.io.git public
  7. จากนั้น ก็สร้างไฟล์มา 1 ไฟล์ชื่อ deploy.sh โดยข้างในมี code แบบนี้
#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace by `hugo -t <yourtheme>`

# Go To Public folder
cd public
# Add changes to git.
git add -A

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back
cd ..

แล้วก็เปลี่ยน mode ให้ไฟล์นี้ execute ได้สักหน่อยด้วย chmod +x deploy.sh จากนั้น เมื่อจะ deploy ขึ้น GitHub pages ก็แค่สั่ง ./deploy.sh เป็นอันเสร็จพิธี

อันที่จริง มี auto deploy ด้วยนะครับ เป็นอีกวิธี ไม่ต้องมีไฟล์ deploy.sh ไว้ว่างๆ จะลองเล่นดู แล้วจะมาเขียน blog นะครับ วันนี้แค่นี้ก่อนนะครับ ไม่ค่อยสบาย เขียนรวบรัดหน่อย เวลาน้อยใช้สอบประหยัด ราตรีสวัสดิ์ good night…

comments powered by Disqus