Hướng Dẫn Vibe Coding Website Với EzyPlatform: Từ Cài Đặt Đến Web Chạy Thật

Hướng dẫn vibe coding website với EzyPlatform trong bài viết này tập trung vào bước mà nhiều hướng dẫn thường bỏ ngỏ: sau khi AI tạo xong website, làm thế nào để triển khai lên môi trường thực tế, kết nối tên miền, kích hoạt SSL và cho phép người dùng truy cập? Nếu bạn từng thử Lovable, Bolt.new hoặc v0 nhưng bị mắc ở khâu đưa website lên mạng, InterData sẽ hướng dẫn toàn bộ quy trình — từ cài đặt ban đầu đến khi website chính thức hoạt động trên tên miền của bạn.

Vibe Coding Website Với EzyPlatform Là Gì, Khác Gì Dùng Lovable Hay Bolt.new?

Vibe coding website với EzyPlatform là cách dùng AI Assistant — Claude Code hoặc Codex — để mô tả yêu cầu bằng ngôn ngữ tự nhiên, sinh ra giao diện, rồi Publish thẳng lên EzyPlatform, nền tảng low-code có sẵn tên miền, SSL, CMS, hệ thống E-commerce và tài khoản người dùng. Trang chạy thật ngay, không dừng ở bản demo.

Đây là điểm khác biệt cốt lõi so với các công cụ vibe coding thuần túy như Lovable, Bolt.new, v0 hay Cursor. Các công cụ này mạnh ở khâu sinh code nhanh và cho xem preview ngay trong trình duyệt — rất phù hợp để thử ý tưởng. Nhưng chúng không phải là nơi sản phẩm chạy thật với dữ liệu thật. Muốn có website hoàn chỉnh, bạn vẫn phải tự lo hosting, database, hệ thống đăng nhập, gửi email, thanh toán — những việc nằm ngoài phạm vi của một công cụ sinh code.

EzyPlatform giải quyết đúng khoảng trống đó. Nếu bạn đã đọc bài vibe coding là gì và hiểu bản chất của cách làm việc mô tả — AI sinh — xem kết quả — sửa tiếp, thì phần còn thiếu chính là một nền tảng low-code đóng vai trò nơi chạy đích, có sẵn API, MCP Server để AI thao tác dữ liệu thật, và cấu trúc thư mục chuẩn hóa để AI hiểu đúng nơi cần sửa. Trước khi bắt tay cài đặt, nên đọc kỹ EzyPlatform là gì để hiểu đúng vai trò của từng plugin sẽ nhắc tới ở phần sau. Nếu muốn hiểu sâu hơn từng khác biệt kỹ thuật, bạn có thể xem thêm bài so sánh vibe coding bằng EzyPlatform và vibe coding thông thường.

Nói cách khác: Lovable, Bolt.new, Cursor hay Replit là công cụ sinh code. EzyPlatform là nơi code đó trở thành sản phẩm thật. Hai lớp này bổ sung cho nhau, không thay thế nhau.

Cần Chuẩn Bị Gì Trước Khi Vibe Coding Website Với EzyPlatform

Trước khi mở VS Code gõ prompt đầu tiên, bạn cần dựng đủ bốn nhóm công cụ: nền tảng chạy thật, AI Assistant, công cụ làm việc trên máy, và Git để lưu lịch sử thay đổi. Thiếu một trong bốn, quy trình sẽ đứt ở giữa chừng chứ không chạy trơn tru.

Nhóm 1: Nền tảng — EzyPlatform và 4 plugin bắt buộc

EzyPlatform là nơi website thực sự chạy, kèm tên miền và SSL. Trên đó bạn cần cài tối thiểu bốn plugin:

• EzyArticle để quản lý trang, bài viết và danh mục;
• EzySupport để quản lý ticket hỗ trợ, mẫu nội dung và đa ngôn ngữ;
• GraphQL để truy vấn đúng dữ liệu cần thiết khi trang có nhiều bảng liên kết, đồng thời đây cũng là plugin cung cấp API và MCP Server cho AI;
• Freestyle — theme trắng, không ràng buộc bố cục có sẵn, dùng để dựng bất cứ giao diện nào theo mô tả.

