Các trang tĩnh là bánh mì hàng ngày của những năm 90. Theo thời gian, sự xuất hiện của các hệ thống quản lý nội dung như WordPress đã khiến chúng trở nên lỗi thời. Tuy nhiên, như lịch sử đã chỉ ra, các xu hướng có xu hướng quay trở lại và việc phát triển web cũng không ngoại lệ. Tuy nhiên, ngày nay, các trang web tĩnh tiên tiến hơn nhiều và cung cấp cho chúng tôi nhiều khả năng hơn
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một trang web tĩnh nhanh bằng WordPress, plugin Đầu ra HTML tĩnh và Buddy
Lợi ích của các trang web tĩnh
- Họ nhanh. tất cả đều là HTML đơn giản, vì vậy tất cả các truy vấn phức tạp đều được giải quyết trong quá trình triển khai
- Có thể được lưu trữ ở mọi nơi, kể cả các dịch vụ lưu trữ ít tốn kém hơn, giúp việc bảo trì tiết kiệm chi phí hơn
- Bảo vệ. Cách duy nhất có thể để đột nhập là tấn công chính máy chủ
Nhược điểm chính của WordPress
- Hiệu quả. Tất cả các trang web được tạo động dẫn đến các vấn đề về hiệu suất trên các trang web có nhiều mục nhập và trang con
- WordPress yêu cầu cập nhật plugin và cốt lõi liên tục. Bỏ qua chúng có thể dẫn đến các vấn đề bảo mật lớn
- Chi phí bảo trì - tất cả phụ thuộc vào những gì trang web của bạn cần. Tìm một máy chủ phù hợp có thể làm giảm nghiêm trọng ngân sách của bạn
WordPress + Tĩnh = 💗
Như bạn có thể thấy, việc chuyển đổi WordPress thành một trang web tĩnh có thể khắc phục nhiều vấn đề mà WordPress gặp phải. Ngoài việc giảm chi phí bảo trì, bạn còn được cải thiện bảo mật và hiệu suất tốt hơn - điều này sẽ đặc biệt có lợi cho chủ sở hữu các dịch vụ có lưu lượng truy cập cao. Vì chúng tôi đang triển khai HTML thuần túy nên nội dung được hiển thị nhanh hơn nhiều, giúp giảm đáng kể thời gian tải, cải thiện trải nghiệm tổng thể của người dùng trên thiết bị di động. Điều đáng nói là tốc độ ngày càng quan trọng đối với Google. Việc triển khai Core Web Vitals gần đây của họ tập trung vào tính dễ sử dụng, giao thức HTTPS và thời gian tải – ba khía cạnh chính đóng vai trò chính trong việc định vị trang web vào năm 2021
Trước khi chúng tôi bắt đầu làm việc với dự án trình tạo trang tĩnh của mình, cần xem xét liệu chúng tôi có thực sự cần giải pháp đó hay không. Hãy nhớ rằng biểu mẫu, tìm kiếm, nhận xét, thanh toán hoặc các thành phần động khác sẽ không hoạt động ngay lập tức. Điều này có nghĩa là khi tạo một trang web tĩnh, chúng tôi phải tính đến tất cả các yếu tố mong manh và tìm kiếm các giải pháp thay thế khả thi - ví dụ: sử dụng Disqus để quản lý nhận xét hoặc Algolia làm trình duyệt tại chỗ của chúng tôi
Chuẩn bị môi trường
Đây là những gì chúng ta sẽ cần để bắt đầu
- Kho lưu trữ Git với chủ đề WP
- Máy chủ có quyền truy cập SSH
- Cài đặt WordPress với plugin WP-CLI và Đầu ra HTML tĩnh
tên miền
Một cách thực hành tốt là sử dụng hai miền riêng biệt. Một cho riêng WordPress [e. g.
1], và một cái khác cho môi trường sản xuất [wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
2]. Khi xây dựng trang web, tất cả các URL chuyển hướng đến ________ 11 sẽ được chuyển đổi thành ________ 12wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
Định cấu hình đầu ra WordPress và HTML tĩnh
Bắt đầu với việc kích hoạt plug-in Đầu ra HTML tĩnh. Tùy thuộc vào nhu cầu của mình, bạn có thể loại trừ một số URL nhất định khỏi việc lập chỉ mục trong tab Thu thập thông tin. Phần còn lại của cấu hình sẽ được thực hiện thông qua WP-CLI
đường ống
Với mục đích của hướng dẫn này, chúng tôi sẽ sử dụng chủ đề Dấu gạch dưới được tạo bởi Automattic. Đó là cơ sở hoàn hảo để tạo chủ đề của riêng bạn
Các đường ống mà chúng tôi sắp định cấu hình sẽ thực hiện các thao tác sau
- Xây dựng tệp CSS
- Tải tất cả các thay đổi chủ đề lên máy chủ
- Chuẩn bị một phiên bản tĩnh của trang web
Sau khi chọn và đồng bộ hóa kho lưu trữ của bạn, hãy tạo hai biến môi trường toàn cầu
5- đặt nó thànhwp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
6wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
0- đặt nó thànhwp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
1wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
Tìm hiểu thêm về cách sử dụng Biến môi trường trong Buddy
Xây dựng chủ đề và tải lên máy chủ
Đường ống đầu tiên của chúng tôi sẽ xây dựng và triển khai chủ đề của chúng tôi tới máy chủ
Định cấu hình bản dựng
Tạo một đường dẫn mới và đặt tên cho nó. Bạn có thể đặt chế độ kích hoạt thành 'Khi đẩy' để tự động thực hiện triển khai trên mỗi lần đẩy tới nhánh đã chọn
Thêm nút. js làm hành động đầu tiên và nhập thông tin sau vào phần Lệnh xây dựng
npm install npm run compline:CSS
$$
Cấu hình triển khai
Tiếp theo thêm hành động SFTP. Nó sẽ chịu trách nhiệm tải chủ đề của chúng tôi lên máy chủ. Sau khi cung cấp thông tin xác thực phù hợp, hãy thêm
2 vào đường dẫn Bỏ quawp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
Chuyển đổi sang trang tĩnh
Đường ống thứ hai sẽ xây dựng phiên bản tĩnh của trang web
Bạn sẽ cần thêm ba biến môi trường mới – lần này phạm vi chỉ có thể được giới hạn trong quy trình này. Các biến như sau
3- đây là tên miền mặc định của chúng tôiwp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
4- đây là đường dẫn mặc định của chúng tôiwp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
5- đây là thư mục cài đặt WordPress của chúng tôiwp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
Chuẩn bị phiên bản tĩnh
Bước đầu tiên, sẽ tạo các tệp tĩnh trên máy chủ của chúng tôi. Để làm như vậy, chúng ta phải kết nối với máy chủ thông qua hành động SSH và thực hiện như sau
wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
Nhờ đó, tất cả các tệp được tạo sẽ được tìm thấy trong thư mục mặc định của chúng tôi được xác định bởi biến
Sao chép các tập tin
Trong bước tiếp theo, chúng tôi sẽ chuyển tất cả nội dung vào một thư mục thích hợp. Để làm như vậy, chúng ta sẽ cần một hành động SSH khác sẽ thực thi lệnh sau
________số 8Có thể plugin Đầu ra HTML tĩnh sẽ không phát hiện đúng tất cả các tệp trong thư mục
6, vì vậy, bạn nên sao chép tất cả các tệp còn lại bằng cách sử dụngwp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
0wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN} wp statichtmloutput generate
$$
Cả hai lệnh trong hành động sẽ trông như thế này
Triển khai đến các máy chủ khác nhau
Trong hướng dẫn này, cả WordPress và trang web đều nằm trên cùng một máy chủ. Tuy nhiên, có thể bạn sẽ muốn tách cả hai môi trường. Có một số cách bạn có thể đạt được điều này. Ví dụ: bạn có thể sử dụng rsync để di chuyển tất cả tệp sang máy chủ khác hoặc sử dụng CLI dành riêng cho nền tảng [e. g. Netlify] để di chuyển các tệp đến đích mong muốn của bạn
Bản tóm tắt
Và bạn đã có nó – một cách đơn giản để biến trang web WordPress của bạn thành trang web tĩnh. Tính năng độc đáo của các quy trình của Buddy là bạn có thể mở rộng quy trình hiện tại của mình dễ dàng như thế nào chỉ bằng cách thêm các hành động mới. Ví dụ: bạn có thể sử dụng hành động Trình kiểm tra liên kết để theo dõi bất kỳ lỗi 404 nào hoặc sử dụng một trong các hành động giám sát để kiểm tra hiệu suất
Cảm ơn vì đã đọc
Maciek Palmowski Nhà phát triển WordPress & PHP
Maciek là Đại sứ WordPress làm việc tại Buddy. Là một người tích cực tham gia vào thế giới Nguồn mở, anh ấy dành phần lớn thời gian rảnh của mình để cố gắng tìm những tin tức thú vị cho bản tin WP Owls hoặc đạp xe