Dự án Blog Tĩnh – Xây blog cá nhân nhẹ, hiện đại từ HTML

Dự án Blog Tĩnh

Khám phá cách xây dựng blog tĩnh hoàn toàn tự chủ: từ HTML/CSS cơ bản đến tối ưu SEO, thêm dark mode, tìm kiếm, PrismJS, Eleventy và phân tích traffic nhẹ.

Blog Tĩnh #01 – Tự tạo một boilerplate HTML/CSS đơn giản & dễ mở rộng

1 tuần 0 6 4 phút đọc

Không cần dùng WordPress, không cần framework nặng. Bạn hoàn toàn có thể tự tạo một blog tĩnh bằng HTML/CSS từ đầu – sạch, nhẹ, không ràng buộc. Dưới đây là hướng dẫn tạo boilerplate...

Blog Tĩnh #02 – Deploy blog tĩnh lên Cloudflare Pages hoặc Netlify

1 tuần 0 3 3 phút đọc

Tiếp nối bài #01, sau khi bạn đã có một bộ boilerplate HTML/CSS đơn giản, giờ là lúc đưa blog tĩnh của bạn lên Internet – miễn phí, nhanh, dễ bảo trì.

Blog Tĩnh #03 – Thêm favicon, meta chuẩn SEO & chia sẻ social

1 tuần 0 2 3 phút đọc

Ở bài #02, bạn đã deploy blog lên Internet. Bây giờ là lúc bổ sung những thứ "nhỏ nhưng có võ" – giúp blog thân thiện hơn với Google, Facebook, Twitter, và người dùng.

Blog Tĩnh #04 – Tạo Dark Mode đơn giản bằng CSS, không cần JavaScript

1 tuần 0 2 2 phút đọc

Dark Mode không chỉ là xu hướng – nó còn giúp giảm mỏi mắt, tiết kiệm pin và cải thiện UX tổng thể. Tin vui là bạn hoàn toàn có thể thêm Dark Mode cho...

Blog Tĩnh #05 – Tạo layout responsive đơn giản

6 ngày 0 1 2 phút đọc

Blog đẹp cỡ nào mà đọc trên điện thoại vẫn bị vỡ layout thì cũng hỏng. Responsive là yếu tố cơ bản nhất để blog bạn trông chuyên nghiệp – trên mọi thiết bị. Tin...

Blog Tĩnh #06 – Thêm Table of Contents (TOC) cố định khi cuộn

5 ngày 0 2 2 phút đọc

Với những bài viết dài, TOC (table of contents – mục lục) giúp người đọc điều hướng dễ hơn. Trong blog tĩnh HTML/CSS, bạn hoàn toàn có thể thêm TOC cố định chỉ bằng HTML...

Blog Tĩnh #07 – Tạo highlight code + nút copy – dùng PrismJS

4 ngày 0 1 3 phút đọc

Bài này giúp bạn hiển thị code đẹp, dễ đọc và cho phép người dùng copy chỉ với 1 click – đúng chuẩn một blog kỹ thuật chuyên nghiệp. Không cần framework, không cần plugin...

Blog Tĩnh #08 – Tối ưu tốc độ: preload, lazy load, minify…

3 ngày 0 1 3 phút đọc

Blog tĩnh vốn đã nhanh, nhưng vẫn có thể tối ưu thêm nữa. Chỉ cần chỉnh đúng vài dòng HTML/CSS, bạn sẽ giúp trang load mượt hơn, giảm delay và sẵn sàng chạm điểm A+...

Blog Tĩnh #09 – Dùng Eleventy để tái sử dụng layout mà vẫn giữ file HTML thuần

2 ngày 0 1 3 phút đọc

Viết blog bằng HTML thuần rất tốt – nhưng nếu bạn phải copy/paste header, footer, meta... cho mỗi trang thì sẽ rất dễ sai sót, khó bảo trì. Bài này sẽ hướng dẫn dùng Eleventy...

Blog Tĩnh #10 – Tự tạo hệ thống Previous / Next bài viết mà không cần build tool

1 ngày 0 3 3 phút đọc

Ở các blog CMS như WordPress, bạn dễ dàng hiển thị bài trước/sau. Nhưng nếu viết bằng HTML thuần thì sao? Tin vui là bạn vẫn có thể làm được – chỉ cần chút kỷ...

Blog Tĩnh #11 – Tùy biến UI: Thẻ tag, tooltip, callout box đẹp mắt chỉ bằng HTML/CSS

6 giờ 0 1 2 phút đọc

Bài viết này giúp bạn tạo các thành phần UI thường thấy trong blog kỹ thuật: tag, tooltip, callout box (Chú ý, Cảnh báo, Mẹo…) – gọn nhẹ, đẹp, không cần JS.