Có ba cách để có EzyPlatform: chạy trên localhost để thử nghiệm, tự cài trên VPS Ubuntu theo hướng dẫn triển khai chính thức, hoặc chọn nhà cung cấp hosting có sẵn EzyPlatform trong danh mục. Nếu tự cài trên VPS, bạn phải tự lo thêm tên miền và chứng chỉ SSL — đây là bước tốn thời gian nhất trong toàn bộ 12 bước chuẩn bị, và cũng là lý do VPS Vibe Coding đóng gói sẵn EzyPlatform cùng 4 plugin để bỏ qua hẳn khâu này.

Nhóm 2: AI Assistant — chọn Claude Code hay Codex

Bạn cần tài khoản AI gói trả phí — ChatGPT kèm Codex hoặc Claude kèm Claude Code. Gói trả phí cho nhiều lượt dùng hơn bản miễn phí, tránh tình trạng đang sửa dở trang thì hết lượt. Giá các gói này thay đổi theo chính sách của từng nhà cung cấp, nên kiểm tra trực tiếp trên trang giá chính thức của Anthropic hoặc OpenAI thay vì tin vào con số cũ. Muốn xem thêm các lựa chọn công cụ vibe coding khác đang phổ biến, bạn có thể tham khảo thêm trước khi quyết định.

Cả hai AI Assistant đều chạy dựa trên một CLI cài riêng ngoài VS Code — extension trong VS Code chỉ là lớp giao diện chat. Bạn chỉ cần chọn một trong hai, không cần cài cả hai.

Nhóm 3: Công cụ trên máy — VS Code và extension EzyArticle

VS Code miễn phí, chạy trên Windows, macOS và Linux. Nếu máy đã có sẵn, nâng cấp lên bản mới nhất trước để tránh xung đột extension. Trên macOS, bạn cần cấp thêm quyền Full Disk Access trong System Settings → Privacy & Security, nếu bỏ qua bước này, extension EzyArticle có thể không đọc và ghi được file dự án trên máy.

Extension EzyArticle cài trong mục Extensions của VS Code, đóng vai trò cầu nối đồng bộ nội dung giữa máy của bạn và máy chủ EzyPlatform — không có extension này, các thao tác Preview và Publish ở phần sau sẽ không thực hiện được.

Nhóm 4: Git — không bắt buộc nhưng nên có

Git giữ lịch sử thay đổi của dự án. Không có Git, bạn vẫn vibe coding được, nhưng mất khả năng quay lại phiên bản trước nếu AI sửa sai một chỗ quan trọng. AI Assistant có thể chạy các lệnh Git giúp bạn, không cần tự gõ tay.

Cài Đặt Và Kết Nối Môi Trường: Từ EzyPlatform Đến VS Code

Phần này rút gọn quy trình cài đặt thành các nhóm hành động chính. Mỗi bước làm sai đều gây hậu quả cụ thể ở bước sau, nên đọc kỹ phần “nếu làm sai” trước khi bấm qua bước tiếp.

1. Cài xong EzyPlatform và 4 plugin theo một trong ba cách đã nêu ở phần trên. Nếu bỏ qua plugin GraphQL, AI sẽ không có MCP Server để thao tác dữ liệu thật về sau — chỉ sinh được giao diện tĩnh.
2. Tạo tài khoản AI trả phí — ChatGPT kèm Codex hoặc Claude kèm Claude Code. Chọn một, không cần cả hai.
3. Cài VS Code, nâng cấp bản mới nhất nếu đã có sẵn. Trên macOS, vào System Settings → Privacy & Security cấp Full Disk Access, nếu không extension sẽ không đọc/ghi được file dự án.
4. Cài extension EzyArticle trong mục Extensions của VS Code, cấp thêm quyền trong Settings của extension nếu được yêu cầu.
5. Cài AI Assistant extension, mở lên, nếu máy chưa có CLI thì extension sẽ hiện nút Install để cài giúp. Cài thủ công cho Claude: dùng lệnh curl -fsSL https://claude.ai/install.sh | bash trên macOS/Linux, hoặc irm https://claude.ai/install.ps1 | iex trên Windows PowerShell. Máy đã có Node.js thì dùng npm install -g @anthropic-ai/claude-code. Với Codex: macOS có Homebrew dùng brew install codex, có Node.js dùng npm install -g @openai/codex, Windows tải binary từ trang phát hành chính thức của Codex CLI.
6. Kết nối VS Code với EzyPlatform bằng file environment.json. Đăng nhập trang quản trị EzyPlatform, vào hồ sơ cá nhân tại /admins/me, chọn mục Access Token, nhập mật khẩu để hiển thị rồi sao chép.
7. Cài Git (khuyến khích). Trên macOS gõ git --version, hệ thống sẽ đề nghị cài Xcode Command Line Tools, hoặc dùng brew install git. Trên Windows, tải Git for Windows tại git-scm.com/download/win.

