Cách Host Website Tĩnh Miễn Phí Năm 2026: GitHub Pages, Cloudflare Pages & Form Liên Hệ

Chọn đúng nền tảng lưu trữ website tĩnh có thể giúp bạn tiết kiệm hàng triệu đồng mỗi năm trong khi vẫn đảm bảo tốc độ tải nhanh, bảo mật cao và dễ dàng bảo trì. Trong 2026, các gói miễn phí đã trưởng thành đáng kể - các nền tảng như GitHub Pages và Cloudflare Pages cung cấp hạ tầng sẵn sàng cho môi trường production mà không tốn một đồng nào. Tuy nhiên có một thách thức mà hầu hết các hướng dẫn đều bỏ qua: làm thế nào để xử lý form liên hệ trên website tĩnh khi không có server nào chạy phía sau? Bài viết này sẽ hướng dẫn bạn toàn bộ quy trình thiết lập, từ việc chọn nền tảng cho đến kết nối form liên hệ hoạt động thực tế, kèm theo ví dụ cụ thể và những giới hạn thực tế bạn cần biết trước khi quyết định.

Tại sao hosting tĩnh miễn phí đáng để bạn quan tâm

Một website tĩnh phục vụ trực tiếp các file HTML, CSS và JavaScript đã được dựng sẵn đến trình duyệt. Không có PHP, không có runtime Node.js, và không có truy vấn cơ sở dữ liệu nào xảy ra mỗi khi tải trang. Chính sự đơn giản đó là lý do tại sao hosting trang tĩnh miễn phí lại đáng tin cậy đến vậy: không có gì để bị crash, vá lỗi hay phải mở rộng quy mô.

Đối với các doanh nghiệp nhỏ, portfolio cá nhân, landing page SaaS và trang tài liệu kỹ thuật, hosting tĩnh đáp ứng mọi tiêu chí:

• Tốc độ: Các file được phục vụ từ node CDN edge, thường dưới 100ms trên toàn cầu.
• Bảo mật: Không có runtime phía server đồng nghĩa với bề mặt tấn công nhỏ hơn đáng kể.
• Chi phí: Cả GitHub Pages lẫn Cloudflare Pages đều miễn phí cho các dự án công khai và nhiều dự án riêng tư.
• Đơn giản: Chỉ cần push code lên repository, site sẽ tự động được triển khai.

Hạn chế thực sự duy nhất là các tính năng động. Bất cứ thứ gì yêu cầu logic phía server - chẳng hạn xác thực người dùng, giỏ hàng hay xử lý form - đều cần một dịch vụ bên ngoài. Hãy ghi nhớ điều này khi chúng ta đi qua các bước thiết lập.

So sánh nền tảng: GitHub Pages vs Cloudflare Pages

Kết luận: Nếu đối tượng của bạn là toàn cầu và bạn muốn tốc độ tải nhanh nhất có thể, Cloudflare Pages là lựa chọn tốt hơn. Nếu nhóm của bạn đã quen làm việc trên GitHub và muốn thiết lập đơn giản nhất, GitHub Pages là hoàn toàn phù hợp.

Hướng dẫn từng bước: Triển khai trên GitHub Pages

Ví dụ này giả định bạn đã có một site HTML/CSS đơn giản sẵn sàng để xuất bản. Nếu bạn đang dùng static site generator như Hugo hay Jekyll, quy trình gần như tương tự.

