Hugo คืออะไร และวิธี Deploy เว็บ Static บน Cloud Server

ทดสอบบน Ubuntu Server 24.04 LTS

1. 1

   ติดตั้ง Hugo และสร้างโปรเจกต์

   คัดลอก

   sudo apt update
   sudo apt -y install hugo git
   hugo new site mysite
   cd mysite && git init

2. 2

   ติดตั้งธีมและเขียนหน้าแรก

   คัดลอก

   git submodule add https://github.com/<theme-repo>.git themes/mytheme
   echo 'theme = "mytheme"' >> hugo.toml
   hugo new posts/hello.md

3. 3

   บิลด์เว็บ

   ผลลัพธ์จะอยู่ในโฟลเดอร์ public ซึ่งคือทั้งเว็บที่พร้อมนำขึ้นเซิร์ฟเวอร์

   คัดลอก

   hugo --minify

4. 4

   ตั้ง Nginx ให้เสิร์ฟไฟล์

   คัดลอก

   server {
     listen 443 ssl;
     server_name www.example.com;
     root /var/www/site;
     index index.html;
   
     location / { try_files $uri $uri/ =404; }
   
     location ~* \.(css|js|jpg|png|webp|svg|woff2)$ {
       expires 30d;
       add_header Cache-Control "public";
     }
   }

5. 5

   ส่งไฟล์ขึ้นเซิร์ฟเวอร์

   คัดลอกเฉพาะผลลัพธ์ที่บิลด์แล้วขึ้นไป และลบไฟล์ที่ไม่มีแล้วบนเซิร์ฟเวอร์ออกด้วย

   คัดลอก

   rsync -avz --delete public/ deploy@your-server-ip:/var/www/site/

6. 6

   ทำให้อัตโนมัติเมื่อมีการเปลี่ยนแปลง

   ตั้ง Pipeline ใน GitLab หรือ Gitea ให้บิลด์และส่งไฟล์ขึ้นทุกครั้งที่ Push ทำให้ทีมคอนเทนต์แก้แล้วขึ้นเว็บได้เองโดยไม่ต้องรอผู้ดูแล

เว็บ Static ไม่มีโค้ดฝั่งเซิร์ฟเวอร์ให้ถูกเจาะ งานดูแลจึงเหลือแค่การอัปเดตระบบปฏิบัติการและ Nginx ซึ่งเบากว่าเว็บทั่วไปมาก