{
  "environments": [
    {
      "name": "production",
      "admin_url": "https://admin.example.com",
      "admin_access_token": "access_token_cua_ban",
      "default": true
    }
  ]
}

Chỉ giữ lại đúng một môi trường có "default": true. Bạn có thể xóa bớt môi trường thừa, nhưng bắt buộc phải còn ít nhất một môi trường mặc định — thiếu nó, extension EzyArticle không biết gửi lệnh Preview và Publish tới đâu.

Cấu hình theme Freestyle để có giao diện trắng

Vào {admin}/freestyle/settings, đặt Kiểu bố cục = Rỗng và tắt các mục menu mặc định về Không. Nếu bỏ qua bước này, trang mới tạo sẽ dính theo bố cục và menu có sẵn của theme, khiến AI phải sinh code chồng lên phần giao diện cũ thay vì làm từ nền trắng.

Nếu trang mới tạo trông như bị lỗi — thiếu phần đầu hoặc cuối trang — vào {admin}/ezyarticle/pages/fragments, tìm từ khóa “common” để xem các phần trang dùng chung. Muốn xem mã gốc HTML/CSS/JS của template, vào {admin}/ezyarticle/pages/template-explorer, phần trang dùng chung nằm trong thư mục templates/ezycommon.

Cấu hình tải lên đa phương tiện và chia sẻ access token giữa các tên miền

Mặc định EzyPlatform giới hạn 1MB cho ảnh và 5MB cho các file khác, đồng thời chỉ cho phép một số định dạng nhất định. Vào {admin}/settings/regular để mở rộng danh sách định dạng được phép, ví dụ:

image/png,image/jpeg,application/javascript,image/svg+xml,image/vnd.microsoft.icon,text/css

Vì lý do bảo mật, EzyPlatform không chia sẻ access token bừa bãi giữa các tên miền. Tên miền có nhiều thành phần, kiểu interdata.io.vn, có thể báo lỗi khi Preview nếu chưa khai báo. Khắc phục cũng tại {admin}/settings/regular, khai báo theo cú pháp tên-miền:tên-miền-được-chia-sẻ, mỗi cặp một dòng:

localhost:localhost
1576647199.interdata.io.vn:.interdata.io.vn
1576647199-admin.interdata.io.vn:.interdata.io.vn

Cách Vibe Coding Website: Quy Trình 9 Bước Từ Ý Tưởng Đến Trang Chạy Thật

Đây là vòng lặp cốt lõi lặp lại xuyên suốt quá trình làm việc — dù bạn tạo một trang, một bài viết hay một tính năng phức tạp hơn. Nắm chắc 9 bước dưới đây, các lần vibe coding sau chỉ là lặp lại với mô tả khác.