1. Tạo repository trên GitHub. Truy cập github.com/new và tạo một repository công khai. Đặt tên là your-username.github.io nếu bạn muốn site chạy ở tên miền gốc, hoặc bất kỳ tên nào khác nếu muốn chạy ở đường dẫn thư mục con.
2. Push các file site lên. Từ thư mục dự án trên máy tính, chạy lệnh:
   Sao chép

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Bật GitHub Pages. Trong repository, vào Settings > Pages. Ở mục "Source", chọn nhánh main và thư mục /root (hoặc /docs nếu output build của bạn nằm ở đó). Nhấn Save.
4. Chờ triển khai. GitHub sẽ build và triển khai trong vòng 1-3 phút. URL trực tiếp (ví dụ: https://your-username.github.io) sẽ xuất hiện trong bảng cài đặt Pages.
5. Kết nối tên miền tùy chỉnh (tùy chọn). Thêm file CNAME vào thư mục gốc của repository chứa tên miền của bạn (ví dụ: www.yoursite.com). Sau đó cập nhật nhà cung cấp DNS để trỏ bản ghi CNAME về your-username.github.io. GitHub sẽ tự động cấp chứng chỉ SSL trong vài phút.

Hướng dẫn từng bước: Triển khai trên Cloudflare Pages

1. Đăng ký hoặc đăng nhập vào Cloudflare. Truy cập pages.cloudflare.com và kết nối tài khoản GitHub hoặc GitLab của bạn.
2. Tạo dự án mới. Nhấn "Create a project", sau đó chọn "Connect to Git". Chọn repository của bạn từ danh sách.
3. Cấu hình cài đặt build. Nếu site của bạn là HTML thuần, để trống trường lệnh build và đặt thư mục output là / hoặc nơi chứa file index.html của bạn. Với Hugo, đặt lệnh build là hugo và output là public. Với Jekyll, dùng jekyll build và output là _site.
4. Triển khai. Nhấn "Save and Deploy". Cloudflare sẽ clone repository, chạy build và xuất bản lên mạng edge toàn cầu. Site của bạn sẽ ngay lập tức nhận được subdomain *.pages.dev.
5. Thêm tên miền tùy chỉnh. Trong bảng điều khiển dự án, vào "Custom domains" và nhập tên miền của bạn. Nếu tên miền đã được quản lý bởi Cloudflare DNS, chỉ cần một cú nhấp là xong. Nếu không, bạn cần thêm bản ghi CNAME tại nhà đăng ký tên miền trỏ về địa chỉ *.pages.dev của bạn.

Mỗi lần bạn git push lên nhánh chính đều sẽ kích hoạt triển khai lại tự động. Cloudflare cũng tạo các bản triển khai xem trước cho pull request, rất hữu ích để xem xét thay đổi trước khi đưa lên môi trường production.

Thêm form liên hệ vào website tĩnh của bạn

Đây là nơi hầu hết các hướng dẫn dừng lại, và cũng là nơi nhiều người gặp khó khăn nhất. Một form liên hệ trên website tĩnh không thể tự xử lý dữ liệu gửi đến - không có server nào đang lắng nghe. Bạn có ba lựa chọn thực tế:

• Dịch vụ backend form (khuyến nghị): Bạn trỏ thuộc tính action của form đến một endpoint của bên thứ ba - nơi nhận dữ liệu gửi đến, xác thực và gửi email cho bạn.
• Serverless function: Bạn viết một function nhỏ (Cloudflare Workers, AWS Lambda) để xử lý form. Cách này hoạt động được nhưng đòi hỏi phải viết code và bảo trì liên tục.
• JavaScript fetch(): Bạn dùng Fetch API của trình duyệt để gửi dữ liệu form đến một backend endpoint. Xem hướng dẫn của chúng tôi về cách gửi dữ liệu HTML form bằng JavaScript fetch() để biết chi tiết kỹ thuật.

Con đường nhanh nhất để có form hoạt động là dùng một dịch vụ form chuyên dụng. Dưới đây là ví dụ cụ thể sử dụng Sendform:

Ví dụ thực tế: Form liên hệ hoạt động trong 5 phút

Giả sử bạn có một site portfolio đã triển khai trên GitHub Pages. Bạn muốn khách truy cập có thể gửi tin nhắn cho bạn, và những tin nhắn đó được chuyển đến hộp thư của bạn. Đây là toàn bộ code HTML:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">Họ tên của bạn</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email của bạn</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Nội dung tin nhắn</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Gửi tin nhắn</button>
</form>

Đó là toàn bộ phần tích hợp. Bạn thay YOUR_FORM_ID bằng ID từ bảng điều khiển Sendform của bạn, và mỗi lần gửi form sẽ được chuyển đến địa chỉ email bạn đã đăng ký. Không cần code backend, không cần server, không có hóa đơn hạ tầng hàng tháng. Để biết thêm các mẫu UX nâng cao, bao gồm trang chuyển hướng sau khi gửi form và email xác nhận, hãy đọc hướng dẫn của chúng tôi về các phương pháp tốt nhất cho form trên website tĩnh.

Nếu bạn đang sử dụng website builder kết hợp với site tĩnh của mình, chúng tôi cũng hướng dẫn chi tiết quy trình tích hợp trong bài viết về cách tích hợp Sendform với website builder của bạn.

Những lỗi phổ biến cần tránh

Sau khi hỗ trợ hàng nghìn người dùng thiết lập hosting website tĩnh miễn phí, đây là những lỗi gây ra nhiều bực bội nhất:

1. Quên tạo trang 404

Cả GitHub Pages lẫn Cloudflare Pages đều sẽ hiển thị trang lỗi mặc định nếu không tìm thấy route. Hãy tạo file 404.html tùy chỉnh trong thư mục gốc. Điều này giữ người dùng ở lại trên site của bạn và bảo vệ trải nghiệm thương hiệu.

2. Commit thông tin bí mật lên repository công khai

API key, thông tin bí mật của endpoint form và địa chỉ email không bao giờ được lưu trong repository GitHub công khai. Hãy dùng biến môi trường trong Cloudflare Pages, hoặc tham chiếu đến file cấu hình riêng tư được liệt kê trong .gitignore.

3. Xây dựng form mà không có kế hoạch backend

Đây là lỗi phổ biến nhất. Các lập trình viên xây dựng một form liên hệ đẹp mắt, push lên GitHub Pages, rồi phát hiện vào ngày ra mắt rằng form âm thầm thất bại. Hãy quyết định backend form của bạn trước khi viết một thẻ <input> nào. Các công cụ như Sendform cho phép bạn thiết lập form liên hệ gửi thẳng đến email mà không cần code, giúp loại bỏ hoàn toàn vấn đề backend.

4. Bỏ qua vấn đề cache build

Nếu site của bạn không cập nhật sau khi push, CDN cache có thể đang phục vụ các file cũ. Cloudflare Pages tự động xóa cache khi triển khai. GitHub Pages lan truyền thay đổi chậm hơn; hãy chờ tới 10 phút, hoặc thêm query string vào URL asset của bạn trong quá trình kiểm thử.

5. Dùng đường dẫn tương đối không đúng cách

Nếu site GitHub Pages của bạn nằm tại username.github.io/project-name/ (thư mục con), tất cả đường dẫn asset phải tính đến tiền tố đó. Liên kết đến /styles.css sẽ bị lỗi. Hãy dùng đường dẫn tương đối (./styles.css) hoặc cấu hình cài đặt baseURL của static site generator để khớp với thư mục con.

6. Bỏ qua việc tự động hóa quy trình xử lý form

Khi form của bạn đã thu thập được dữ liệu gửi đến, bạn có thể làm được nhiều hơn là chỉ nhận email. Sendform hỗ trợ webhook và các tích hợp cho phép bạn tự động chuyển dữ liệu gửi đến Slack, CRM hoặc bảng tính. Hướng dẫn của chúng tôi về tự động hóa quy trình xử lý form với webhook và API chỉ cho bạn cách thiết lập mà không cần viết code backend.

Kết luận

Hosting website tĩnh miễn phí chưa bao giờ mạnh mẽ như hiện tại. GitHub Pages phù hợp với các nhóm đã gắn bó với hệ sinh thái GitHub, trong khi Cloudflare Pages mang lại hiệu suất toàn cầu tốt hơn và gói miễn phí hào phóng hơn. Thách thức thực sự không nằm ở bản thân việc hosting - mà là các tính năng động, đặc biệt là form liên hệ, mới là thứ khiến mọi người vấp ngã. Bằng cách kết hợp một trong hai nền tảng với dịch vụ form chuyên dụng, bạn sẽ có một website chuyên nghiệp, hoạt động đầy đủ với chi phí hạ tầng bằng không. Hãy bắt đầu với một trong các hướng dẫn nền tảng ở trên, đưa site của bạn lên mạng, rồi kết nối form liên hệ bằng Sendform để xử lý dữ liệu gửi đến một cách đáng tin cậy ngay từ ngày đầu tiên.

Thêm form liên hệ vào website tĩnh của bạn trong vài phút

Dùng Sendform để thu thập dữ liệu form từ bất kỳ website tĩnh nào được host trên GitHub Pages hoặc Cloudflare Pages. Không cần code backend, không cần cấu hình server, không rắc rối. Chỉ cần trỏ thuộc tính action của form đến endpoint của bạn là xong.

Bắt đầu miễn phí tại Sendform.net →

Câu hỏi thường gặp