Vì sao bản demo AI tạo trong 5 phút chưa phải là một website dùng thật?

Tôi đang phải xây dựng trang web cá nhân Nexpanion theo cách của một người không xuất thân từ ngành lập trình và chỉ có khoảng 10 giờ mỗi tuần. Tôi thử dùng phương pháp vibe coding để xem có thể rút ngắn thời gian dựng trang và sớm có nơi chia sẻ tài nguyên cho độc giả hay không. Đây là kết quả thực tế, những lỗi kỹ thuật tôi đã vấp phải sau vẻ ngoài hào nhoáng của bản demo, và danh sách kiểm tra để bạn tự rà soát dự án của mình.

1. Bài viết này dành cho ai và giải quyết công việc gì?

Nếu bạn là một cá nhân làm nghề tự do (freelancer), người làm marketing hoặc chủ doanh nghiệp nhỏ đang thử dùng các công cụ AI để tự tạo landing page hay website cá nhân, rất có thể bạn đã trải qua cảm giác phấn khích của 5 phút đầu tiên. Bạn gõ một đoạn mô tả, và trên màn hình hiện ra một giao diện có màu sắc hài hòa, thanh điều hướng, nút bấm và những khối văn bản trông rất chuyên nghiệp.

Tuy nhiên, mục tiêu của bạn không phải là tạo ra một giao diện chỉ để ngắm trên máy tính cá nhân. Công việc bạn thực sự cần hoàn thành là đưa một website lên mạng để khách hàng hoặc độc giả tìm thấy qua Google, đọc nội dung mượt mà trên điện thoại, đăng ký email an toàn và tải được tài liệu về máy.

Bài viết này giúp bạn phân biệt rõ ranh giới giữa một bản demo chạy thử và một website dùng thật (production), từ đó tránh việc công bố một trang web nhìn thì hoàn chỉnh nhưng bên dưới lại làm rò rỉ dữ liệu hoặc mất hút trên công cụ tìm kiếm.

2. Bối cảnh lần thử nghiệm trên Nexpanion

Trước khi đi vào chi tiết các điểm nghẽn, đây là thông số thực tế từ quá trình tôi tự dựng trang Nexpanion:

• Công cụ sử dụng: Các mô hình AI hỗ trợ viết mã nguồn và biên tập (ChatGPT / Codex) dựa trên bản mô tả yêu cầu (Website Brief) có sẵn.
• Thời điểm thực hiện: Nửa cuối tháng 09/2026 đến ngày công bố 01/10/2026.
• Chi phí phát sinh: 0 đồng cho phần mã nguồn tĩnh ban đầu (chỉ tốn thời gian tự cấu hình và kiểm thử).
• Phân bổ thời gian thực tế: Trong lần thử này, tôi đo được việc dùng AI tạo ra giao diện ban đầu chỉ chiếm khoảng 20% tổng thời gian. 80% thời gian còn lại nằm ở khâu nối các luồng dữ liệu, sửa cấu trúc đường dẫn để phục vụ SEO và thiết lập hệ thống đo lường.
• Nguyên tắc an toàn dữ liệu: Trong suốt quá trình nhờ AI sửa lỗi mã nguồn, tôi tuyệt đối không dán các khóa bảo mật (API keys), mật khẩu quản trị hay dữ liệu cá nhân của người dùng thật vào cửa sổ chat.

3. Năm khoảng trống lớn nhất giữa bản demo 5 phút và website dùng thật

Khi bạn yêu cầu AI "Hãy làm cho tôi một trang web có mục bài viết và mục tải tài nguyên", AI sẽ ưu tiên chọn cách nhanh nhất để hiển thị kết quả lên màn hình. Nhưng để website đó hoạt động bền vững ngoài đời thực, đây là 5 phần việc bạn bắt buộc phải kiểm tra và yêu cầu làm rõ:

Khoảng trống 1: Cấu trúc đường dẫn (URL) và khả năng lập chỉ mục của Google

Trong bản demo đầu tiên của Nexpanion, mọi thao tác bấm chuyển trang giữa Trang chủ, Ghi chép và Tài nguyên đều diễn ra tức thì. Nhưng khi nhìn lên thanh địa chỉ trình duyệt, tôi phát hiện các đường dẫn đều có dạng dấu thăng ở giữa: #/vi/notes/ten-bai-viet.

