NV Cuong Logo

NVC WorkSpace

Unite, Ignite, Excite

Hướng Dẫn Tạo Trang Cá Nhân Đơn Giản Với AI

Hướng dẫn làm trang web cá nhân đơn giản với chi phí thấp sử dụng AI Code

1. Giới thiệu

Sau một thời gian làm việc trong ngành IT, tôi nhận ra rằng việc xây dựng một trang cá nhân – vừa để chia sẻ, vừa để quảng bá bản thân, giải trí cuối tuần, và biết đâu có thể kiếm được một khoản từ niềm đam mê và thế mạnh của mình – là điều khá cần thiết.

Về nền tảng kỹ thuật

Tôi không phải là dân code "pro" hay kiểu hacker thần thánh gì. Code đọc được dòng này dòng kia, hiểu sơ sơ mỗi thứ một chút:

  • ReactJS
  • HTML/CSS
  • Python
  • DevOps
  • Cloud
  • Còn một mớ lặt vặt khác...

Nói chung, cái gì cũng biết một tí, kiểu "biết đủ để sống sót". Tất cả đều là tự học. Xuất thân học Tài chính, nhảy ngang sang IT ngay từ lúc mới ra trường – và giờ cũng hơn 10 năm trong ngành rồi.

DevOps thì có đi học một lớp beginner, Cloud, Database thì học từ các khóa nội bộ của công ty.

Về thời gian & động lực

Tôi đang làm full-time ở công ty nên chỉ tranh thủ được buổi tối (10h–12h đêm) hoặc cuối tuần. Nhiều lúc cũng nản vl – thấy mấy ông startup đúng kiểu đánh đổi, quyết tâm thực sự. Giỏi hơn, chăm hơn. Mie người ta vừa giỏi vừa chăm hơn mình.

"Người giỏi không đáng sợ, Đáng sợ là người ta vừa giỏi vừa nỗ lực hơn mình"

Về bản thân

Mình không phải người thông minh, làm cái gì cũng kiểu fail vài lần rồi mới xong:

  • Thi bằng lái xe trượt 5 lần mới đỗ.
  • Thi chứng chỉ PMP rớt 3 lần, may mà lần cuối ông bà phù hộ cho qua.

Không xuất sắc, nhưng bền bỉ. Và tôi nghĩ, nếu tôi làm được – thì bạn chả có méo gì mà không thể làm được.

Câu chuyện riêng

Thế hệ 9x – 25 năm qua như một giấc mộng thần kỳ. Từ lúc còn nghèo khó, nhà không có điện, đạp xe đạp phải luồn một chân qua cái khung ngang cao ngất trời, đến khi internet bùng nổ, chơi game trốn học, và bây giờ là thời đại QR - Napas - chuyển khoản không cần xếp hàng rút tiền ATM nữa.

Cuộc sống thay đổi chóng mặt. Và tôi vẫn đang cố gắng bắt kịp nó – từng dòng code, từng đêm thức muộn.


Vào việc thôi!


2. Conceptual

Việc đầu tiên khi làm bất kỳ sản phẩm nào – dù là một trang cá nhân – cũng nên bắt đầu từ câu hỏi:

"Mục tiêu mình làm cái này để làm gì?"

Với mình, mục tiêu rất đơn giản:

  • Tạo một trang web cá nhân
  • Viết một vài blog chia sẻ linh tinh
  • Có thể tận dụng làm portfolio cá nhân sau này
  • Và... giết thời gian cuối tuần

Nói chung, tư duy làm sản phẩm ở mức vừa đủ dùng – không over-engineer.

Với nhu cầu đơn giản như trên, ban đầu mình tham khảo qua mấy giải pháp phổ biến:

Nền tảngƯu điểmNhược điểm
WordPressDễ dùng, nhiều pluginTốn chi phí hosting nếu dùng EC2 hoặc Cloud (tầm $4–10/tháng)
WixGiao diện đẹp, kéo thả dễĐắt, giới hạn tùy chỉnh sâu
Gitlab PageFREE hoàn toànSource code phải public, lo lắng nhẹ về bảo mật

Sau một hồi đắn đo, mình quyết định:

  • Làm một site web tĩnh dùng ReactJS
  • Host bằng AWS S3, dùng GitLab CI/CD để deploy
  • Mua domain .vn ở Vinahost

Chi tiết stack công nghệ mình chọn:

Thành phầnCông cụ được chọnGhi chú cá nhân
EditorTreaVô tình dùng thử → thấy hợp → dùng luôn
VS Code + Copilot, BlackboxThử qua nhưng thấy không hợp, giao diện rối
OSWindowsVì... dùng quen rồi
Ngôn ngữJavaScriptDễ tiếp cận, cộng đồng lớn
FrameworkReactJSĐủ mạnh, nhiều lib hỗ trợ
HostingAWS S3Rẻ, bền, đáng tin cậy
DomainVinahost .vnHỗ trợ domain Việt Nam
AWS stackS3, CDN, Cert Manager, Route 53Tự triển khai đơn giản, hiệu quả
TrackingGoogle AnalyticsTheo dõi traffic
CI/CDGitLab CIĐơn giản, dễ tích hợp, miễn phí
SecurityKhông có gì đặc biệtTrông chờ vào AWS S3, SSL và ReactJS tự thân chống XSS cơ bản

Git Flow cá nhân

Làm một mình nên flow cũng rất đơn giản:

  • main: branch chính, auto deploy từ đây
  • feature-*: branch phụ cho từng thay đổi, sau đó merge về main

