Hugo Blog Setup From Scratch

ในการสร้างเว็บด้วย Hugo หลักการแรกที่เราต้องคิดคือก่อนติดตั้งเราจะใช้ Theme อะไร เพราะมันมีตัวเลือกมาก วิธีการอาจจะแตกต่างกัน วิธีการปรับแต่ง พวก Category ,taxonomies ก็แตกต่างกัน อย่างเช่นของเดิม ใช้ Paper Mod ครั้งแรกเข้าใจง่ายดี แต่พอบทความมาก มันเริ่มยุ่งยาก ตรงการปรับแต่ง Front Master เลยไม่ค่อยได้เขียนเท่าไหร่ บางทีไปทำอย่างอื่นนานๆๆ เช่นเข้าสวนใส่ปุ๋ยยาง หรือตัดหญ้า บางทีกว่าจะหมดทั้งสวน ต้องใช้เวลาเป็นเดือน สองเดือน กลับมาถึงบ้านนอนฟังเพลงหลับ เลยไม่มีเวลาเขียน เสียดายเวลานอน

ตอนหลังตัดสินใจเริ่มใหม่ รื่อใหม่หมด แล้วใช้ Hextra Theme แทน พราะมี search ในตัว และ sidebar/section แบบ docs จะรองรับ category (IT/ธรรมชาติ/ความเห็น) ได้เป็นระบบกว่า แบบ blog-style

ทำไมต้องเกริ่นตรงนี้ ก่อน เพราะว่า Hextra ใช้ Hugo Modules (ไม่ใช่ git submodule) เป็นค่า default ต้องมี Go ติดตั้งบน droplet ด้วย (Hugo modules เรียก go mod)

บน Droplet — เช็คก่อน

hugo version   # ต้องเป็น extended version (Hextra ใช้ scss)
go version     # ต้องมี ถ้าไม่มี: sudo snap install go --classic หรือ apt install golang-go
git version

ตั้งแต่ Hugo v0.128+ ทุก binary รวม extended features เข้าด้วยกันแล้ว (ไม่แยก extended/non-extended อีกต่อไป) ปลอดภัย ไม่ต้องโหลดใหม่ ดังนั้น หาก ตรวจสอบแล้วแจ้งว่า

Command 'go' not found, but can be installed with:
snap install go         # version 1.26.7, or
apt  install golang-go  # version 2:1.18~0ubuntu2
apt  install gccgo-go   # version 2:1.18~0ubuntu2
See 'snap info go' for additional versions.

แต่ Go: แนะนำใช้ snap install go เอา เพราะ apt ให้ 1.18 ซึ่งเก่าเกินไป (Hextra/Hugo modules สมัยนี้ต้องการ Go ค่อนข้างใหม่)

sudo snap install go --classic
go version   # ควรได้ 1.26.x

ทำต่อจากนี้

mkdir -p ~/blog-content && cd ~/blog-content
hugo new site . --force
git init

hugo mod init github.com/<your-github-username>/knupan-blog

ใส่ username จริงของ github ตรง <your-github-username> — ถ้ายังไม่มี repo บน GitHub ไว้ push ทีหลังก็ตั้งชื่อ path ไว้ก่อนได้ ไม่ต้องมี repo จริงตอนนี้ก็ hugo mod init ได้ และในคำสั่ง mkdir จะกำหนดเป็นอะไรก็ได้ แล้วแต่ต้องการ แต่ที่แนะนำแค่ตัวอย่าง

เรื่อง path /var/www/blog

ตรงนี้สำคัญกว่า — ต้องแยก 2 concept ให้ชัด:

1. ~/blog-content = ที่เก็บ ==source code== ของ Hugo (content, theme, config) — เป็นที่รัน hugo build
2. /var/www/blog = ที่ Apache เสิร์ฟไฟล์ static ที่ build เสร็จแล้ว (public/ folder หลัง hugo build)

Hugo ไม่ได้ build “ทับ” source — มันอ่าน source แล้ว generate ไฟล์ html/css ออกมาใหม่ในโฟลเดอร์ ==public/==

ทางเลือกมีหลายอย่างมาก เช่น ติดตั้งในเครื่อง แล้วส่งเข้าไปตรงๆๆ หรือปรับแต่ง ใน DO หรือปรับแต่งใน GitHub แต่มันยุ่งยากหลายเรื่องเลย ทำแบบนี้แทน

เก็บ source แยกจาก web root ชัดเจน

~/blog-content/          ← source, git repo อยู่ตรงนี้
~/blog-content/public/   ← hugo build output

แล้วให้ script copy public/* → /var/www/blog/ ทุกครั้งที่ build

เมื่อตกลงใจแล้ว ว่าจะเอาแบบนั้น ก็ดำเนินการต่อ

1.แก้ไข hugo.toml ให้ครบ

cat > hugo.toml << 'EOF'
baseURL = "https://knupan.com"
languageCode = "th-th"
title = "knupan.com"
publishDir = "public"

[module]
  [[module.imports]]
    path = "github.com/imfing/hextra"
EOF

ดึง theme เข้ามา

hugo mod get github.com/imfing/hextra
hugo mod tidy

สร้างโครงสร้างของเนื้อหา (content)

mkdir -p content/{it/network,it/security,it/linux,nature,thoughts}

ทดสอบ build

hugo --minify
ls public/

หากเจอปัญหา hugo: collected modules in 3355 msError: failed to load modules: module “hextra” not found in “/root/blog-content/themes/hextra”; either add it as a Hugo Module or store it in “/root/blog-content/themes”.: module does not exist ให้แก้โดยการ อย่าใส่ theme = “hextra” เพราะว่า Hugo กำลังพยายามหาแบบเก่าอยู่ ซึ่งเกิดจากมีบรรทัด theme = “hextra” ค้างอยู่ เพราะบางเวอร์ชัน Hugo จะสับสนว่าจะหา theme จาก themes/ folder (แบบเก่า) หรือจาก module (แบบใหม่) แต่ที่ติดตั้งเป็นการติดตั้ง แบบ module

เช็คผลลัพธ์

ls public/

Deploy ไปทดสอบจริงก่อนต่อ config

sudo mkdir -p /var/www/blog
sudo chown -R $USER:$USER /var/www/blog
rsync -av --delete public/ /var/www/blog/

คำสั่งสร้างไฟล์ทดสอบ

cat > content/_index.md << 'EOF'
---
title: "หน้าแรก"
---

## ยินดีต้อนรับสู่ knupan.com

บันทึกเรียนรู้ IT, Network, และเรื่องราวทั่วไป
EOF

mkdir -p content/it/network
cat > content/it/network/_index.md << 'EOF'
---
title: "Network"
---
EOF

cat > content/it/network/test-post.md << 'EOF'
---
title: "บทความทดสอบ"
date: 2026-08-27
---

เนื้อหาทดสอบระบบ Hugo + Hextra
EOF

Build + deploy อีกรอบ:

hugo --minify
rsync -av --delete public/ /var/www/blog/

แก้ไข — เพิ่ม type: docs ให้ทุกหน้า ถ้าไม่อยากใช้ layout พิเศษของหน้าแรก ให้ใส่ type: docs

cat > content/it/_index.md << 'EOF'
---
title: "IT"
type: docs
---
EOF

cat > content/it/network/_index.md << 'EOF'
---
title: "Network"
type: docs
---
EOF

cat > content/it/network/test-post.md << 'EOF'
---
title: "บทความทดสอบ"
date: 2026-08-27
type: docs
---

เนื้อหาทดสอบระบบ Hugo + Hextra
EOF