• Vấn đề thực tế: Đây là cơ chế điều hướng phía trình duyệt (hash routing) thường gặp ở các ứng dụng Single Page Application (SPA). Với người đọc, trang vẫn hiển thị bình thường. Nhưng với công cụ tìm kiếm như Google, mọi nội dung nằm sau dấu # thường bị bỏ qua hoặc không được ghi nhận là một trang độc lập. Hơn nữa, toàn bộ các bài viết trong bản demo đều dùng chung một tiêu đề (Title) và thẻ mô tả (Meta Description) của trang chủ.
• Cách xử lý để dùng thật: Phải chuyển toàn bộ sang cấu trúc URL độc lập có thể thu thập dữ liệu (ví dụ /vi/notes/ten-bai/ và /en/notes/article-name/). Mỗi bài viết cần trả về mã HTML riêng kèm bộ thẻ tiêu đề, mô tả, thẻ canonical và hình ảnh chia sẻ mạng xã hội (Open Graph) riêng biệt. Nếu xây dựng song ngữ Việt – Anh, hai phiên bản phải được khai báo thẻ hreflang="vi" và hreflang="en" qua lại rõ ràng.

Khoảng trống 2: Thay thế "những nút bấm giả" bằng luồng xác thực và lưu trữ thật

AI rất giỏi vẽ ra một khung "Đăng ký nhận bản tin" hoặc một nút "Đăng nhập để tải tài liệu" chỉ trong vài giây. Nhưng ở bản demo, đó mới chỉ là phần vỏ giao diện (front-end).

• Vấn đề thực tế:
  1. Ở nút tải tài nguyên (/resources), bản demo thường chỉ dùng một lệnh đơn giản để ẩn nút tải khi chưa đăng nhập, hoặc tệ hơn là gắn thẳng đường dẫn file PDF/ZIP vào mã nguồn. Bất kỳ ai mở công cụ kiểm tra phần tử (Inspect) trên trình duyệt đều có thể lấy được link file mà không cần tài khoản.
  2. Ở khung thu thập email, bản demo chưa có cơ chế ghi nhận sự đồng ý của người dùng (consent), chưa có quy trình xác nhận đăng ký và thiếu liên kết hủy đăng ký (unsubscribe) tự động. Một sai lầm phổ biến nữa là thiết lập mặc định: cứ ai tạo tài khoản tải tài liệu thì tự động bị đẩy vào danh sách nhận bản tin hàng tuần.
• Cách xử lý để dùng thật: Hệ thống đăng nhập phải là hệ thống xác thực thật; lệnh tải file phải được kiểm tra quyền từ phía máy chủ (server-side) trước khi trả file về. Việc đăng ký nhận bản tin email phải là một lựa chọn đồng ý riêng biệt, không gộp chung cưỡng bức khi người dùng chỉ muốn tạo tài khoản tải file.

Khoảng trống 3: Kiểm tra lỗi 404 khi tải lại trang (Reload) và luồng điều hướng

Khi chạy thử trên máy tính cá nhân, bạn thường đi từ Trang chủ rồi bấm chuột vào từng bài viết. Mọi thứ trông có vẻ hoàn hảo cho đến khi bạn gửi trực tiếp đường link bài viết đó cho người khác, hoặc người đọc bấm phím F5 (tải lại trang).

• Vấn đề thực tế: Khi truy cập thẳng vào một đường dẫn con hoặc bấm tải lại trang trên môi trường mạng (production), máy chủ lưu trữ (hosting) có thể không tìm thấy tệp vật lý tương ứng và trả về màn hình báo lỗi 404 Not Found trắng trơn.
• Cách xử lý để dùng thật: Cần cấu hình quy tắc điều hướng trên máy chủ lưu trữ, thiết kế một trang báo lỗi 404 thân thiện có lối quay về trang chủ, và chuẩn bị sẵn cơ chế chuyển hướng (redirect) khi bạn cần đổi đường dẫn (slug) của bài viết sau này.

Khoảng trống 4: Gắn hệ thống đo lường và bản đồ trang (Sitemap)

Một bản demo không có dữ liệu. Nhưng một website phục vụ công việc hoặc kinh doanh thì không thể vận hành trong trạng thái thiếu thông tin đo lường.

• Vấn đề thực tế: Nếu chỉ đưa mã nguồn lên mạng rồi để đó, bạn sẽ không biết Google đã ghi nhận trang web của mình chưa, người đọc đến từ kênh nào, họ dừng lại ở nội dung nào lâu nhất, và liệu có ai thực sự bấm vào nút tải tài nguyên hay không.
• Cách xử lý để dùng thật: Trước hoặc ngay ngày công bố, bạn cần tạo tệp sitemap.xml (chỉ chứa các trang nội dung công khai, loại trừ các trang đăng nhập/đăng ký hoặc quản trị tài khoản) để nộp lên Google Search Console. Đồng thời, hãy cài đặt công cụ phân tích (như GA4) kèm theo thông báo xin phép thu thập dữ liệu (analytics consent), cấu hình theo dõi 5 sự kiện quan trọng nhất: tạo tài khoản (sign_up), đăng ký bản tin (newsletter_subscribe), xem tài nguyên (resource_view), tải tài nguyên (resource_download) và gửi liên hệ (contact_submit).