Lý do vẫn dùng nhánh feature:

Thật ra push thẳng main cũng được, nhưng...

Mình thích cảm giác được review merge request.

Cảm giác "được làm Technical Lead của chính mình", cũng sướng phết 🤣

😅 Về bảo mật

Không có gì cao siêu. Mình chỉ tin vào:

  • AWS S3 set đúng quyền
  • HTTPS từ Cert Manager
  • ReactJS không render server nên đỡ lo injection
  • Và... mong mấy anh hacker rảnh không ghé thăm

3. Build

🔹Step 1: Mua Domain

Mình chọn mua domain tại Vinahost, lý do là họ hỗ trợ tên miền .vn – hợp với định hướng cá nhân & thị trường Việt Nam.

✅ Ưu điểm: Có domain .vn

⚠️ Nhược điểm:

  • UI/UX khá "cổ điển", không thân thiện
  • Quy trình đăng ký hơi rườm rà (eKYC, upload giấy tờ…)

👉 Nhưng thôi, xuống tiền rồi thì chiến thôi.

🔹 Step 2: Đăng ký AWS Console

Truy cập: https://aws.amazon.com/

Yêu cầu: Phải có thẻ tín dụng để kích hoạt tài khoản

AWS sẽ dùng cho: S3 (hosting), Route 53 (DNS), Certificate Manager (SSL), CloudFront (CDN)

🔹 Step 3: Cài đặt IDE có hỗ trợ AI

Mình dùng Trea AI:
🔗 https://www.trae.ai/

💡 Giao diện giống Visual Studio Code, dễ thao tác

📌 Lưu ý: Cấp quyền Terminal cho Trea, không thì sẽ không chạy được lệnh terminal đâu.

🔹 Step 4: Cài đặt các công cụ cần thiết

  • NodeJS: Tải từ https://nodejs.org/
  • Git: Cài đặt Git để kết nối với GitLab
  • GitLab: Đăng ký một tài khoản tại https://gitlab.com

🔹 Step 5: Thiết kế Roadmap triển khai

Là Product thì mục tiêu là go live nhanh nhất có thể, không cầu toàn, ra MVP sớm rồi cải tiến dần.

Lộ trình MVP:

Giai đoạnMục tiêuThời gian dự kiến
MVP1Default content tĩnh (HTML/CSS)1–3 ngày
MVP2Thêm nội dung, hiệu ứng, layout đẹp hơn2–4 tuần
MVP3Redesign hoặc tối ưu tùy sứcTùy hứng

🔹 Step 6: Coding

  • Tạo folder và mở bằng Trea AI
  • Khởi tạo project ReactJS bằng prompt:

    Prompt gợi ý cho AI:

    As job seeker, I want to create an CV page by Reactjs, The page should be responsive in phone from iphone 13
  • Chú ý, bạn có thể đưa CV cho Trea để dùng content sẵn có, hoặc bạn để AI tự generate content sau đó mình chỉnh sửa
  • Chạy thử và sửa lại nội dung nếu cần thiết (npm start)
  • Build production (npm run build)

🔹 Step 7: Kết nối Git

  • git init
  • Tạo nhánh feature/init
  • Kết nối Git local với GitLab remote
  • Lỗi phổ biến: Token access – nhớ tạo và gán đúng quyền
  • Commit lần đầu tiên (git commit -m "init project")

🔹 Step 8: Tạo Bucket trên AWS S3

Dùng để host website tĩnh. Các bước:

  • Tạo S3 bucket
  • Enable static website hosting
  • Set public read access
  • Upload nội dung build production

🔹 Step 9: Thiết lập CI/CD với GitLab

Dùng .gitlab-ci.yml để tự động deploy lên S3 mỗi lần push vào nhánh main.

💡 Có thể cần tạo IAM Role và key riêng cho GitLab.

🔹 Step 10: Cấu hình Domain

  • Route 53: Trỏ domain từ Vinahost về AWS
  • Certificate Manager: Cấp SSL miễn phí
  • CloudFront (CDN):
    • S3 không support HTTPS mặc định → cần CloudFront để dùng SSL
    • Tạo distribution, kết nối với S3 và SSL cert

⚠️ Một số lỗi thường gặp

  • S3 không bật static hosting → không load được site
  • CloudFront chưa cấp đúng quyền bucket
  • CI/CD config sai bucket hoặc key
  • Build dev chạy ok nhưng build prod lỗi → rollback & fetch lại local để fix

✅ Kết luận

Tới bước này là bạn có thể update nội dung thoải mái, deploy cực kỳ nhanh qua GitLab CI.

🎯 Nhớ luôn test kỹ production build vì có thể dev chạy được nhưng prod lại lỗi bất ngờ.

4. Disclaimer

  • ⏰ Thời điểm viết bài là tháng 4 năm 2025. Các gói dependencies và config có thể ăn theo từng thời điểm
  • 🔍 Vì tôi thấy là nhiều video config con pheo nó đéo đúng lắm, nên lúc đầu cũng phải test dăm ba bận cái CI vs setup S3, CDN
  • 👀 Cũng phải lòi con mắt
  • ⚡ Công cuộc dev nó tốn khoảng 20% chu trình nên ae cố gắng nắm bắt toàn bộ chu trình SDLC để ra được một thành phẩm tới tay người dùng

Lời Khuyên

  • Giữ design đơn giản, tập trung vào nội dung
  • Đảm bảo website responsive trên mọi thiết bị
  • Thường xuyên cập nhật portfolio với projects mới
  • Tối ưu performance và accessibility