“Deploy website code” là quá trình chuyển đổi và triển khai mã nguồn của một trang web từ môi trường phát triển hoặc thử nghiệm sang một môi trường hoạt động công khai trên Internet, nhằm đảm bảo rằng trang web có thể được truy cập và sử dụng một cách hiệu quả. Bài viết này sẽ hướng dẫn bạn cách deploy website code bằng HTML, CSS lên Vercel App.
Để tạo hiệu ứng slide độc đáo, bạn cần tạo các tệp tin HTML và CSS mới. Trong HTML, cấu trúc các phần tử như “div” để chứa slide và nội dung. Sử dụng CSS để thêm hiệu ứng slide bằng transition và animation. Kiểm tra và điều chỉnh cho đến khi đạt được hiệu ứng mong muốn, tạo ra trải nghiệm thú vị cho người dùng.
Dưới đây là hình ảnh khi chạy ứng dụng:
Bước 2: Đẩy code lên GitHub
Đẩy lên GitHub khá quan trọng vì Vercel cho phép chúng ta import trực tiếp các repository trên Github của chúng ta và tự động Deploy khi có thay đổi. Việc này cũng giúp hạn chế thời gian Deploy Project lên Vercel App. Dưới đây là đường link code website của mình trên Github các bạn có clone về tham khảo thêm tại đây.
Bước 3: Tạo ứng dụng deploy trên vercel
Nếu bạn chưa có tài khoản Github thì có thể vào trang này tạo cho mình 1 tài khoản nhé GitHub
Ở bước này, thực hiện Import Repository đã tạo ở bước số 2 vào ứng dụng. Tại màn hình Overview các bạn thực hiện chọn Add New > Project:
Lúc này người dùng sẽ thấy được Repository mình đã cấp quyền cho Vercel đọc. Để tùy chỉnh lại quyền Vercel đọc các Repository các bạn có thể chọn Adjust GitHub App Permissions và thực hiện chọn các Repository muốn hiển thị hoặc là tất cả tại mục access:
Ở đây chọn Repository đã đẩy lên Github và thực hiện Import
Tiếp tục nhấn Deploy ở màn hình kế tiếp
Tiếp tục chờ đợi khoảng 10-20s và đây là kết quả khi deploy thành công ứng dụng của mình
Và thế là mình đã có một Deploy hoàn chỉnh cho ứng dụng của mình tại địa chỉ website.
Hi vọng qua bài viết này, sinh viên sẽ thành công deploy các dự án khác sau này để lưu trữ cho vào CV cá nhân cũng như chia sẻ cho bạn bè cùng tham khảo.
