[{"content":"Nếu bạn muốn có một blog cá nhân nhanh, đẹp, miễn phí hoàn toàn, không quảng cáo, load nhanh, và có phần comment với đầy đủ tính năng (emoji, reaction, anonymous\u0026hellip;), thì combo này là lựa chọn tuyệt vời năm 2026:\nHugo (static site generator siêu nhanh) Theme Stack (thiết kế hiện đại, tối giản, dark mode đẹp) GitHub Pages (host miễn phí) Waline (comment system open-source, self-host trên Vercel + Neon Postgres, hỗ trợ anonymous, comment hiện ngay) Yêu cầu trước khi bắt đầu Tài khoản GitHub (public repo) Tài khoản Vercel (miễn phí, đăng nhập bằng GitHub) Tài khoản Neon (miễn phí, serverless Postgres) Máy tính có Git + Hugo installed (extended version khuyến nghị) Bước 1: Clone template Hugo Stack và setup site cơ bản Truy cập repo starter chính thức:\nhttps://github.com/CaiJimmy/hugo-theme-stack-starter\nClick Use this template → Create a new repository\nĐặt tên repo: Nếu muốn domain root: username.github.io (ví dụ: pngocthach.github.io) Nếu muốn subpath: bất kỳ tên nào (ví dụ: my-blog) → domain sẽ là username.github.io/my-blog Clone repo về máy:\ngit clone https://github.com/username/username.github.io.git cd username.github.io Cài Hugo nếu chưa có:\nmacOS: brew install hugo Windows: dùng Scoop/Chocolatey hoặc tải binary extended từ https://github.com/gohugoio/hugo/releases Linux (tùy distro): sudo apt install hugo (hoặc extended) Kiểm tra: hugo version (nên ≥ 0.120)\nChạy thử local:\nhugo server Mở http://localhost:1313 → thấy trang demo Stack là OK.\nDeploy lên GitHub Pages:\nVào repo Settings → Pages Source: Deploy from a branch → Branch: main → Folder: / (root) → Save Template đã có GitHub Actions workflow sẵn (.github/workflows/hugo.yml), chỉ cần push là tự build. Trang live sau 1-3 phút: https://username.github.io (hoặc /my-blog)\nBước 2: Setup Waline comment backend (Vercel + Neon Postgres) Waline là hệ thống comment open-source, nhẹ, hỗ trợ anonymous (comment không cần login), emoji/reaction đẹp.\nDeploy Waline trên Vercel (miễn phí):\nTruy cập: https://waline.js.org/en/guide/deploy/vercel.html Click nút Deploy (màu xanh) Đăng nhập Vercel bằng GitHub → Đặt tên project (ví dụ: my-waline-backend) → Create Chờ deploy xong (1-2 phút) → Lấy URL backend: https://my-waline-backend.vercel.app Tạo database Neon Postgres (free tier):\nTrong Vercel Dashboard → Tab Storage → Create Database → Chọn Neon Region: Singapore (aws-ap-southeast-1) (latency thấp nhất từ VN) Tạo DB → Open in Neon console Trong Neon SQL Editor → Paste script init từ:\nhttps://github.com/walinejs/waline/blob/main/assets/waline.pgsql\n→ Run để tạo tables Kết nối Neon với Vercel:\nTrong Vercel → Storage → Chọn Neon DB vừa tạo → Connect Tick tất cả Environments: Development, Preview, Production Tick Preview cho branching (bỏ Production nếu không cần) Custom Prefix: Để trống Connect → Vercel tự inject env vars Tạo admin account:\nTruy cập: https://my-waline-backend.vercel.app/ui/register Đăng ký user đầu tiên → thành admin Login tại /ui để quản lý comment sau này (nếu cần review spam) Bước 3: Tích hợp Waline vào Hugo Stack Chỉnh file config (config/_default/params.toml):\n[comments] enabled = true provider = \u0026#34;waline\u0026#34; [comments.waline] serverURL = \u0026#34;https://waline-backend-iota.vercel.app\u0026#34; # Thay bằng URL Vercel của bạn lang = \u0026#34;vi\u0026#34; reaction = true emoji = [ \u0026#34;https://unpkg.com/@waline/emojis@1.0.1/tw-emoji\u0026#34;, \u0026#34;https://unpkg.com/@waline/emojis@1.0.1/weibo\u0026#34; ] Override để comment hiển thị full URL (dễ quản lý trong admin):\nQuá trình deploy bạn có thể gặp tình trạng comment lưu trên Vercel chỉ nhận dạng bằng đường dẫn path relative \\p\\bai-viet thay vì https:\\\\domain\\p\\bai-viet. Khiến cực khó phân biệt bài viết.\nĐể xử lý việc này, hãy tạo file: layouts/partials/comments/provider/waline.html đè lên file của theme.\nNội dung file:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 \u0026lt;script src=\u0026#39;//unpkg.com/@waline/client@v2/dist/waline.js\u0026#39;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;link href=\u0026#39;//unpkg.com/@waline/client@v2/dist/waline.css\u0026#39; rel=\u0026#39;stylesheet\u0026#39;/\u0026gt; \u0026lt;div id=\u0026#34;waline\u0026#34; class=\u0026#34;waline-container\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;style\u0026gt; .waline-container { background-color: var(--card-background); border-radius: var(--card-border-radius); box-shadow: var(--shadow-l1); padding: var(--card-padding); --waline-font-size: var(--article-font-size); } .waline-container .wl-count { color: var(--card-text-color-main); } \u0026lt;/style\u0026gt; {{- $permalink := .Permalink -}} {{- with .Site.Params.comments.waline -}} {{- $config := dict \u0026#34;el\u0026#34; \u0026#34;#waline\u0026#34; \u0026#34;dark\u0026#34; `html[data-scheme=\u0026#34;dark\u0026#34;]` \u0026#34;path\u0026#34; $permalink -}} {{- $replaceKeys := dict \u0026#34;serverurl\u0026#34; \u0026#34;serverURL\u0026#34; \u0026#34;requiredmeta\u0026#34; \u0026#34;requiredMeta\u0026#34; \u0026#34;wordlimit\u0026#34; \u0026#34;wordLimit\u0026#34; \u0026#34;pagesize\u0026#34; \u0026#34;pageSize\u0026#34; \u0026#34;imageuploader\u0026#34; \u0026#34;imageUploader\u0026#34; \u0026#34;texrenderer\u0026#34; \u0026#34;texRenderer\u0026#34; \u0026#34;turnstilekey\u0026#34; \u0026#34;turnstileKey\u0026#34; -}} {{- range $key, $val := . -}} {{- if ne $val nil -}} {{- $replaceKey := index $replaceKeys $key -}} {{- $k := default $key $replaceKey -}} {{- $config = merge $config (dict $k $val) -}} {{- end -}} {{- end -}} \u0026lt;script id=\u0026#34;waline-config\u0026#34; type=\u0026#34;application/json\u0026#34;\u0026gt; {{ $config | jsonify | safeJS }} \u0026lt;/script\u0026gt; \u0026lt;script\u0026gt; /// Waline client configuration see: https://waline.js.org/en/reference/client.html const walineConfig = JSON.parse(document.getElementById(\u0026#39;waline-config\u0026#39;).textContent); Waline.init(walineConfig); \u0026lt;/script\u0026gt; {{- end -}} .Permalink sẽ tự động lấy full URL (bao gồm domain), giúp admin Waline hiển thị comment dưới dạng https://yourblog.com/p/bai-viet/ thay vì path tương đối → cực kì dễ nhận biết blog nào. Bước 4: Cách viết bài mới và cập nhật blog Sau khi đã setup xong \u0026ldquo;bộ khung\u0026rdquo;, việc viết bài hằng ngày sẽ cực kỳ đơn giản:\nTạo bài viết mới: Bạn sử dụng terminal và chạy lệnh:\nhugo new content post/ten-bai-viet-cua-ban/index.md Lệnh này sẽ tạo ra một thư mục mới trong content/post/ kèm theo file index.md. Đây là nơi bạn sẽ viết nội dung bài viết.\nSoạn thảo nội dung: Mở file index.md vừa tạo. Bạn sẽ thấy phần đầu (nằm giữa cặp +++) gọi là Front Matter—nơi chứa thông tin meta như tiêu đề, ngày tháng, mô tả, ảnh bìa\u0026hellip; Phía dưới đó là nơi bạn viết nội dung bằng cú pháp Markdown quen thuộc.\nKiểm tra cục bộ: Chạy hugo server để xem bài viết hiển thị như thế nào trên máy tính mình trước.\nĐăng bài (Cực kỳ quan trọng): Khi đã ưng ý, bạn chỉ cần thực hiện 3 lệnh Git cơ bản:\ngit add . git commit -m \u0026#34;Thêm bài viết mới: Tên bài viết\u0026#34; git push origin main Ngay sau khi push, GitHub Actions sẽ tự động làm mọi việc còn lại. Sau khoảng 1 phút, bài viết mới của bạn sẽ xuất hiện \u0026ldquo;chễm chệ\u0026rdquo; trên blog live!\nKết luận Tổng chi phí: 0 đồng (tận dụng free tier của GitHub Pages, Vercel và Neon là quá đủ dùng cho blog cá nhân). Ưu điểm: Hệ thống bình luận đầy đủ tính năng, hỗ trợ ẩn danh (anonymous), hiển thị ngay lập tức cùng với emoji và reaction dễ thương. Tự động hóa: Sau khi setup xong, công việc duy nhất của bạn là tập trung viết bài bằng Markdown và push code lên GitHub. GitHub Actions sẽ lo liệu phần còn lại (build và deploy) để bài viết của bạn xuất hiện trên blog ngay lập tức. Nhược điểm: Nếu traffic tăng cao đột biến, có thể cần nâng cấp Neon/Vercel (nhưng rất hiếm gặp với blog cá nhân). Vậy là chỉ với vài bước đơn giản và không tốn bất kỳ chi phí nào, bạn đã có cho mình một trang blog xịn sò để thỏa sức viết lách rồi. Giờ chỉ còn việc sắp xếp thời gian để ra bài viết thôi. Cảm ơn đã đọc và hẹn gặp lại ở các bài viết sau! Nếu gặp phải lỗi hoặc cần hỗ trợ gì, bạn cứ để lại comment bên dưới nhé!\nTài liệu tham khảo Hugo Theme Stack Starter Template (repo chính thức để clone và bắt đầu nhanh):\nhttps://github.com/CaiJimmy/hugo-theme-stack-starter\nHugo Theme Stack Official Documentation (config comments, Waline, và tùy chỉnh chung):\nhttps://stack.jimmycai.com/\nPhần Comments: https://stack.jimmycai.com/config/comments\nHugo Official Guide: Host and Deploy on GitHub Pages (deploy với GitHub Actions):\nhttps://gohugo.io/host-and-deploy/host-on-github-pages/\nWaline Official Documentation (deploy trên Vercel, config client, ecosystem):\nhttps://waline.js.org/en/\nDeploy Vercel: https://waline.js.org/en/guide/deploy/vercel.html\nClient config (path, lang, reaction): https://waline.js.org/en/reference/client/props.html\nNeon Docs: Integrate with Vercel (kết nối Neon Postgres với Vercel, env vars, branching):\nhttps://neon.com/docs/guides/vercel-overview\nSource code của chính blog này (để bạn tham khảo thực tế):\nhttps://github.com/pngocthach/pngocthach.github.io\n","date":"2026-03-08T19:25:00+07:00","permalink":"/vi/p/c%C3%A1ch-t%C3%B4i-setup-blog-c%C3%A1-nh%C3%A2n-nhanh-%C4%91%E1%BA%B9p-mi%E1%BB%85n-ph%C3%AD/","title":"Cách tôi setup blog cá nhân nhanh, đẹp, miễn phí"}]