1. Khởi tạo dự án. Trong VS Code, mở một thư mục trống, chuột phải vào khung Explorer, chọn Create EzyArticle Project. Cấu trúc thư mục được sinh ra tự động, xem chi tiết bên dưới.
2. Cài đặt môi trường. Khai báo admin_url và admin_access_token trong environment.json, giữ lại đúng một môi trường có "default": true.
3. Xác định trang muốn tạo. Hình dung nhanh các phần cần có trước khi mở AI. Ví dụ trang chủ tiệm bánh cần: banner giới thiệu, danh sách bánh nổi bật, thông tin liên hệ.
4. Mô tả yêu cầu cho AI bằng một prompt đủ chi tiết về nội dung, bố cục và tông màu mong muốn — xem prompt mẫu bên dưới.
5. AI tạo cấu trúc trang, sinh ra 4 file trong thư mục trang mới. Kiểm tra tab file trong VS Code trước khi qua bước tiếp theo — tab nào còn dấu chấm tròn là chưa lưu.
6. Preview. Chuột phải vào thư mục trang, chọn Preview Page. Trình duyệt mở đường dẫn nội bộ, chỉ mình bạn xem được.
7. Tinh chỉnh bằng cách mô tả cụ thể vấn đề trong khung chat, không cần chạm code. Sau mỗi lần AI sửa, phải lưu file trước khi Preview lại.
8. Publish. Chuột phải vào thư mục trang, chọn Publish Content To Server. Sau vài giây, trang chạy thật trên tên miền công khai, ai truy cập cũng xem được.
9. Khởi tạo Git để lưu lại lịch sử thay đổi, có thể đẩy lên GitHub để sao lưu từ xa.

Cấu trúc thư mục dự án sau khi khởi tạo

├── .gitignore
├── AGENTS.md
├── README.md
├── environment.json
├── api
│   └── v1
│       └── media
└── pages
    └── example-page
        ├── content.html
        ├── foot.html
        ├── head.html
        └── meta.json

environment.json là tập tin môi trường, README.md là hướng dẫn sử dụng, AGENTS.md là hướng dẫn dành cho AI khi code trong dự án này, và pages/example-page là trang ví dụ mẫu để bạn tham khảo cấu trúc trước khi tạo trang thật.

Prompt mẫu tạo trang — copy dùng ngay

Đây là ví dụ prompt tạo trang chủ cho một tiệm bánh, đủ chi tiết để AI sinh đúng nội dung và tông màu mong muốn ngay từ lần đầu:

Tạo một trang độc lập cho tiệm bánh "Sweet Home Bakery" (slug là sweet-home-bakery) gồm 3 phần:
1. Banner đầu trang: tên tiệm, slogan "Bánh ngọt handmade mỗi ngày", nút "Xem thực đơn".
2. Danh sách 3 loại bánh nổi bật, mỗi loại có ảnh, tên, giá.
3. Thông tin liên hệ: địa chỉ, số điện thoại, giờ mở cửa.
Yêu cầu: giao diện responsive, tông màu be và nâu ấm áp, phù hợp với ngành bánh ngọt.

Từ prompt này, AI sinh ra 4 file trong thư mục pages/sweet-home-bakery: content.html chứa nội dung chính, head.html chứa CSS về màu sắc và bố cục, foot.html chứa JavaScript nếu có, và meta.json chứa tiêu đề và đường dẫn của trang.

Muốn tinh chỉnh, mô tả đúng vấn đề đang thấy, không cần nói chung chung. Ví dụ: “Ảnh nền ở banner đang hơi tối, làm chữ tiêu đề khó đọc. Hãy thêm một lớp phủ màu nâu nhạt mờ lên ảnh, và đổi màu chữ tiêu đề sang trắng.” Mô tả càng cụ thể, AI sửa càng đúng lần đầu, tránh mất nhiều vòng lặp Preview qua lại.

Prompt mẫu khởi tạo Git và đẩy lên GitHub

Hãy khởi tạo Git cho dự án này, thêm toàn bộ file vào staging area
và tạo commit đầu tiên với nội dung "Khởi tạo dự án".

AI sẽ chạy các lệnh Git cơ bản giúp bạn: git init, git add ., git commit -m "Khởi tạo dự án". Muốn sao lưu từ xa, tạo một repository trống trên github.com — không tick khởi tạo README, .gitignore hay license để tránh xung đột — rồi mô tả cho AI:

Tôi vừa tạo một repository trống trên GitHub tại địa chỉ
https://github.com/ten-ban/ten-du-an.git. Hãy kết nối repository này
với dự án hiện tại và đẩy toàn bộ code lên đó.

AI sẽ chạy tiếp git remote add origin ..., git branch -M main, git push -u origin main. Từ đây, mỗi lần theo dõi thay đổi mới nhất cũng giúp AI làm việc hiệu quả hơn ở những lần chỉnh sửa tiếp theo.

Lỗi Thường Gặp Khi Vibe Coding Với EzyPlatform Và Cách Xử Lý

Phần lớn lỗi trong quy trình vibe coding với EzyPlatform không phải do AI sinh sai code, mà do bỏ sót một thao tác nhỏ. Dưới đây là 5 lỗi hay gặp nhất, kèm nguyên nhân và cách xử lý.

• Preview không phản ánh đúng nội dung vừa sửa. Nguyên nhân gần như luôn là quên lưu file. Kiểm tra tab file trong VS Code — tab nào còn dấu chấm tròn là chưa lưu. Xử lý bằng Cmd/Ctrl + S hoặc File → Save All, rồi Preview lại.
• Trang mới tạo trông như bị lỗi, thiếu phần đầu hoặc cuối trang. Đây không phải lỗi code, mà do trang chưa gắn đúng phần dùng chung. Vào {admin}/ezyarticle/pages/fragments, tìm từ khóa “common” để kiểm tra các phần trang dùng chung có đang được gọi đúng không.
• Preview báo lỗi trên tên miền nhiều thành phần, kiểu interdata.io.vn. Nguyên nhân là EzyPlatform mặc định không chia sẻ access token giữa các tên miền vì lý do bảo mật. Xử lý tại {admin}/settings/regular, khai báo cú pháp tên-miền:tên-miền-được-chia-sẻ như đã nêu ở phần cài đặt.
• Không tải lên được ảnh SVG, file CSS hoặc JS. Mặc định EzyPlatform giới hạn 1MB cho ảnh, 5MB cho file khác, và chỉ chấp nhận một số định dạng nhất định. Vào {admin}/settings/regular, bổ sung định dạng cần dùng vào danh sách được phép.
• Trang dính theo bố cục và menu cũ của theme dù đã dùng Freestyle. Nguyên nhân là chưa cấu hình đúng theme. Vào {admin}/freestyle/settings, kiểm tra Kiểu bố cục đã đặt là Rỗng và các mục menu mặc định đã tắt về Không chưa.

Vibe Coding Một Website Tốn Bao Nhiêu Tiền Và Cần Cấu Hình Gì

Chi phí vibe coding một website không nằm ở một khoản duy nhất, mà gồm ba phần tách biệt: gói AI trả phí, tên miền và SSL, và nơi website chạy thật. Không có bài nào nói rõ khoản nào là bắt buộc, khoản nào có thể trì hoãn — đây là phần hay bị bỏ qua nhất khi mới bắt đầu.

Gói AI trả phí

Claude kèm Claude Code hoặc ChatGPT kèm Codex đều cần gói trả phí để có đủ lượt dùng cho một dự án thật, tránh gián đoạn giữa chừng khi đang sửa dở một trang. Giá các gói này thay đổi liên tục theo chính sách của Anthropic và OpenAI, nên kiểm tra trực tiếp trên trang giá chính thức của từng bên trước khi đăng ký, không nên dựa vào con số cũ từ bài viết khác.

Tên miền và SSL

Nếu muốn website chạy trên tên miền riêng thay vì bản localhost, bạn cần đăng ký tên miền và cấu hình SSL. Đây là khoản chi phí thường niên, tách biệt hoàn toàn khỏi chi phí AI.

Nơi website chạy thật

Đây là khoản dễ bị bỏ sót nhất khi mới làm quen với vibe coding. Bạn có thể tự cài EzyPlatform lên VPS Ubuntu — khi đó phải tự tính thêm chi phí thuê VPS, tự lo vận hành và bảo trì. Hoặc chọn nhà cung cấp đã tích hợp sẵn EzyPlatform, gộp luôn cả hạ tầng và nền tảng vào một gói duy nhất, bỏ qua khâu tự cấu hình server.

Nói cách khác, tổng chi phí vibe coding một website phụ thuộc vào việc bạn tự làm bao nhiêu phần trong ba khoản trên. Càng tự làm nhiều, càng tốn thời gian cấu hình; càng dùng gói tích hợp sẵn, chi phí càng gọn về một đầu mối nhưng đổi lại ít quyền tùy biến hạ tầng hơn.

