Về tôi
Mình là Trần Mạnh Hùng và đây là trang blog cá nhân của mình. Trang web này được xây dựng bằng mã nguồn mở vibeblog và hiện đang được lưu trữ trên Vercel.
Mình bắt đầu viết blog cá nhân từ năm 2006 và đã sử dụng nhiều tên miền khác nhau trước khi chuyển sang sử dụng Tumblr vì tính đơn giản và cộng đồng sử dụng đông đảo. Sau đó, quay lại sử dụng WordPress rồi tự làm vibeblog và đây là nơi mình tiếp tục chia sẻ các bài viết hay về kiến thức, công nghệ, các thú vui sưu tầm, đời sống và nhiều chủ đề khác.
Blog manhhung.me
20/6/2026
Tự build một source blog đơn giản bằng Next.js. Source này giúp mình hoàn toàn có thể soạn note lúc rảnh bằng Craft rồi push thẳng lên blog mà không cần lọ mọ định dạng hay chèn hình khi đăng bài. Dưới đây là stack đang dùng:
- Core: Next.js 16 (App Router) + React 19 + TypeScript (Strict)
- Storage: * Supabase Postgres: Lưu text/Markdown (bảng: posts, pages, revisions, media, files, settings).
- Vercel Blob: Lưu file nhị phân. Đường dẫn tương đối (không lo lock-in).
- Auth: NextAuth v5 (Google/GitHub OAuth), bảo mật 1 chủ sở hữu (single owner).
- Editor: TipTap 3 (Markdown). Tự động tối ưu ảnh (AVIF/WebP qua sharp) dưới nền. Lưu lịch sử 3 phiên bản bài viết.
- Styles & Deploy: Tailwind CSS v4. Triển khai trên Vercel (lộ trình: Docker self-host).
- Yêu cầu: Node.js 20.9+
Ai hứng thú có thể xem qua tại đây. Mình build cho bản thân xài, cũng opensource luôn, nếu bạn thích thì cũng có thể tự kéo về xài thử. Mình cũng có một bài blog về nó.
25/2/2026
Quay lại AWS và Cloudflare APO. Chuyển sang theme mới của Wordpress: Twenty Twenty-Five và Thay font Geist Sans cho quen thuộc.
28/5/2025
Rảnh rỗi mình move về hosting ở Việt Nam test thử các gói ở đây. Mình đang dùng một host có giá chưa tới 100.000VNĐ một tháng, với Cpanel, CloudLinux, Litespeed và Quic.Cloud... cứ như là hồi ức quay lại, rất lâu rồi mình đã không sử dụng những cái này, rất cũ kỹ nhưng cũng rất hiệu quả.
23/7/2024
Tranh thủ đợt rảnh rỗi mình cài lại một con AWS E2 để chứa blog, vì blog rất nhẹ nên chỉ cần dùng một con c5.large (2 vcpu và 4GB ram) là dư thừa.
- Sử dụng stack của Bitnami cho nhanh và đơn giản, dùng Apache luôn, không cần thay đổi gì so với trước đây, chỉ vài nút bấm là xong, bên cạnh đó mình cũng dùng MariaDB RDS của AWS thay vì tự quản lý , rất khoẻ.
- Mình vẫn dùng Cloudflare nhưng đã nâng lên gói Pro để tận dụng Cloudflare Automatic Platform Optimization (APO) làm layer cache luôn, rất nhiều tiện tích. Do trước đây dùng managed hosting nên họ đã làm sẵn nhiều rồi, giờ self-host nên dùng firewall của Cloudflare là hoàn toàn cần thiết.
- Tắt analytic của Jetpack, thay vào đó là mình dùng lại Clicky, công cụ tracking quen thuộc hồi xưa.
Thêm 1 đoạn css để canh giữa cái caption ảnh nữa.
.wp-block-image figcaption {
text-align: center;
font-style:italic;
}
2/4/2023
Trang này mình sử dụng theme mặc định của Wordpress: Twenty Twenty-Three. Cứ mỗi khi Wordpress cập nhật có theme mới thì mình sử dụng luôn. Trang này sử dụng 3 plugin:
- Akismet Anti-Spam (có sẵn)
- Jetpack (cái gì cũng có, có cái tốt, có cái không, nhưng chỉ cần 1 plugin này có thể thay thế được gần chục cái khác cho nhu cầu cơ bản)
- Servebolt Optimizer (vì website này mình host ở Servebolt nên cài luôn plugin của nhà cung cấp, sẵn có tính năng "clear Cloudflare cache")
Mấy năm gần đây thì mình toàn dùng "Cache everything" của Cloudflare để cache HTML với JS, CSS. Còn hình ảnh thì dùng CDN của Jetpack, vừa nén ảnh được lại cũng... miễn phí luôn.
Phần giao diện thì mình không đụng đến custom code hay chèn thêm child theme, chỉ sử dụng theme editor có sẵn của Wordpress để cân chỉnh lại typography cho dễ đọc, toàn bộ web dùng một chữ "system font" và chèn thêm 2 đoạn custom CSS để fix cái mớ chữ nghĩa chỗ "social sharing" của Jetpack cho hợp nhãn:
#sharing_email .sharing_send, .sd-content ul li .option a.share-ustom, .sd-content ul li a.sd-button, .sd-content ul li.advanced a.share-more, .sd-content ul li.preview-item div.option.option-smart-off a, .sd-social-icon .sd-content ul li a.sd-button, .sd-social-icon-text .sd-content ul li a.sd-button, .sd-social-official .sd-content>ul>li .digg_button>a, .sd-social-official .sd-content>ul>li>a.sd-button, .sd-social-text .sd-content ul li a.sd-button{font-family:var(--wp--preset--font-family--system-font);font-size:var(--wp--preset--font-size--medium);font-weight:400;}
div.sharedaddy h3.sd-title{font-size:var(--wp--preset--font-size--medium);font-weight:400;font-family:var(--wp--preset--font-family--system-font);}