Posted inProgramming

Xây Dựng Blog Tĩnh với Hugo hoặc Jekyll: Mẹo Thực Tế Từ Kinh Nghiệm Thực Chiến

Programming tutorial - IT technology blog
Programming tutorial - IT technology blog

Vấn Đề Khi Vận Hành Blog Động

Nếu bạn đã từng duy trì một site WordPress, bạn hiểu quy trình đó ra sao: cập nhật plugin, sao lưu database, xung đột phiên bản PHP, và những lỗi 500 bất ngờ lúc 2 giờ sáng. Đối với một blog công nghệ cá nhân hay site tài liệu, những phiền phức này thực sự không đáng chút nào.

Static site generator giải quyết điều đó. Không database, không scripting phía server, không có thành phần nào chạy lúc runtime. Bạn viết bằng Markdown, chạy lệnh build, rồi đẩy các file HTML thuần lên CDN. Trang tải ngay lập tức, hosting thường miễn phí, và gần như chẳng có gì để hỏng.

Tôi chuyển sang dùng static generator ba năm trước và kể từ đó không cần đụng đến config PHP hay chạy sao lưu database nữa. Thời gian bảo trì giảm từ khoảng một tiếng mỗi tuần xuống gần bằng không. Nếu mục tiêu của bạn là viết lách, không phải trông coi server, đây là lựa chọn đúng đắn.

Hai công cụ thống trị lĩnh vực này: Hugo (dựa trên Go, cực kỳ nhanh) và Jekyll (dựa trên Ruby, tích hợp chặt chẽ với GitHub Pages). Cả hai đều là lựa chọn vững chắc. Quyết định thường phụ thuộc vào toolchain local của bạn và nơi bạn dự định triển khai.

Các Khái Niệm Cốt Lõi Bạn Cần Nắm Trước

Static Site Generator Hoạt Động Như Thế Nào

Một static site generator đọc nội dung của bạn (các file Markdown), áp dụng template (layout HTML/CSS), và xuất ra một thư mục các file tĩnh sẵn sàng để phục vụ. Thư mục output đó chính là toàn bộ website của bạn — không truy vấn database, không thực thi PHP.

Các thành phần chính gồm:

  • File nội dung — Các file Markdown (.md) kèm front matter (metadata YAML/TOML ở đầu file)
  • Theme/layout — Các template HTML định nghĩa giao diện trang
  • File cấu hình — Các cài đặt toàn site như tiêu đề, base URL và theme
  • Build output — Thư mục public/ hoặc _site/ cuối cùng mà bạn triển khai

Hugo vs Jekyll: Những Khác Biệt Chính

Hugo được viết bằng Go và thực sự rất nhanh — một site với 1.000 bài thường build xong trong chưa đầy một giây. Jekyll được viết bằng Ruby và chậm hơn đáng kể khi có nhiều nội dung, nhưng đây là công cụ native của GitHub Pages. Chỉ cần push lên một branch là GitHub tự động build và triển khai, không cần cấu hình CI.

Chọn Hugo nếu:

  • Bạn muốn thời gian build nhanh và không muốn quản lý môi trường Ruby
  • Bạn triển khai lên Netlify, Cloudflare Pages, hoặc VPS
  • Bạn thích cú pháp config TOML

Chọn Jekyll nếu:

  • Bạn host trên GitHub Pages và muốn zero cấu hình build
  • Bạn quen với Ruby và hệ sinh thái gem
  • Bạn cần hệ sinh thái plugin đơn giản hơn, đã được kiểm chứng lâu năm

Thực Hành: Xây Dựng Blog Tĩnh Của Bạn

Lựa Chọn A — Bắt Đầu với Hugo

Cài Hugo bằng package manager:

# macOS
brew install hugo

# Ubuntu/Debian
sudo apt install hugo

# Kiểm tra
hugo version

Tạo site mới và thêm theme:

hugo new site myblog
cd myblog

# Thêm theme (PaperMod gọn gàng và phổ biến)
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

# Đặt theme trong file cấu hình
echo 'theme = "PaperMod"' >> hugo.toml

Tạo bài viết đầu tiên:

hugo new posts/my-first-post.md

Lệnh này tạo file tại content/posts/my-first-post.md với front matter đã được điền sẵn:

---
title: "Bài Viết Đầu Tiên"
date: 2024-01-15T10:00:00+09:00
draft: true
tags: ["hugo", "blog"]
---

Nội dung của bạn ở đây...

Đổi draft: true thành draft: false khi bạn sẵn sàng xuất bản. Rồi khởi động server local:

hugo server -D   # -D bao gồm cả bài nháp trong quá trình phát triển

Mở http://localhost:1313 — Hugo tự động reload khi bạn chỉnh sửa file. Khi sẵn sàng cho production:

hugo
# Kết quả xuất ra ./public/ — triển khai thư mục này

Lựa Chọn B — Bắt Đầu với Jekyll

Jekyll cần Ruby. Trên Ubuntu:

sudo apt install ruby-full build-essential
gem install jekyll bundler

jekyll new myblog
cd myblog
bundle exec jekyll serve

Site của bạn ở http://localhost:4000. Các file bài viết đặt trong thư mục _posts/ và phải tuân theo quy tắc đặt tên sau:

# Tên file phải theo định dạng: YYYY-MM-DD-title.md
touch _posts/2024-01-15-my-first-post.md
---
layout: post
title: "Bài Viết Đầu Tiên"
date: 2024-01-15
categories: [programming, linux]
tags: [jekyll, blog]
---

Nội dung bắt đầu từ đây.

Build cho production:

bundle exec jekyll build
# Kết quả xuất ra ./_site/

Triển Khai Miễn Phí

Với Hugo, Cloudflare Pages là lựa chọn yêu thích của tôi. Gói miễn phí hỗ trợ 500 lần build mỗi tháng với băng thông không giới hạn và CDN toàn cầu — quá đủ cho một blog cá nhân. Cài đặt chỉ mất khoảng năm phút:

  1. Push dự án Hugo lên repo GitHub hoặc GitLab
  2. Kết nối với Cloudflare Pages
  3. Đặt lệnh build là hugo và thư mục output là public
  4. Mỗi lần push lên main sẽ tự động kích hoạt một lần deploy mới

Với Jekyll trên GitHub Pages, còn đơn giản hơn nữa:

# Trong Settings > Pages của repo
# Đặt branch nguồn là main, thư mục là / (root)
# GitHub tự động build và triển khai

Blog của bạn sẽ live tại https://yourusername.github.io/repo-name trong vòng một hai phút.

Những Mẹo Thực Sự Tiết Kiệm Thời Gian

Một vài điều tôi ước gì đã biết từ khi mới bắt đầu:

  • Dùng archetype (Hugo) hoặc defaults (Jekyll) để điền sẵn template front matter. Bạn sẽ thêm tags, categories và các trường SEO vào mỗi bài — hãy đặt chúng vào archetype một lần để không bao giờ quên sau này.
  • Tách biệt config local và production. Hệ thống environment config của Hugo cho phép bạn override cài đặt theo từng môi trường. Lưu baseURL production trong config/production/hugo.toml và URL local trong config/development/hugo.toml. Chạy hugo --environment production để kích hoạt đúng cấu hình.
  • Đừng tùy chỉnh theme quá mức. Chọn một theme tối giản, được bảo trì tốt rồi chỉnh CSS. Theme được tùy chỉnh quá nhiều sẽ trở thành cơn ác mộng bảo trì khi các bản cập nhật upstream làm hỏng phần override của bạn.
  • Dùng draft: true cho các bài đang viết dở. Đừng bao giờ commit một bài viết chưa hoàn chỉnh trực tiếp vào thư mục nội dung chính.
  • Thêm .gitignore để loại trừ kết quả build. Triển khai từ CI — đừng commit thư mục public/ hoặc _site/ vào git.
# Hugo .gitignore
public/
resources/_gen/
.hugo_build.lock

# Jekyll .gitignore
_site/
.sass-cache/
.jekyll-cache/

Kết Luận

Blog tĩnh không còn là thứ gì đó xa lạ hay ngách nữa. Đối với các lập trình viên chạy site cá nhân hay chuyên nghiệp, đây thường là lựa chọn hiển nhiên — nhanh hơn, rẻ hơn và ít tốn công bảo trì hơn nhiều so với CMS.

Hugo và Jekyll đều làm tốt công việc đó. Hugo thắng về tốc độ build và sự linh hoạt triển khai. Jekyll thắng về tích hợp với GitHub Pages. Hãy bắt đầu với cái phù hợp với setup hiện tại của bạn. Đang dùng GitHub và muốn zero cấu hình CI? Jekyll là điểm khởi đầu dễ hơn. Triển khai lên Cloudflare hay Netlify? Hãy chọn Hugo.

Cứ chọn một cái rồi ship thôi. Việc migrate giữa các static generator sau này chỉ tốn khoảng một buổi chiều — tất cả đều là file Markdown thuần, và cú pháp front matter hầu như không khác nhau giữa các công cụ.

Share:
Tags: