11ty (Eleventy) là gì? Hướng dẫn cơ bản cho người mới bắt đầu

11ty (Eleventy) là một Static Site Generator hiện đại, tập trung vào sự đơn giản, tốc độ và khả năng kiểm soát code. Thay vì phụ thuộc vào hệ sinh thái phức tạp, 11ty cho phép xây dựng website tĩnh bằng các công nghệ quen thuộc như HTML, Markdown và JavaScript. Bài viết này giới thiệu những khái niệm cơ bản nhất để bắt đầu với 11ty một cách dễ hiểu và thực tế.

11ty (Eleventy) là gì? Hướng dẫn cơ bản cho người mới bắt đầu

11ty là gì

11ty là công cụ tạo website tĩnh (Static Site Generator). Nó nhận nội dung đầu vào như Markdown, HTML hoặc template, sau đó build ra các file HTML thuần để deploy lên server.

Điểm khác biệt lớn nhất của 11ty là: không áp đặt framework, không bắt buộc dùng một template engine cố định, và không trói buộc cách tổ chức dự án.

Khi nào nên dùng 11ty

11ty phù hợp trong các trường hợp:

  • Blog cá nhân hoặc blog kỹ thuật
  • Website giới thiệu, landing page
  • Tài liệu kỹ thuật, documentation
  • Website cần tốc độ cao và ít phụ thuộc backend

Nếu mục tiêu là website nhanh, dễ bảo trì và ít rủi ro bảo mật, 11ty là một lựa chọn rất đáng cân nhắc.

11ty hoạt động như thế nào

Quy trình cơ bản của 11ty:

  • Đọc nội dung từ thư mục nguồn (Markdown, HTML, dữ liệu)
  • Áp dụng layout và template nếu có
  • Build ra HTML tĩnh trong thư mục output

Toàn bộ quá trình build diễn ra trước khi deploy, nên server chỉ việc trả file HTML, không cần xử lý động.

Cài đặt 11ty

11ty chạy trên Node.js. Trước tiên cần cài Node.js phiên bản LTS.

npm install -g @11ty/eleventy

Sau khi cài xong, có thể kiểm tra bằng:

eleventy --version

Cấu trúc project 11ty cơ bản

Một project 11ty tối giản có thể trông như sau:

project/
├─ src/
│  ├─ index.md
│  └─ _includes/
│     └─ layout.njk
└─ .eleventy.js

Thư mục src chứa nội dung, _includes chứa layout và template, còn file .eleventy.js dùng để cấu hình.

Tạo trang đầu tiên với Markdown

Ví dụ một file Markdown đơn giản:

---
title: Trang đầu tiên
layout: layout.njk
---

Chào mừng đến với website dùng 11ty.

Phần front matter (khối —) dùng để khai báo metadata như tiêu đề và layout.

Chạy 11ty ở chế độ phát triển

Để build website:

eleventy

Để chạy kèm server xem trước:

eleventy --serve

Khi đó, 11ty sẽ theo dõi thay đổi file và tự build lại.

Ưu điểm nổi bật của 11ty

  • Rất nhẹ, không framework nặng nề
  • Hỗ trợ nhiều template engine
  • HTML output thuần, tối ưu SEO
  • Dễ tích hợp với bất kỳ workflow nào
  • Phù hợp cho cả dự án nhỏ và vừa

Hạn chế cần lưu ý

11ty không phải là SPA framework. Nếu cần tương tác phức tạp phía client, cần kết hợp thêm JavaScript frontend hoặc framework khác.

Kết luận

11ty là lựa chọn lý tưởng cho những ai muốn xây dựng website nhanh, gọn, dễ kiểm soát và ít phụ thuộc. Với kiến trúc đơn giản và khả năng mở rộng linh hoạt, 11ty đặc biệt phù hợp cho blog kỹ thuật, tài liệu và các website tĩnh cần hiệu năng cao.

Bình luận


  • Không có bình luận.

Init Toolbox

Nhấn Ctrl + \ trên máy tính, hoặc vuốt sang trái ở bất kỳ đâu trên mobile.

Đăng nhập





Đang tải...