Cách Tự Tạo Website Bằng AI

Cách Tự Tạo Website Bằng AI

Khám phá cách xây dựng website cá nhân một cách đơn giản với sự hỗ trợ của AI.
Ảnh minh họa
Trong bài viết này, tôi sẽ chia sẻ với bạn quá trình chuyển từ các công cụ xây dựng website kiểu kéo-thả sang cách tự lập trình website với sự hỗ trợ của AI. Bạn sẽ thấy việc này dễ dàng hơn tưởng tượng rất nhiều khi dùng các công cụ thông minh. Ảnh do ChatGPT tạo ra.
WordPress vẫn là nền tảng quen thuộc để tạo website cá nhân, giới thiệu portfolio hay các thông tin về bản thân. Trước khi chuyển đổi, tôi đã sử dụng WordPress khoảng một năm và gặp phải một số khó khăn sau:

  • Khó đạt được giao diện theo ý muốn
  • Quá trình tạo mới và cập nhật chậm, phải kéo-thả từng thành phần
  • Thiếu linh hoạt vì chỉ dùng được các khối có sẵn, nếu muốn chỉnh sửa HTML thì phải tự nhập mã thủ công, rất mất thời gian

Sau đó, tôi nhận ra rằng xây dựng website bằng các công cụ AI như Claude Code, Cursor… vừa nhanh vừa đơn giản hơn rất nhiều.

Tại sao phải mất hàng giờ kéo-thả từng khối mà vẫn chưa đúng ý, trong khi chỉ cần mô tả cho Claude Code là có ngay giao diện như mong muốn chỉ sau chưa đầy một phút?

Đó là lý do tôi quyết định chuyển từ WordPress sang tự quản lý website của mình, triển khai miễn phí trên Vercel. Bài viết này sẽ giúp bạn hiểu cách thực hiện và lý do bạn không cần biết lập trình vẫn có thể tự làm được.
Infographic: Tự tạo website
Infographic này tóm tắt những nội dung chính của bài viết. Tôi khuyến khích bạn thử chuyển từ các công cụ kéo-thả sang cách tự lập trình website nhờ AI. Bạn sẽ dễ dàng tạo, cập nhật website nhanh chóng, linh hoạt hơn hẳn. Ảnh do Gemini tạo.
Bạn có thể xem website tôi tự thiết kế tại đây.

Vì Sao Nên Tự Lập Trình Website?

Những lý do nổi bật khiến bạn nên thử tự lập trình website thay vì dựa vào các công cụ kéo-thả như WordPress hoặc Webflow:

  • Rất dễ thực hiện – gần như không cần viết mã
  • Tạo mới và cập nhật cực kỳ nhanh
  • Giao diện đẹp, chất lượng nhờ AI hỗ trợ lập trình

Trang Speaking
Đây là trang Speaking trên website của tôi. Bạn có thể thấy thanh điều hướng phía trên và nội dung ở dưới. Ảnh của tác giả.
Nhờ tốc độ nhanh, bạn có thể liên tục thử nghiệm, chỉnh sửa website – cực kỳ hữu ích nếu bạn luôn muốn hoàn thiện website của mình.

Thử nghiệm nhanh là chìa khóa để tiến bộ

Dĩ nhiên, vẫn có điểm mạnh của WordPress như nhiều tích hợp tiện ích. Nhưng với tôi, ưu điểm khi tự lập trình vượt trội hơn nhiều.
Ví dụ, chỉ cần nhập yêu cầu như:

Làm cho tất cả nút trên website chuyển mờ dần khi di chuột vào

Website sẽ được cập nhật toàn bộ chỉ trong khoảng 1 phút (Claude Code tự động chỉnh sửa mã nguồn và triển khai lên Vercel). Nếu thực hiện trên WordPress, bạn sẽ mất ít nhất 30 phút.
Hãy tưởng tượng bạn phải chỉnh sửa website vài lần mỗi tuần – mỗi khi bổ sung nội dung mới hoặc muốn thay đổi giao diện. Việc chỉnh sửa trực tiếp bằng mã nguồn với AI sẽ nhanh và hiệu quả hơn rất nhiều.

Dùng Claude Để Tự Xây Dựng Website

Tạo Website

Hy vọng bạn đã thấy lý do nên tự lập trình website (hoặc để Claude hỗ trợ), thay vì dùng công cụ kéo-thả. Bây giờ, tôi sẽ hướng dẫn bạn từng bước thực hiện.
Quan trọng nhất là bạn không cần làm thủ công quá nhiều, vì các công cụ AI ngày nay rất giỏi xây dựng website. Tôi bắt đầu bằng cách chuyển website WordPress cũ sang.
Tôi nhập yêu cầu cho Claude Code như sau, với eivindkjosbakken.com là website WordPress của tôi:


Hãy dựa trên website của tôi tại: eivindkjosbakken.com, sao chép website này sang React. Tạo repo GitHub và đẩy mã nguồn lên đó.

