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 hosting 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 trang web nhanh, bảo mật và dễ bảo trì. Các gói miễn phí hiện nay đã trưởng thành đáng kể, và các nền tảng như GitHub Pages hay 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 đứng sau xử lý? Bài viết này sẽ hướng dẫn bạn toàn bộ quy trình - từ việc chọn nền tảng đến cách kết nối form liên hệ hoạt động được, kèm 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 build sẵn tới trình duyệt. Không có PHP, không có Node.js runtime, và không có truy vấn cơ sở dữ liệu nào xảy ra trên mỗi lần 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 scale.

Đối với 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ừ CDN edge node, 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 và Cloudflare Pages đều miễn phí cho dự án công khai và nhiều dự án riêng tư.
• Đơn giản: Push code lên repository và trang web 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 kỳ thứ gì yêu cầu logic phía server - như 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 đó 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 thời gian 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 với GitHub và muốn thiết lập đơn giản nhất có thể, GitHub Pages 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ả sử bạn đã có một trang 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ư giống hệt nhau.

1. Tạo một GitHub repository. 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 phục vụ tại tên miền gốc, hoặc bất kỳ tên nào nếu bạn muốn đặt ở đường dẫn con.
2. Push các file trang web của bạn. Từ thư mục dự án cục bộ, chạy lệnh:

   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. Kích hoạt GitHub Pages. Trong repository, vào Settings > Pages. Dưới 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à deploy 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 tới 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 đó "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 trang của bạn là HTML thuần, để 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 của bạn, chạy lệnh build và xuất bản lên mạng edge toàn cầu. Trang của bạn sẽ được cấp ngay một 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ỏ tới địa chỉ *.pages.dev của bạn.

Mỗi lần git push lên nhánh chính sẽ kích hoạt một lần redeploy tự động. Cloudflare cũng tạo preview deployment cho các 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à chỗ mà hầu hết các hướng dẫn dừng lại, và cũng là nơi nhiều người bị mắc kẹ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ụ form backend (khuyến nghị): Bạn trỏ thuộc tính action của form tới một endpoint của bên thứ ba, nơi sẽ nhận dữ liệu gửi, xác thực và gửi email cho bạn.
• Serverless function: Bạn viết một hàm nhỏ (Cloudflare Workers, AWS Lambda) để xử lý form. Cách này hoạt động 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 để POST dữ liệu form tới một endpoint backend. Xem hướng dẫn của chúng tôi về cách gửi dữ liệu form HTML bằng JavaScript fetch() để biết chi tiết kỹ thuật.

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

Ví Dụ Cụ Thể: Form Liên Hệ Hoạt Động Trong 5 Phút

Trước khi thêm bất kỳ code nào vào trang web, bạn cần thiết lập tài khoản Sendform và tạo một endpoint form. Quá trình này mất khoảng hai phút:

1. Đăng ký tại Sendform.net. Tạo tài khoản miễn phí - không cần thẻ tín dụng. Sau khi đăng ký, bạn sẽ có một dự án mặc định sẵn sàng sử dụng.
2. Tạo một form. Trong bảng điều khiển, nhấn "New Form". Đặt tên, chọn dự án và nhập địa chỉ email nơi bạn muốn nhận dữ liệu gửi. Sendform sẽ xác minh địa chỉ này trước khi kích hoạt endpoint.
3. Sao chép URL endpoint của bạn. Sau khi form được tạo, bạn sẽ thấy một URL endpoint duy nhất theo định dạng https://sendform.net/!your-form-id. Sao chép nó - đây là thứ bạn sẽ dán vào HTML của mình.

Với endpoint trong tay, thêm đoạn HTML sau vào trang tĩnh của bạn:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

Thay your-form-id bằng ID hiển thị trong bảng điều khiển Sendform của bạn. Mỗi lượt gửi sẽ được chuyển qua email tới địa chỉ bạn đã xác nhận trong quá trình thiết lập. 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 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 cùng với trang tĩnh của mình, chúng tôi cũng đề cập 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 trang 404

Cả GitHub Pages và Cloudflare Pages đều sẽ hiển thị trang lỗi chung 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 trang của bạn và bảo vệ trải nghiệm của họ.

2. Commit thông tin bí mật vào repository công khai

API key, bí mật endpoint form và địa chỉ email không bao giờ nên tồn tại trong repository GitHub công khai. Sử dụng biến môi trường trong Cloudflare Pages, hoặc tham chiếu một 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 developer tạo ra một form liên hệ đẹp mắt, push lên GitHub Pages và 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 nào, giúp loại bỏ hoàn toàn vấn đề backend.

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

Nếu trang 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 chậm hơn trong việc lan truyền thay đổi; hãy chờ tới 10 phút, hoặc thêm query string vào URL asset trong quá trình kiểm thử.

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

Nếu trang GitHub Pages của bạn nằm tại username.github.io/project-name/ (một thư mục con), tất cả đường dẫn asset phải tính đến tiền tố đó. Một liên kết tới /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 form

Khi form của bạn đã thu thập được dữ liệu gửi, 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 tới Slack, CRM hay bảng tính. Hướng dẫn của chúng tôi về tự động hóa quy trình form với webhook và API hướng dẫn bạn chính xác 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ẽ đến vậy. 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 phải là 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 có đượ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 trang web 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 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 thiết lập server, không rắc rối. Chỉ cần trỏ thuộc tính action của form vào 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