Bài viết này là phần mở đầu trong series Dự án Blog Tĩnh – hướng dẫn xây dựng blog cá nhân từ HTML/CSS thuần, không framework, không CMS, không build tool.
Mục tiêu: tạo một hệ thống gọn, nhanh, dễ SEO, dễ bảo trì, có thể dùng lâu dài hoặc mở rộng tùy ý.
1. Cấu trúc thư mục cơ bản
my-blog/
├── index.html
├── about.html
├── post.html
├── /css/
│ └── style.css
├── /img/
│ └── ...
├── /posts/
│ └── first-post.html
├── /assets/
│ └── fonts, icons...
2. File index.html mẫu
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Init Blog</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Init Blog</h1>
<nav>
<a href="index.html">Trang chủ</a>
<a href="about.html">Giới thiệu</a>
</nav>
</header>
<main>
<article>
<h2><a href="posts/first-post.html">Bài viết đầu tiên</a></h2>
<p>Giới thiệu ngắn gọn...</p>
</article>
</main>
<footer>
© 2025 InitHTML.com
</footer>
</body>
</html>
3. File style.css đơn giản mà hiệu quả
Dưới đây là một đoạn CSS cực kỳ tối giản, bạn có thể mở rộng từ đây thành theme riêng:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
background: #fff;
color: #222;
padding: 2rem;
max-width: 720px;
margin: auto;
}
a {
color: #007acc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header, footer {
text-align: center;
margin: 2rem 0;
}
Muốn đẹp hơn? Có thể dùng thêm Google Fonts, icon từ Phosphor hoặc FontAwesome tùy phong cách.
4. Các thành phần nên chuẩn bị sẵn
- Template bài viết (post.html) → dễ reuse
- Thẻ meta SEO cơ bản: title, description, og:image
- Class CSS riêng cho bài viết, ảnh, chú thích
- CSS hỗ trợ dark mode (tuỳ chọn)
5. Gợi ý nâng cấp theo thời gian
- Thêm highlight code (dùng PrismJS hoặc highlight.js)
- Tạo layout responsive (CSS Grid / Flexbox)
- Thêm search đơn giản bằng JavaScript (Init Style)
- Deploy lên Cloudflare Pages / Netlify
Lý do nên tự tạo boilerplate thay vì dùng framework?
- Không bị ràng buộc update, dependency, JS nặng
- Tự do chỉnh sửa, gỡ bỏ, thêm tính năng theo style cá nhân
- Hiểu rõ từng dòng code – không còn cảm giác “framework làm gì mình không biết”
- Không lo lỗi build, lỗi plugin, chậm trang, SEO kém
Một blog tĩnh tự viết không cần cầu kỳ – chỉ cần đúng cấu trúc, rõ ràng, và đủ tiện để tái sử dụng. Sau khi có boilerplate cơ bản, bạn có thể dùng lại cho mọi bài viết, dự án, hoặc chia sẻ cho cộng đồng.
Chúc bạn tạo được nền móng vững chắc cho blog cá nhân – bắt đầu từ thứ đơn giản nhất: một file HTML sạch và một dòng CSS gọn.
Bình luận