Hướng dẫn lưu trữ Trang web tĩnh của bạn trên Netlify

Khám phá Netlify, một dịch vụ lưu trữ tuyệt vời lý tưởng cho các trang web tĩnh có gói miễn phí đẹp, CDN miễn phí và tốc độ cực nhanh

Tôi lưu trữ blog của mình trênNetlify.

Tôi đã chuyển đi một thời gian trước, máy chủ lưu trữ trước đây của tôi đang gặp một số vấn đề khiến trang web của tôi không thể truy cập được trong vài giờ và trong khi đợi nó trực tuyến trở lại, tôi đã tìm kiếm một cách nhanh chóng để khôi phục nó và tôi đã tạo bản sao của trang web của tôi trên Netlify.

Vì blog này chạy trênHugo, là một Static Site Generator, tôi không cần nhiều thao tác để chuyển blog sang một hosting mới. Tất cả những gì tôi cần là thứ có thể phục vụ các tệp HTML, thứ mà hầu hết mọi máy chủ lưu trữ trên hành tinh đều có.

Tôi bắt đầu tìm kiếm nền tảng tốt nhất cho một trang web tĩnh và một số ít nổi bật nhưng cuối cùng tôi đã dùng thử Netlify và tôi rất vui vì đã làm được điều đó.

Netlify Logo

Giới thiệu Netlify

Có một vài điều tạo ấn tượng tuyệt vời đối với tôi trước khi thử nó.

Đầu tiênkế hoạch miễn phí rất hào phóngcho các dự án thương mại hoặc miễn phí, với 100GB băng thông miễn phí hàng tháng và cho một trang web tĩnh chỉ với một vài hình ảnh ở đây và ở đó, đó là rất nhiều không gian!

Chúng bao gồm một toàn cầuCDN, để đảm bảo tốc độ không phải là mối quan tâm ngay cả ở các lục địa cách xa máy chủ vị trí trung tâm.

Bạn có thể chỉ của bạnDNSmáy chủ tên đến Netlify và họ sẽ xử lý mọi thứ cho bạn với giao diện rất đẹp để thiết lập các nhu cầu nâng cao.

Tất nhiên, chúng hỗ trợ có miền tùy chỉnh và HTTPS.

Đến từ Firebase, tôi mong đợi một cách quản lý triển khai rất thân thiện với lập trình viên, nhưng tôi thấy nó thậm chí còn tốt hơn khi xử lý từng Trình tạo trang web tĩnh.

Netlify và Hugo

Tôi sử dụng Hugo và chạy cục bộ một máy chủ bằng cách sử dụng công cụ tích hợp của nóhugo server, xử lý việc xây dựng lại tất cả HTML mỗi khi tôi thực hiện thay đổi và nó chạy một máy chủ HTTP trên cổng1313theo mặc định.

Để tạo trang web tĩnh, tôi phải chạyhugovà điều này tạo ra một loạt các tệp trongpublic/thư mục.

Tôi đã làm theo phương pháp này trên Firebase: Tôi đã chạyhugođể tạo các tệp, sau đófirebase deploy, được định cấu hình để đẩypublic/nội dung thư mục đến các máy chủ của Google.

Tuy nhiên, trong trường hợp của Netlify, tôi đã liên kết nó với kho lưu trữ GitHub riêng tư của mình, nơi lưu trữ trang web và mỗi khi tôi đẩy lên nhánh chính, nhánh mà tôi đã yêu cầu Netlify đồng bộ hóa, Netlify sẽ bắt đầu triển khai mới và các thay đổi sẽ có hiệu lực. trong vòng vài giây.

Dashboard

MẸO: nếu bạn sử dụng Hugo trên Netlify, hãy đảm bảo rằng bạn đã đặt HUGO_VERSION trongnetlify.tomllên bản phát hành ổn định Hugo mới nhất, vì phiên bản mặc định có thể đã cũ và (tại thời điểm viết bài) không hỗ trợ các tính năng gần đây như gói bài đăng.Đây là tệp cấu hình netlify.toml của tôi.

Nếu bạn cho rằng điều này không có gì mới, bạn nói đúng, vì điều này không khó để thực hiện trên máy chủ của riêng bạn (tôi làm như vậy trên các trang web khác không được lưu trữ trên Netlify), nhưng đây là một cái gì đó mới: bạn có thể xem trước bất kỳ GitHub nào (hoặc GitLab hoặc BitBucket) chi nhánh / PR trên một URL riêng biệt, tất cả trong khi trang web chính của bạn đang hoạt động và chạy với nội dung “ổn định”.

Một tính năng thú vị khác là khả năng thực hiện thử nghiệm A / B trên 2 nhánh Git khác nhau.

Chức năng nâng cao do Netlify cung cấp cho các trang web tĩnh

Các trang web tĩnh có hạn chế rõ ràng là không thể thực hiện bất kỳ hoạt động nào từ phía máy chủ, như những thao tác bạn mong đợi từ CMS truyền thống chẳng hạn.

Đây là một ưu điểm (ít vấn đề bảo mật cần quan tâm hơn) nhưng cũng là một hạn chế trong chức năng bạn có thể triển khai.

Một blog không có gì phức tạp, có thể bạn muốn thêm nhận xét và chúng có thể được thực hiện bằng cách sử dụng các dịch vụ như Disqus hoặc các dịch vụ khác.

Hoặc có thể bạn muốn thêm biểu mẫu và bạn làm như vậy bằng cách nhúng các biểu mẫu được tạo trên các ứng dụng của bên thứ ba, như Wufoo hoặc Google Biểu mẫu.

Netlify cung cấp một bộ công cụ để xử lýCác hình thức, xác thực người dùng và thậm chí triển khai và quản lýCác hàm lambda.

Cần mật khẩu bảo vệ một trang web trước khi khởi chạy nó? ✅

Cần xử lýCORS? ✅

Cần phải có chuyển hướng 301? ✅

Cần kết xuất trước cho SPA của bạn? ✅

Tôi mới chỉ sơ lược về những thứ bạn có thể làm với Netlify mà không cần liên hệ với các dịch vụ của bên thứ 3 và tôi hy vọng tôi đã cho bạn lý do để dùng thử.

Xem trước các chi nhánh

Tích hợp GitHub hoạt động hiệu quả với các Yêu cầu kéo.

Mỗi khi bạn đẩy Yêu cầu kéo, Netlify triển khai nhánh đó trên một URL cụ thể mà bạn có thể chia sẻ với nhóm của mình hoặc với bất kỳ ai bạn muốn.

Tại đây, tôi đã thực hiện một Yêu cầu kéo để xem trước một bài đăng trên blog mà không cung cấp bài đăng đó trên blog công khai của mình:

GitHub Pull Request

Netlify ngay lập tức chọn nó và tự động triển khai nó 🎉

The deployed preview

Nhấp vào liên kết sẽ trỏ bạn đến URL đặc biệt cho phép bạn xem trước phiên bản PR của trang web.


Các hướng dẫn dịch vụ khác: