🚀 Từ Python đến Portfolio: Hành Trình Vibecoding Website Đầu Tiên

Xây dựng một trang web portfolio là một nghi thức không thể thiếu của mỗi lập trình viên. Đây không chỉ đơn thuần là việc trưng bày kỹ năng của bạn — mà còn là một quá trình thử nghiệm, phá vỡ và sửa chữa, và học hỏi từ những sai lầm. Gần đây, tôi đã xây dựng và triển khai trang web portfolio của mình trên Firebase Hosting, và trong quá trình đó, tôi đã khám phá ra điều mà tôi gọi là Vibecoding.

👉 Liên kết trực tiếp: https://portfolio-website-99a6d.web.app/
⚠️ Lưu ý: Trang web vẫn đang trong quá trình hoàn thiện và chưa được tối ưu cho di động. Tính năng phản hồi sẽ sớm có mặt!

🎵 Vibecoding là gì?

Vibecoding là cách mà tôi mô tả quá trình lập trình cho dự án này:

• Ngồi với chiếc laptop của mình, tai nghe trên đầu, danh sách phát nhạc đang chạy, và chỉ đơn giản là vibing theo dòng mã.
• Không phải là lập kế hoạch hoàn hảo; mà là vào nhịp, sửa chữa vấn đề khi chúng xuất hiện, và để sự sáng tạo dẫn dắt quá trình.
• Một số lập trình viên gọi đó là "trạng thái dòng chảy", nhưng tôi thích gọi là "vibecoding" vì nó có vẻ vui vẻ và cá nhân hơn.

Khi bạn vibecode, bạn không chờ đợi một lộ trình hoàn hảo. Bạn bắt đầu xây dựng, triển khai thường xuyên, học hỏi từ những sai lầm, và để cảm xúc dẫn dắt bạn.

⚡ Trải Nghiệm Bolt.new

Điều bất ngờ là: Tôi thậm chí không biết JavaScript, TypeScript, hay Java. Nền tảng của tôi là Python, SQL và C++ — nhưng tôi vẫn quản lý để xây dựng được portfolio này.

Làm thế nào? Nhờ vào Bolt.new, một công cụ giúp việc tạo dự án React + Vite trở nên dễ dàng hơn rất nhiều. Bolt cho phép tôi bỏ qua rất nhiều bước thiết lập boilerplate và trực tiếp bắt đầu thử nghiệm với mã frontend.

Điều này cho thấy rằng bạn không cần phải thành thạo mọi ngôn ngữ để có thể xuất bản một sản phẩm hữu ích. Đôi khi, những công cụ phù hợp sẽ giúp bạn vượt qua khoảng cách đó.

🚀 Triển Khai Portfolio Trên Firebase

1. Xây Dựng Dự Án

Vì tôi đã sử dụng React + Vite, bước xây dựng sản phẩm rất đơn giản:

npm run build

Điều này tạo ra một thư mục dist với các tệp đã được tối ưu hóa sẵn sàng cho việc triển khai.

2. Cài Đặt Firebase

1. Cài đặt Firebase CLI toàn cầu:

npm install -g firebase-tools

2. Đăng nhập vào Firebase:

firebase login

3. Khởi tạo hosting trong thư mục dự án:

firebase init hosting

• Chọn dự án Firebase của bạn
• Đặt dist làm thư mục công khai
• Chọn yes cho cấu hình ứng dụng một trang

3. Triển Khai Trực Tiếp

firebase deploy

Và boom 💥 — portfolio của tôi đã được trực tuyến tại
👉 https://portfolio-website-99a6d.web.app/

🛠️ Những Lỗi Thường Gặp & Cách Khắc Phục

Trong quá trình phát triển, tôi đã gặp phải nhiều lỗi. Dưới đây là cách tôi đã giải quyết chúng:

❌ Lỗi: Không có dự án đang hoạt động

Error: No currently active project.

✅ Cách khắc phục: Chạy

firebase use --add

và chọn dự án Firebase của bạn.

❌ Lỗi: Firestore API bị vô hiệu hóa (403)

Cloud Firestore API has not been used in project ...

✅ Cách khắc phục: Truy cập
👉 Enable Firestore API
và kích hoạt API, sau đó triển khai lại.

❌ Cảnh báo lỗi không còn hiệu lực (như node-domexception)

Những cảnh báo này thường không cần phải lo lắng. Chỉ cần đảm bảo rằng bạn đang sử dụng phiên bản Node.js mới nhất.

📊 Giám Sát Website

Triển khai không phải là điểm dừng. Tôi cũng đã khám phá các tùy chọn giám sát:

• Firebase Performance Monitoring – để theo dõi thời gian phản hồi và mức sử dụng.
• UptimeRobot – công cụ miễn phí để kiểm tra website của tôi mỗi 5 phút.
• Sentry – tùy chọn theo dõi lỗi trong quá trình chạy.

Điều này đảm bảo rằng nếu có điều gì đó bị hỏng, tôi sẽ biết trước khi người dùng phát hiện.

📈 Các Cân Nhắc Về SEO

Vì đây là một portfolio, khả năng tìm thấy là rất quan trọng. Một số bước tôi đã áp dụng:

• Thêm meta tags (title, description, keywords) vào trong index.html
• Triển khai trên Firebase với HTTPS (Google xếp hạng các trang an toàn cao hơn)
• Kế hoạch để thêm sitemap.xml và robots.txt cho việc lập chỉ mục tốt hơn

Hiện tại, trang web của tôi chưa được tối ưu cho di động, vì vậy SEO chưa hoàn hảo — nhưng khi tính năng phản hồi được khắc phục, các công cụ tìm kiếm sẽ xếp hạng tốt hơn.

💡 Bài Học Từ Vibecoding + Firebase

1. Bắt đầu một cách lộn xộn, tinh chỉnh sau. Vibecoding giúp bạn bắt đầu mà không cần suy nghĩ quá nhiều.
2. Công cụ > kiến thức đôi khi. Bolt.new đã giúp tôi lập trình trong một ngăn xếp mà tôi thậm chí không biết.
3. Triển khai là một phần của cuộc chiến. Sử dụng Firebase cho những giải pháp hosting nhanh chóng.
4. Lỗi là một phần của quá trình. Mỗi cảnh báo đã dạy tôi điều gì đó mới.
5. Giám sát là rất quan trọng. Một trang web trực tuyến mà không có giám sát thời gian hoạt động là điều rủi ro.
6. SEO là một quá trình liên tục. Đừng bỏ qua metadata và tính năng phản hồi.

🎯 Kết Luận

Xây dựng trang portfolio này không phải là về sự hoàn hảo — mà là về động lực. Vibecoding đã cho tôi tư duy để tiếp tục, Bolt.new đã cung cấp cho tôi cú hích khởi đầu, Firebase đã cho tôi nền tảng để triển khai nhanh chóng, và việc giám sát đã mang lại cho tôi sự an tâm.

Hành trình vẫn tiếp tục: Tôi vẫn cần làm cho portfolio của mình thân thiện với di động và thêm pipelines CI/CD để các cập nhật được đưa trực tiếp ngay sau mỗi lần đẩy lên GitHub.

Nhưng đó chính là niềm vui của vibecoding — cảm xúc sẽ phát triển cùng bạn. ✨

👨‍💻 Nếu bạn là một lập trình viên đang xây dựng portfolio của mình, tôi rất khuyên bạn nên thử vibecoding để triển khai lên Firebase Hosting. Triển khai nhanh chóng, sửa chữa khi đi và tiếp tục vibing.