Giới thiệu
Trong khóa học này, bạn sẽ xây dựng một website doanh nghiệp hoàn chỉnh — có trang giới thiệu, danh mục sản phẩm, blog, và giỏ hàng đơn giản — mà không tốn một đồng hosting hay CMS nào. Toàn bộ stack đều miễn phí: HTML/CSS/JavaScript thuần cho phần giao diện, Sanity CMS để quản lý nội dung, GitHub để lưu trữ code, và Netlify để deploy tự động.
Đây là stack thực tế nhiều freelancer và agency nhỏ đang dùng để bàn giao website cho khách hàng. Khách hàng tự cập nhật nội dung qua Sanity Studio mà không cần đụng vào code, còn bạn không phải trả tiền server hàng tháng.
Những gì bạn sẽ xây dựng
Cuối khóa học, bạn sẽ có một website hoàn chỉnh với các tính năng sau: trang chủ có banner và highlight sản phẩm, trang danh mục sản phẩm lấy dữ liệu động từ Sanity, trang chi tiết sản phẩm, trang blog với bài viết quản lý qua CMS, form liên hệ, và giỏ hàng lưu trên localStorage.
Toàn bộ nội dung — tên sản phẩm, giá, hình ảnh, bài blog — đều được kéo từ Sanity API về bằng JavaScript fetch. Khi khách hàng chỉnh sửa trên Sanity Studio, website tự động hiển thị nội dung mới mà không cần rebuild hay deploy lại.
Cài đặt công cụ cần thiết
Bạn cần cài đúng 2 thứ trên máy: VS Code và Node.js. Node.js không phải để viết backend — chỉ cần để chạy Sanity CLI khi khởi tạo project.
Tải VS Code tại code.visualstudio.com, cài xong mở terminal tích hợp bằng tổ hợp Ctrl+` (backtick). Kiểm tra Node.js đã cài chưa bằng lệnh sau:
Nếu terminal trả về số phiên bản (ví dụ v18.17.0 và 9.6.7) là đã sẵn sàng. Nếu báo lỗi command not found thì tải Node.js tại nodejs.org, chọn bản LTS.
Cài thêm extension Prettier trong VS Code để tự format code: nhấn Ctrl+Shift+X, tìm Prettier - Code formatter, cài vào. Đây là thói quen tốt ngay từ đầu, giúp code luôn gọn gàng nhất quán.
Tạo tài khoản các dịch vụ
Bạn cần đăng ký 3 tài khoản, tất cả đều có gói miễn phí đủ dùng cho dự án thực tế:
Sanity.io là nơi lưu trữ nội dung (sản phẩm, bài viết, hình ảnh). Gói Free cho phép 2 người dùng, 10GB băng thông API mỗi tháng — quá đủ cho website doanh nghiệp nhỏ. Đăng ký tại sanity.io bằng tài khoản Google hoặc GitHub.
GitHub là nơi lưu code. Mọi thay đổi bạn push lên đây sẽ tự động trigger Netlify deploy lại website. Đăng ký tại github.com.
Netlify là nơi host website HTML tĩnh hoàn toàn miễn phí. Gói Free cho 100GB băng thông mỗi tháng và tự động deploy khi có commit mới trên GitHub. Đăng ký tại netlify.com, nên dùng tùy chọn Continue with GitHub để liên kết 2 tài khoản luôn.
Sau khi đăng ký xong, không cần làm gì thêm ở bước này. Các bài tiếp theo sẽ hướng dẫn từng bước tạo project Sanity, tạo repository GitHub, và kết nối với Netlify.
Tổng kết
Bạn đã nắm được bức tranh tổng thể của khóa học: một website tĩnh HTML được cấp dữ liệu bởi Sanity CMS, lưu code trên GitHub, và deploy tự động qua Netlify — toàn bộ miễn phí. Bước cần làm ngay bây giờ là cài VS Code, cài Node.js, và tạo đủ 3 tài khoản Sanity, GitHub, Netlify. Bài tiếp theo sẽ bắt tay tạo project Sanity đầu tiên và định nghĩa schema cho sản phẩm.