NateCueSetup Website Live với Claude Code, GitHub, Vercel và Supabase
Đây là hướng dẫn đầy đủ để đưa một website từ con số không lên live thật sự - dùng bộ công cụ mà nhiều developer và non-dev đang dùng năm 2026. Bạn sẽ có website chạy được, có domain riêng, và có database thật sự sau khi đọc xong bài này.
Nếu bạn đã từng nghe đến Vercel, GitHub, Supabase nhưng không biết chúng kết nối với nhau như thế nào - đây là bài đúng chỗ. Không cần biết code sâu, chỉ cần đọc từng bước và làm theo. Claude Code sẽ lo phần viết code, bạn lo phần vận hành.
Bức tranh toàn cảnh - Stack này hoạt động như thế nào?
Trước khi làm, hãy hiểu rõ vai trò của từng công cụ:
| Công cụ | Vai trò | Tương đương |
|---|---|---|
| Claude Code | Viết code theo yêu cầu của bạn | Người lập trình |
| GitHub | Lưu trữ code, quản lý lịch sử thay đổi | Google Drive cho code |
| Vercel | Tự động build và deploy website lên internet | Hosting thông minh |
| Supabase | Database và backend, không cần server riêng | Firebase nhưng open-source |
Flow hoạt động như sau:
Claude Code viết code
→ Bạn push code lên GitHub
→ Vercel tự động deploy (website live ngay)
→ Website đọc/ghi data từ SupabaseMỗi lần bạn push code mới lên GitHub, Vercel tự động build lại và deploy. Không cần tay nhấn nút gì cả.
Chuẩn bị trước khi bắt đầu
Tạo tài khoản miễn phí trên 4 dịch vụ này (tất cả đều có free tier đủ dùng cho project cá nhân):
- github.com - tài khoản GitHub
- vercel.com - đăng ký bằng tài khoản GitHub luôn cho tiện
- supabase.com - tài khoản Supabase
- Claude Code - cài đặt theo hướng dẫn tại claude.ai/code
Với domain riêng: Nếu bạn muốn gắn tên miền riêng (ví dụ yourname.com thay vì yourproject.vercel.app), cần mua trước. Xem hướng dẫn mua domain ở Bước 4.
Bước 1 - Tạo project với Claude Code
Mở Claude Code và yêu cầu nó tạo project theo ý bạn. Ví dụ:
“Tạo cho mình một website cá nhân đơn giản bằng React + Vite. Có trang Home, About, và một form liên hệ. Dùng Tailwind CSS cho styling.”
Claude Code sẽ:
- Tạo cấu trúc thư mục chuẩn
- Viết code cho từng trang
- Setup file config cần thiết
- Chạy thử trên máy bạn (localhost)
Kiểm tra trước khi tiếp tục:
Chạy thử website trên máy bằng lệnh mà Claude Code hướng dẫn (thường là npm run dev). Website hiện ra ở localhost:5173 hoặc tương tự - thấy đúng ý là OK.
Tip: Nếu bạn muốn có database, hỏi Claude Code thêm bước này: “Giúp mình setup Supabase client để kết nối với database.” Claude Code sẽ tạo sẵn file config để bước 5 bạn chỉ cần điền thông tin vào.
Bước 2 - Đẩy code lên GitHub
Tạo repo mới trên GitHub:
- Vào github.com/new
- Đặt tên repo (ví dụ:
my-personal-site) - Để Private nếu bạn không muốn người khác thấy code; Public nếu OK
- Nhấn Create repository
Push code lên:
Cách đơn giản nhất cho người mới là dùng GitHub Desktop (cài tại desktop.github.com):
- Mở GitHub Desktop > Add Existing Repository
- Trỏ vào thư mục project Claude Code vừa tạo
- Nếu chưa có Git, GitHub Desktop sẽ hỏi “Initialize” - nhấn đồng ý
- Điền Summary commit đầu tiên:
"Initial commit" - Nhấn Commit to main
- Nhấn Publish repository để đẩy lên GitHub
Vào lại GitHub.com - bạn sẽ thấy code đã xuất hiện trong repo.
Bước 3 - Deploy lên Vercel
Đây là bước mọi người hay ấn tượng nhất vì nhanh đến bất ngờ.
- Vào vercel.com, đăng nhập bằng GitHub
- Nhấn Add New Project
- Chọn repo vừa tạo trên GitHub
- Vercel tự nhận diện framework (React/Vite/Next.js…) và cấu hình build tự động
- Nhấn Deploy
Khoảng 1-2 phút sau, website của bạn đã live tại địa chỉ dạng yourproject.vercel.app.
Vercel sẽ tự động re-deploy mỗi khi bạn push code mới lên GitHub. Đây là phần mạnh nhất - bạn chỉ cần code và push, Vercel lo phần còn lại.
Bước 4 - Mua domain và gắn vào Vercel
Mua domain ở đâu?
Một số nhà cung cấp domain phổ biến:
- namecheap.com - rẻ, giao diện dễ dùng, phổ biến với dev
- cloudflare.com/registrar - giá gốc không markup, tích hợp tốt
- godaddy.com - quen thuộc, nhiều khuyến mãi
Mua tên miền .com thường khoảng $10-15/năm. Sau khi mua xong, làm theo bước sau.
Gắn domain vào Vercel:
- Vào Vercel > Project của bạn > Settings > Domains
- Nhấn Add > nhập tên miền bạn vừa mua (ví dụ:
yourname.com) - Vercel sẽ hiện ra thông tin DNS cần cấu hình
Cấu hình DNS:
Vào trang quản lý domain của bạn (Namecheap/Cloudflare…), tìm mục DNS Records và thêm:
| Type | Name | Value |
|---|---|---|
A | @ | 76.76.21.21 (IP của Vercel) |
CNAME | www | cname.vercel-dns.com |
Sau khi lưu, chờ khoảng 10-60 phút cho DNS propagate. Vercel sẽ tự động cấp HTTPS/SSL miễn phí - không cần làm thêm gì.
Với Cloudflare: Nếu bạn dùng Cloudflare, tắt Proxy (chuyển từ màu cam sang xám) cho record
Ađể Vercel tự quản lý SSL.
Bước 5 - Kết nối Supabase
Supabase cho bạn một PostgreSQL database thật sự, kèm theo API tự động - không cần tự viết backend.
Tạo project Supabase:
- Vào supabase.com > New Project
- Đặt tên project, chọn region gần nhất (Singapore cho người dùng Đông Nam Á)
- Đặt password database (lưu lại cẩn thận)
- Chờ ~2 phút để Supabase khởi tạo
Lấy API keys:
Vào Settings > API trong project Supabase, bạn sẽ thấy:
- Project URL:
https://xxxxxx.supabase.co - anon/public key: Key dùng phía client (đọc/ghi theo rule bạn đặt)
- service_role key: Key admin - chỉ dùng phía server, không để lộ ra ngoài
Thêm keys vào Vercel:
- Vào Vercel > Settings > Environment Variables
- Thêm 2 biến:
VITE_SUPABASE_URL=https://xxxxxx.supabase.coVITE_SUPABASE_ANON_KEY=eyJ...(anon key)
- Nhấn Save > Vercel sẽ tự redeploy
Gọi lại Claude Code:
Mở Claude Code và nói: “Mình đã có Supabase project. URL là ... và anon key là .... Giúp mình kết nối và tạo một bảng contacts để lưu form liên hệ nhé.”
Claude Code sẽ:
- Cài
@supabase/supabase-js - Tạo file
supabase.jsvới client setup - Viết code để đọc/ghi data từ form của bạn
Tạo bảng trong Supabase:
Vào Table Editor trong Supabase và tạo bảng theo cấu trúc Claude Code đề xuất. Hoặc dùng SQL Editor với câu lệnh Claude Code viết sẵn.
Bước 6 - Kiểm tra và hoàn thiện
Checklist trước khi “xong”:
- Website mở được trên domain riêng với
https:// - Thay đổi code > push GitHub > Vercel tự deploy < 2 phút
- Form hoặc tính năng cần database đọc/ghi đúng lên Supabase
- Kiểm tra trên điện thoại (mobile responsive)
- Không có error đỏ trong Console (F12 > Console)
Câu hỏi thường gặp (FAQ)
Stack này tốn bao nhiêu tiền/tháng?
Cho project cá nhân hoặc nhỏ: gần như miễn phí hoàn toàn.
- GitHub: Miễn phí cho repo public và private cơ bản
- Vercel: Free tier đủ dùng cho cá nhân (100GB bandwidth/tháng)
- Supabase: Free tier gồm 500MB database, 2GB file storage, 50,000 active users/tháng
- Domain: ~$10-15/năm - khoản duy nhất bạn phải trả
Khi traffic lớn hoặc dùng nhiều resource hơn thì mới cần nâng lên gói trả phí.
Tôi không biết code gì cả, có làm được không?
Được, với điều kiện bạn sẵn sàng đọc và hiểu những gì Claude Code tạo ra ở mức cơ bản. Claude Code sẽ viết toàn bộ code, nhưng bạn cần biết file nào dùng để làm gì - như vậy khi cần chỉnh sửa hay debug, bạn biết hỏi Claude Code như thế nào.
Phần khó nhất với người mới thường là cấu hình DNS domain và biến môi trường (environment variables). Đọc kỹ Bước 4 và 5 là ổn.
Tại sao không dùng WordPress hay Wix cho đơn giản hơn?
WordPress và Wix phù hợp nếu bạn cần website nhanh và không có kế hoạch mở rộng tính năng custom. Stack Claude Code + GitHub + Vercel + Supabase phù hợp khi:
- Bạn cần tính năng riêng không có sẵn trong template
- Bạn muốn hiểu và kiểm soát hoàn toàn tech stack
- Bạn muốn học cách vận hành một web app hiện đại
- Performance quan trọng (Vercel + static site nhanh hơn WordPress đáng kể)
Supabase khác gì Firebase?
Cả hai đều là “Backend-as-a-Service” giúp bạn có database và API mà không cần viết backend. Điểm khác biệt chính: Supabase dùng PostgreSQL (SQL chuẩn, mạnh hơn cho dữ liệu có cấu trúc) và là open-source (có thể tự host). Firebase dùng NoSQL và là sản phẩm của Google. Với người mới bắt đầu, Supabase dễ học hơn vì SQL quen thuộc và documentation rõ ràng.
Vercel deploy xong nhưng website báo lỗi trắng màn hình - sao vậy?
Thường có 3 nguyên nhân:
- Lỗi build: Vào Vercel > Deployments > xem log build, tìm dòng màu đỏ và copy cho Claude Code
- Thiếu environment variables: Kiểm tra Vercel Settings > Environment Variables có đủ chưa
- Đường dẫn import sai: Trên Windows thường không phân biệt hoa/thường nhưng trên Linux (server Vercel) thì có - kiểm tra case sensitivity trong tên file và import
Tổng kết
Bộ 4 công cụ Claude Code + GitHub + Vercel + Supabase tạo ra một vòng tròn khép kín: bạn mô tả ý tưởng, Claude Code viết code, GitHub lưu lịch sử, Vercel đưa lên internet, Supabase giữ data. Mỗi phần làm đúng một việc và kết nối với nhau rất trơn tru. Đây là stack mà nhiều indie developer và startup nhỏ đang dùng thật - không phải chỉ để học - vì nó đủ mạnh mà gần như không tốn tiền khi mới bắt đầu.