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ểm | Nhược điểm |
|---|---|---|
| WordPress | Dễ dùng, nhiều plugin | Tốn chi phí hosting nếu dùng EC2 hoặc Cloud (tầm $4–10/tháng) |
| Wix | Giao diện đẹp, kéo thả dễ | Đắt, giới hạn tùy chỉnh sâu |
| Gitlab Page | FREE hoàn toàn | Source 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ần | Công cụ được chọn | Ghi chú cá nhân |
|---|---|---|
| Editor | Trea | Vô tình dùng thử → thấy hợp → dùng luôn |
| VS Code + Copilot, Blackbox | Thử qua nhưng thấy không hợp, giao diện rối | |
| OS | Windows | Vì... dùng quen rồi |
| Ngôn ngữ | JavaScript | Dễ tiếp cận, cộng đồng lớn |
| Framework | ReactJS | Đủ mạnh, nhiều lib hỗ trợ |
| Hosting | AWS S3 | Rẻ, bền, đáng tin cậy |
| Domain | Vinahost .vn | Hỗ trợ domain Việt Nam |
| AWS stack | S3, CDN, Cert Manager, Route 53 | Tự triển khai đơn giản, hiệu quả |
| Tracking | Google Analytics | Theo dõi traffic |
| CI/CD | GitLab CI | Đơn giản, dễ tích hợp, miễn phí |
| Security | Không có gì đặc biệt | Trô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ừ đâyfeature-*: 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 S3set đúng quyềnHTTPStừ Cert ManagerReactJSkhô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ạn | Mục tiêu | Thời gian dự kiến |
|---|---|---|
| MVP1 | Default content tĩnh (HTML/CSS) | 1–3 ngày |
| MVP2 | Thêm nội dung, hiệu ứng, layout đẹp hơn | 2–4 tuần |
| MVP3 | Redesign hoặc tối ưu tùy sức | Tù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