Triển khai website lên máy chủ¶

Tóm lược nội dung

Bài này trình bày cách tải website đã tạo lên một dịch vụ máy chủ (hosting) để mọi người có thể truy cập.

Khái quát¶

Khi tạo website kỷ yếu, ta chỉ xem được website trên máy tính của mình.

Để người khác có thể truy cập website bằng máy tính của họ, ta cần một nơi để "đặt" các thư mục và tập tin của website. Nơi đó được gọi là hosting, hoặc web hosting.

Hosting

Là dịch vụ cho thuê một phần không gian trên máy chủ (server) để lưu trữ dữ liệu website, nhằm mục đích cho mọi người có thể truy cập website từ khắp nơi trên thế giới.

Máy chủ hosting luôn hoạt động liên tục để phục vụ mọi lúc mọi nơi.

Hướng dẫn sử dụng Netlify¶

Giới thiệu¶

Netlify

Netlify là nền tảng chuyên dùng để triển khai các trang web tĩnh.

Ưu điểm của Netlify là dễ sử dụng và có gói miễn phí, vừa đủ đáp ứng nhu cầu triển khai trang web trong các bài đã học.

Chuẩn bị¶

1. Cần bảo đảm toàn bộ thư mục và tập tin của website đều nằm trong cùng một thư mục chung.

Ví dụ:
Tham khảo cây thư mục dưới đây. Trong đó:

Tập tin index.html là trang chủ của website kỷ yếu, chứa các đường link liên kết đến các trang portfolio. Tập tin này bắt buộc phải có khi tải lên Netlify.
Thư mục css chứa các tập tin định kiểu .css.
Thư mục html chứa các tập tin portfolio-*.html của các thành viên trong lớp.
Những tập tin và thư mục khác.

Toàn bộ các thư mục và tập tin trên được đặt trong thư mục web-yearbook.

web-yearbook/
├── index.html  <-- File này bắt buộc phải có!
├── css/
│   └── style.css
├── html/
│   └── portfolio-1.html
│   └── portfolio-2.html
│   └── portfolio-3.html
│   └── portfolio-4.html
└── thư_mục_khác/
    ├── tập_tin_khác.*
    └── tập_tin_khác_2.*

2. Tạo tài khoản và đăng nhập vào https://www.netlify.com/.

3. Sau khi đăng nhập, ta sẽ được điều hướng tự động đến trang quản lý. Nếu chưa được, hãy vào https://app.netlify.com/.

Tải website lên¶

1. Trong menu bên trái, chọn mục Sites.

2. Tìm khu vực có nội dung tương tự như Want to deploy a new site without connecting to Git? Drag and drop your site output folder here. Or, browse to upload.

3. Click vào browse to upload.

4. Trong hộp thoại hiện ra, chọn thư mục chứa website.

Netlify sẽ hiển thị thông báo thành công hoặc không.

Đổi tên website¶

Khi triển khai thành công, mọi người đã có thể truy cập website. Tuy nhiên, ta nên đổi tên website cho thân thiện hơn.

1. Trong menu bên trái, chọn mục Site configuration.

2. Click nút Change site name.

3. Trong hộp thoại hiện ra, gõ tên website tuỳ ý (1).

Tên này còn được gọi chính xác là tên miền phụ (sub-domain).

Tên miền chính là netlify.app. Nếu muốn sử dụng tên miền khác, chẳng hạn như .com, .vn, v.v..., ta phải trả phí hằng năm cho một công ty quản lý tên miền nào đó.

4. Click nút Save.

Xem thành quả¶

Mở trình duyệt bất kỳ và nhập địa chỉ để truy cập website.

Cập nhật website¶

Sau mỗi lần chỉnh sửa, ta có thể cập nhật website bằng cách tải lên Netlify tương tự như bước đầu.

1. Trong menu bên trái, chọn mục Deploys.

2. Click vào browse to upload.

3. Trong hộp thoại hiện ra, chọn thư mục chứa website của mình.

Netlify sẽ tự động thay thế toàn bộ nội dung cũ bằng nội dung mới nhất mà ta vừa tải lên. Vì vậy, cần bảo đảm thư mục trên máy tính luôn chứa đầy đủ các tập tin của website trước khi tải lên.

Bao tôi ly cafe 🧋 nhé!