Khi Nào Cần Nâng Cấp Hạ Tầng Cho Sản Phẩm Vibe Coding

Một VPS đủ dùng khi sản phẩm còn ở giai đoạn ra mắt, ít người dùng thật và dữ liệu chưa nhiều. Vấn đề bắt đầu xuất hiện khi ba tín hiệu sau xảy ra cùng lúc.

• Sản phẩm đã có người dùng thật thường xuyên, không còn ở giai đoạn demo nội bộ hay thử nghiệm với vài khách hàng đầu tiên.
• Traffic biến động mạnh theo chiến dịch, ví dụ đợt khuyến mãi hoặc bài viết lan truyền khiến lượng truy cập tăng đột biến trong thời gian ngắn.
• Database phình to vì CMS và E-commerce tích lũy dữ liệu thật qua thời gian, cần tài nguyên xử lý lớn hơn cấu hình ban đầu.

Khi gặp đúng những dấu hiệu này, bước hợp lý là chuyển sang thuê Cloud Server — hạ tầng cho phép nâng hoặc hạ tài nguyên linh hoạt theo tải thực tế, thay vì cố định như một gói VPS đơn lẻ. Đây là bước nâng cấp tự nhiên, không phải dấu hiệu cấu hình ban đầu chọn sai — sản phẩm vibe coding nào phát triển tốt cũng sẽ đến lúc cần bước này.

Câu Hỏi Thường Gặp Về Vibe Coding Website Với EzyPlatform

Vibe coding website với EzyPlatform có cần biết code không?

Không cần viết code trực tiếp. Bạn mô tả yêu cầu bằng ngôn ngữ tự nhiên cho AI Assistant trong VS Code, AI sinh ra các file HTML/CSS/JS trong thư mục trang. Việc của bạn là mô tả rõ vấn đề khi cần sửa, kiểm tra Preview, rồi Publish khi ưng ý.

Vibe coding xong rồi thì deploy website ở đâu?

Với EzyPlatform, không có bước “deploy” tách rời như các nền tảng khác. Bạn chuột phải vào thư mục trang, chọn Publish Content To Server, trang chạy thật trên tên miền công khai ngay sau vài giây — với điều kiện EzyPlatform đã được cài đặt và kết nối tên miền từ trước.

Vibe coding website với EzyPlatform khác gì so với các nền tảng AI builder khác?

Các nền tảng như Lovable, Bolt.new hay v0 mạnh ở khâu sinh code và demo nhanh. EzyPlatform là nơi trang đó chạy thật, có sẵn CMS, E-commerce, tài khoản người dùng, API và MCP Server để AI thao tác dữ liệu thật, không chỉ dừng ở giao diện tĩnh.

Chi phí vibe coding một website gồm những khoản nào?

Ba khoản chính: gói AI trả phí (Claude Code hoặc Codex), tên miền và SSL, và nơi website chạy thật — tự thuê VPS cài EzyPlatform hoặc chọn gói đã tích hợp sẵn. Giá cụ thể thay đổi theo từng nhà cung cấp, nên kiểm tra trang giá chính thức trước khi đăng ký.

Preview trang trên EzyPlatform bị lỗi thì phải làm sao?

Trước hết kiểm tra đã lưu hết file chưa — lỗi phổ biến nhất là quên lưu. Nếu trang thiếu đầu hoặc cuối trang, kiểm tra phần fragments dùng chung. Nếu Preview báo lỗi trên tên miền nhiều thành phần, cấu hình lại mục chia sẻ access token tại trang cài đặt chung.

Nội dung bài viết mang tính tham khảo, tổng hợp từ tài liệu hướng dẫn chính thức của EzyPlatform tại thời điểm biên soạn. Các bước cài đặt, tên menu và đường dẫn trang quản trị có thể thay đổi theo phiên bản EzyPlatform, phiên bản VS Code và hệ điều hành bạn đang dùng. Giá các gói AI (Claude, ChatGPT) thay đổi theo chính sách của từng nhà cung cấp, vui lòng kiểm tra trang giá chính thức trước khi đăng ký. Nên sao lưu dữ liệu và kiểm thử trên môi trường thử nghiệm trước khi áp dụng các thay đổi cho website đang chạy thật.