Dalam proses pembangunan laman statik menggunakan Hugo, ada kalanya kita mahu mengaksesnya melalui domain tempatan seperti https://blog-hugo.loc dan pada masa yang sama menikmati ciri LiveReload secara automatik.

Catatan ini menunjukkan cara:

• Mengkonfigurasi Nginx sebagai proksi songsang (reverse proxy) untuk pelayan pembangunan Hugo,
• Mengaktifkan sokongan WebSocket untuk LiveReload,
• Menjalankan Hugo dengan parameter sesuai agar kena dengan penggunaan proksi HTTPS.

Konfigurasi Nginx

Snippet untuk LiveReload

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;

Konfigurasi Pelayan “blog-hugo.conf”

Fail utama konfigurasi Nginx adalah seperti berikut.

server {
  listen 80;
  server_name blog-hugo.loc;

  # Redirect HTTP to HTTPS
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  http2 on;
  server_name blog-hugo.loc;

  # SSL dan Tajuk Keselamatan 
  include snippets/ssl-common.conf;
  include snippets/security-headers.conf;

  root /home/<user>/blog/public;
  index index.html;

  location / {
    proxy_pass http://127.0.0.1:1313;
    include snippets/proxy-headers.conf;
  }

  # LiveReload WebSocket
  location ~* /livereload {
    proxy_pass http://127.0.0.1:1313;
    include snippets/livereload.conf;
  }

  # livereload.js
  location /livereload.js {
    proxy_pass http://127.0.0.1:1313/livereload.js;
    proxy_set_header Host $host;
  }

  error_log /var/log/nginx/blog-hugo_error.log;
  access_log /var/log/nginx/blog-hugo_access.log;
}

Ia mengandungi tetapan untuk:

• Redirect HTTP ke HTTPS,
• Sokongan SSL dan tajuk keselamatan,
• Proksi ke pelayan Hugo di port 1313,
• Sokongan fail livereload.js dan sambungan WebSocket.

Pautan ke snippet lain:

1. ssl-common.conf
2. security-headers.conf
3. proxy-headers.conf

Mengaktifkan Konfigurasi

• Aktifkan fail konfigurasi ini melalui pautan simbolik:

  bash

  sudo ln -s /etc/nginx/sites-available/blog-hugo.conf /etc/nginx/sites-enabled/

• Jangan lupa uji dan muat semula Nginx:

  bash

  sudo nginx -t && sudo systemctl reload nginx

Menjalankan Pelayan Hugo

Jalankan Hugo dengan tetapan berikut agar ia boleh bekerjasama dengan Nginx dan berfungsi di bawah protokol HTTPS:

hugo server -D -b "https://blog-hugo.loc" --appendPort=false --forceSyncStatic --gc --liveReloadPort=-1

Penjelasan Parameter:

• -D : Paparkan kandungan draf.
• -b "https://blog-hugo.loc" : Tetapkan baseURL agar sepadan dengan domain yang digunakan oleh Nginx.
• --appendPort=false: Elakkan port 1313 ditambah secara automatik kepada URL.
• --forceSyncStatic : Salin semula semua fail statik setiap kali ia berubah.
• --gc : Jalankan pembersihan fail cache yang tidak digunakan.
• --liveReloadPort=-1 : Gunakan port semasa untuk LiveReload. Ini penting untuk sambungan melalui HTTPS.
  

Carta Aliran Permintaan

Carta berikut menunjukkan aliran permintaan dan bagaimana LiveReload berfungsi di sebalik tabir:

  
  sequenceDiagram
  participant B as Browser
  participant N as Nginx
  participant H as Hugo

  B->>N: HTTPS request to "blog-hugo.loc"
  N->>H: proxy to "127.0.0.1:1313"
  H-->>N: HTML + livereload.js
  N-->>B: HTML response

  B->>N: /livereload.js
  N->>H: proxy to "/livereload.js"
  H-->>B: livereload.js

  B->>H: 🔌 Open WebSocket
  Note left of H: Watches file changes
  H-->>B: Reload signal
  Note right of B: 🔁 Auto reloads page