Khoảng trống 5: Hoàn thiện các trang pháp lý và thông tin tác giả

• Vấn đề thực tế: Bản demo thường chỉ có các trang nội dung chính hoặc để sẵn các đoạn văn bản mẫu tiếng Latinh (Lorem ipsum) ở chân trang.
• Cách xử lý để dùng thật: Để xây dựng lòng tin với người đọc và tuân thủ quy định trước khi thu thập email hay đặt liên kết giới thiệu (affiliate) sau này, website bắt buộc phải có mặt 4 trang pháp lý: Chính sách bảo mật (/privacy), Điều khoản sử dụng (/terms), Công bố liên kết affiliate (/affiliate-disclosure), và Giới hạn trách nhiệm (/disclaimer). Ngoài ra, mọi bài viết đều cần liên kết rõ ràng về trang tác giả (/about) để người đọc biết ai là người thực sự đứng sau các thử nghiệm này.

4. Kết quả đạt được, lỗi phát sinh và phần việc vẫn phải làm thủ công

• Kết quả: Website thoát khỏi tình trạng "chỉ là một bản trình diễn giao diện". Các đường dẫn bài viết tiếng Việt và tiếng Anh đã hoạt động độc lập, sẵn sàng để Google lập chỉ mục. Luồng đăng ký email và tải tài nguyên được tách bạch rõ ràng.
• Lỗi và những phần phải hoãn lại: Khi mới đưa trang lên mạng, tôi vẫn gặp tình trạng một số trang danh mục con chưa có đủ bài viết (trang trống) và phải điều chỉnh lại cách hiển thị ngày xuất bản cũng như cấu trúc sitemap. Vì quỹ thời gian 10 giờ/tuần có hạn, tôi quyết định ưu tiên xử lý theo thứ tự sống còn: URL chuẩn SEO → Metadata & Sitemap → Search Console & Analytics → Hệ thống Email → Đăng nhập & Tải file → Dữ liệu có cấu trúc (Structured Data).
• Phần việc con người bắt buộc phải tự làm: AI có thể viết giúp bạn đoạn mã tạo tệp sitemap hoặc giao diện trang 404 rất nhanh. Nhưng việc tự cầm điện thoại thật lên để bấm thử từng nút trên giao diện di động, tự điền thử vào biểu mẫu liên hệ xem email có về đúng hộp thư không, và tự rà soát từng câu chữ trong chính sách bảo mật dữ liệu là những việc bạn tuyệt đối không thể giao khoán cho AI.

5. Bảng đối chiếu trực quan: Bản Demo ban đầu vs. Nexpanion khi chạy thật

Dưới đây là bảng tóm tắt các hạng mục tôi đã trực tiếp đối chiếu và nâng cấp từ bản nháp đầu tiên lên phiên bản Nexpanion đang chạy hiện tại:

6. Bước tiếp theo dành cho bạn

Nếu bạn đang ấp ủ tự làm một website cá nhân hoặc trang giới thiệu dịch vụ bằng AI, đừng đợi đến khi AI vẽ xong giao diện rồi mới loay hoay đập đi sửa lại cấu trúc bên dưới. Mọi yêu cầu về đường dẫn, sơ đồ trang và giới hạn tính năng đều cần được định nghĩa ngay từ trước khi bạn gõ câu lệnh đầu tiên.

👉 Tải về Mẫu Website Brief (Bộ yêu cầu xây website bằng AI) mà tôi đã sử dụng để làm khung xương sống cho Nexpanion (Tài nguyên miễn phí dành cho thành viên đăng nhập).

Ngoài ra, bạn có thể đăng ký nhận bản tin Nexpanion Weekly ở khung bên dưới — mỗi Chủ Nhật tôi sẽ gửi tới bạn 1 thử nghiệm thực tế, 1 lỗi kỹ thuật cần tránh và 1 tài nguyên mới để bạn áp dụng ngay vào công việc.

7. Bài viết và tài nguyên liên quan

Dưới đây là các bài viết và tài nguyên trong chuỗi xây dựng website và vibe coding trên Nexpanion:

• Vibe coding là gì? Người không biết lập trình có nên bắt đầu không?
• Từ sitemap đến website Nexpanion: những gì một bản demo chưa giải quyết
• Lộ trình học AI thực hành trong 30 ngày cho người không chuyên
• Trang Hiện tại (/now) — Những gì tôi đang trực tiếp xây dựng và đo lường

Nguồn tham khảo chính thức:

• Google Search Central — Build and submit a sitemap
• Google Search Central — Localized versions of your pages (hreflang)
• Google Search Central — Creating helpful, reliable, people-first content