Mục lục
Trước khi bắt đầu
Hướng dẫn này minh họa quy trình nhanh để tạo và xuất bản hai loại website (Portfolio và Landing Page bán hàng) bằng cách kết hợp Google Gemini (Canvas) và NotebookLM. Kết quả thực tế là mã HTML + Tailwind CSS do Gemini sinh ra, có thể lưu thành file .html và chuyển thành link chia sẻ bằng Netlify Drop. Quy trình hữu ích vì tự động hóa phần viết mã giao diện từ dữ liệu và prompts cụ thể, rút ngắn thời gian thiết kế giao diện chuyên nghiệp.
Nội dung chính
Hướng dẫn từng bước để: (1) yêu cầu Gemini viết mã Portfolio trong Canvas, lưu file và deploy lên Netlify Drop; (2) nạp dữ liệu vào NotebookLM, kết nối Notebook với Gemini, tạo cấu trúc Landing Page, yêu cầu Gemini viết mã, lưu file và tùy chọn deploy.
Bài này phù hợp với ai?
- Ứng viên muốn nhanh chóng tạo portfolio trực tuyến để gửi kèm hồ sơ.
- Chủ shop nhỏ muốn landing page bán hàng nhanh từ dữ liệu sẵn có.
- Người dùng đã có tài khoản Google (để đăng nhập Netlify nếu cần mở rộng thời gian).
- Người muốn thử nghiệm quy trình NotebookLM + Gemini để sinh mã HTML/Tailwind.
Bạn sẽ tạo ra gì?
Bạn sẽ có hai file HTML hoàn chỉnh: một Portfolio và một Landing Page (UrbanVibes), được Gemini tạo mã bằng Tailwind CSS, hiển thị đẹp trên điện thoại, có hiệu ứng hover cho dự án/ô sản phẩm và các nút kêu gọi hành động nổi bật.
Bạn cần chuẩn bị gì?
- Truy cập vào Google Gemini (có công cụ Canvas) và NotebookLM.
- Dữ liệu portfolio hoặc bộ tài liệu cho shop (ví dụ: bảng giá, mô tả thương hiệu, feedback khách hàng) để tải lên NotebookLM.
- Trình soạn văn bản đơn giản (ví dụ Notepad) để dán và lưu mã HTML.
- Tùy chọn: tài khoản Google để đăng nhập Netlify và kéo thời gian tồn tại/tuỳ chỉnh đường link.
- Khoảng vài phút cho mỗi bước tự động (Gemini/NotebookLM xử lý và preview).
Quy trình này dựa trên việc Gemini sinh mã giao diện từ prompts và dữ liệu có cấu trúc. Luôn kiểm tra mã nguồn trước khi public và tránh đính kèm dữ liệu nhạy cảm vào NotebookLM hoặc Gemini nếu không cần thiết.
Mở rộng thêm
Khi quen với quy trình cơ bản, bạn có thể mở rộng để tự động hóa nhiều phần hơn: chuẩn hóa dữ liệu trong NotebookLM, chuẩn bị template prompt cho Landing Page, hoặc thêm bước kiểm thử sau khi deploy. Quy trình NotebookLM + Gemini hữu ích khi bạn muốn tạo nhiều biến thể giao diện từ cùng một nguồn dữ liệu.
Tạo Portfolio bằng Gemini (Canvas)
Quy trình gồm 8 bước thực tế.
Mở Canvas trong Gemini
Trong giao diện Gemini, nhấp vào nút "Tools" (Công cụ) rồi chọn mục "Canvas" để yêu cầu Gemini viết code.
Nhập prompt sau vào Canvas và nhấn Enter để Gemini bắt đầu code:
"Dựa trên cấu trúc đã đồng ý, hãy đóng vai chuyên gia phát triển web để viết mã HTML và Tailwind CSS cho website Portfolio này. Sử dụng chính xác thông tin từ Notebook của tôi. Hãy thiết kế phần danh sách dự án thật nổi bật với hiệu ứng hover (di chuột) mượt mà và đảm bảo giao diện hiển thị đẹp trên cả điện thoại."Hoặc bấm vào khung trên để chọn toàn bộ, rồi nhấn Ctrl + C (Cmd + C trên Mac).
Xem kết quả ở tab Preview
Sau khi Gemini hoàn tất, chuyển sang chế độ "Preview" để kiểm tra giao diện Portfolio (phần thông tin cá nhân, lộ trình theo timeline, mục "Dự án tiêu biểu" có hiệu ứng hover).
Trong Canvas, nhấp nút "Share" và chọn "Copy contents" để sao chép toàn bộ mã nguồn do Gemini tạo. Mở trình soạn văn bản (ví dụ Notepad), dán đoạn mã đã sao chép và lưu file với tên Trương Anh Hoàng.html.
Upload lên Netlify Drop để có link
Truy cập Netlify Drop, kéo thả hoặc tải thư mục chứa file HTML lên giao diện Netlify Drop.
Khi thông báo bật lên, nhấp "Rename and deploy". Sau vài giây, Netlify Drop cung cấp một đường link tạm thời (mặc định có hiệu lực một giờ). Nếu cần thời gian truy cập lâu hơn hoặc tuỳ chỉnh đường link, đăng nhập Netlify bằng tài khoản Google.
Kiểm tra trước khi chia sẻ
Mở đường link do Netlify cung cấp để kiểm tra giao diện trực tuyến; nếu có mật khẩu hoặc hướng dẫn bổ sung hiển thị (như trong thông báo), copy theo hướng dẫn rồi chia sẻ với nhà tuyển dụng.
Đảm bảo kiểm tra các liên kết, hình ảnh, hiệu ứng hover và các nút kêu gọi hành động hoạt động đúng. Nếu cần sửa code, chỉnh trong file HTML và upload lại.
