Mục lục
1. Cài đặt Eleventy
Yêu cầu: máy bạn có Node.js. Nếu chưa, tải tại:
npm init -y
npm install @11ty/eleventy --save-dev
Thêm script chạy nhanh trong package.json
"scripts": {
"dev": "eleventy --serve",
"build": "eleventy"
}
2. Cấu trúc thư mục đơn giản
my-blog/
├── .eleventy.js
├── package.json
├── /src/
│ ├── index.md
│ ├── about.md
│ ├── posts/
│ │ └── first.md
│ └── /_includes/
│ └── layout.njk
├── /dist/ (output tự sinh)
Eleventy sẽ lấy file từ /src → biên dịch sang /dist
3. Tạo layout HTML dùng chung
<!-- src/_includes/layout.njk -->
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>{{ title }} – Init Blog</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<h1>Init Blog</h1>
</header>
<main>
{{ content | safe }}
</main>
<footer>© 2025 InitHTML</footer>
</body>
</html>
4. Viết bài bằng Markdown + Front matter
<!-- src/posts/first.md -->
---
title: Bài viết đầu tiên
layout: layout.njk
---
Nội dung bài viết **dạng Markdown** cực tiện.
- Dễ viết
- Tự chuyển sang HTML
Eleventy sẽ tự nối nội dung này vào layout.njk, xuất thành file HTML đẹp, sạch.
5. Chạy thử
npm run devMở trình duyệt: http://localhost:8080
→ Blog tĩnh của bạn đã hoạt động với layout dùng chung, không cần copy/paste thủ công nữa.
6. Deploy như bình thường
- Chạy
npm run build - Upload thư mục
_site(hoặcdist) lên Cloudflare Pages / Netlify
Lý do nên dùng Eleventy
- Không ép bạn dùng React/Vue/SASS/JS…
- Hỗ trợ HTML/Markdown/Nunjucks/EJS tùy chọn
- Không lock-in – bạn bỏ Eleventy lúc nào cũng được
Eleventy giúp blog bạn nâng cấp một bước: từ thủ công → tái sử dụng → có cấu trúc mà vẫn giữ sự tinh gọn của HTML thuần. Đây là bước chuyển mượt mà, an toàn, dễ quản lý – đặc biệt nếu bạn dự tính viết lâu dài.
Chúc bạn modular hóa blog thành công – gọn hơn, sạch hơn, và vẫn 100% chủ động!
Bình luận