Hướng dẫn deploy website HTML CSS lên Vercel Free hiệu quả cho sinh viên

17:01 22/02/2024

“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. 

Deply website code cho phép người dùng triển khai các ứng dụng web động được xây dựng bằng nhiều ngôn ngữ lập trình như JavaScript, TypeScript, Python, Go và nhiều hơn nữa. Nền tảng này cũng hỗ trợ các framework phổ biến như React, Next.js, Vue và Angular,… Các bước dưới đây để có thể triển khai trang web một cách dễ dàng và hiệu quả, hoàn toàn phù hợp cho sinh viên và những ai muốn chia sẻ dự án web của mình.
Bước 1: Tạo Project HTML, CSS

Để 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. 

Giảng viên Nguyễn Thị Loan 
Bộ môn Công nghệ thông tin
FPT Polytechnic Hà Nội

Cùng chuyên mục

Đăng Kí học Fpoly 2024

  • Max. file size: 512 MB.
  • Max. file size: 512 MB.
  • Max. file size: 512 MB.