Claude đã tạo ra bản sao gần như hoàn chỉnh của website cũ, tôi có thể chạy thử trên máy tính cá nhân. Tôi kiểm tra lại giao diện, mọi thứ đều ổn, chỉ có một vài điểm cần chỉnh sửa – tôi sẽ trình bày chi tiết ở phần sau.

Đưa Website Lên Internet

Bước tiếp theo là đăng tải website. Tôi chọn Vercel vì miễn phí, dễ sử dụng và có thể quản lý hoàn toàn qua dòng lệnh. Việc quản lý qua terminal giúp Claude tự động triển khai mã nguồn và xử lý sự cố trên Vercel.
Lần đầu tiên triển khai, tôi cần tạo một dự án trên vercel.com và kết nối mã nguồn với dự án đó. Bạn có thể hỏi AI để nhận hướng dẫn chi tiết, Vercel cũng cho phép 100 lượt triển khai miễn phí mỗi ngày – quá đủ cho nhu cầu cá nhân.
Sau khi kết nối với Vercel, website đã sẵn sàng và tôi đã có thể truy cập website của mình trên internet.

Cập Nhật Website

Sau khi chuyển website từ WordPress, tôi muốn chỉnh sửa thêm một số điểm như:

  • Các bài viết sẽ nổi bật khi di chuột qua – xem ảnh minh họa bên dưới
  • Thanh điều hướng gọn hơn và bổ sung thêm trang mới
  • Tôi muốn đưa eBook của mình lên website

Nổi bật bài viết
Đây là minh họa một cải tiến tôi thực hiện. Khi di chuột vào một bài viết, bài viết đó sẽ được làm nổi bật. Ảnh của tác giả.
Những thay đổi này thực hiện cực kỳ nhanh – chỉ cần mô tả ngắn với Claude (ví dụ: “làm nổi bật bài viết khi di chuột qua”) và AI xử lý chỉ trong chưa đầy một phút. Nếu dùng công cụ kéo-thả, chắc chắn sẽ mất nhiều thời gian hơn.
Giờ đây, bạn chỉ cần sáng tạo, có thể liên tục cập nhật website, thử nghiệm bất kỳ thay đổi giao diện nào chỉ bằng vài dòng mô tả cho AI.

Những Vấn Đề Tôi Gặp Phải

Claude gần như xử lý trọn vẹn việc chuyển website WordPress sang mã nguồn chỉ từ URL. Tuy nhiên, vẫn có một số điểm tôi phải tự giải quyết:

  • Website WordPress cũ có chức năng gửi email cho tôi
  • Tôi phải tự tải về một số hình ảnh từ website cũ, ví dụ ảnh bài viết (làm thủ công)
  • Vấn đề với các liên kết mạng xã hội – vừa phải tìm đúng link vừa đảm bảo giao diện hiển thị đẹp
  • Trước đây WordPress có quản lý danh sách email, giờ tôi phải tự xây lại tính năng này
  • Chuyển tên miền từ WordPress sang NameCheap

Với chức năng email, tôi dùng EmailJS để cho phép gửi email trực tiếp từ website. Dịch vụ này miễn phí và dễ cài đặt – chỉ cần nhờ AI hướng dẫn từng bước.
Với hình ảnh, tôi tải về từ website cũ, thêm vào repo mã nguồn và báo cho Claude vị trí các ảnh. Claude sẽ tự động chuyển ảnh vào thư mục riêng để hiển thị trên website.
Với liên kết mạng xã hội, tôi gửi cho Claude vài ảnh chụp màn hình giao diện (ví dụ khi icon bị mờ), AI sẽ chỉnh sửa theo phản hồi của tôi sau 3-4 lần trao đổi.
Về danh sách email, tôi chọn MailerLite, dịch vụ này cung cấp form nhúng để người dùng đăng ký email ngay trên website. Bạn chỉ cần gửi mã nhúng cho AI, nó sẽ tự động thêm vào website.
Việc chuyển tên miền là bước tốn thời gian nhất. Tên miền cũ tôi mua trên WordPress, nên chuyển đi khá phức tạp. Tôi nhờ Gemini 3 hướng dẫn từng bước, làm theo là chuyển được sang NameCheap, giờ tôi hoàn toàn kiểm soát tên miền.

Kết Luận

Bài viết này đã chia sẻ cách chuyển website từ các công cụ kéo-thả như WordPress, Webflow sang tự quản lý bằng mã nguồn. Quá trình này đơn giản nhờ AI lập trình và Vercel, giúp bạn kiểm soát website tốt hơn, thử nghiệm và cập nhật cực kỳ nhanh.
Tôi tin rằng xu hướng sẽ dần rời xa các công cụ kéo-thả khi AI ngày càng mạnh mẽ – bạn gần như không cần biết lập trình để tự chỉnh sửa giao diện website.
Tham khảo thêm các gợi ý ChatGPT sáng tạo nội dung hay nhất của tôi

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top