Kết xuất wordpress thành html tĩnh

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.

wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
wp statichtmloutput generate
$$

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 ________ 12

Đị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

đường ống

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

• wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
  wp statichtmloutput generate
  $$

  5- đặt nó thành

  wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
  wp statichtmloutput generate
  $$

  6

• wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
  wp statichtmloutput generate
  $$

  0- đặt nó thành

  wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
  wp statichtmloutput generate
  $$

  1

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ủ

Xây dựng và tải lên đường ống dẫn

Đị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

cấu hình đường ống

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
$$

Nút. cấu hình hành động js

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

wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
wp statichtmloutput generate
$$

2 vào đường dẫn Bỏ qua

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

tổng quan về đường ống

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

• wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
  wp statichtmloutput generate
  $$

  3- đây là tên miền mặc định của chúng tôi

• wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
  wp statichtmloutput generate
  $$

  4- đây là đường dẫn mặc định của chúng tôi

• wp 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ôi

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
$$

Cấu hình hành động SSH

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ố 8

Có 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

wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
wp statichtmloutput generate
$$

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ụng

wp statichtmloutput options set baseUrl ${STATIC_DEPLOYMENT_DOMAIN}
wp statichtmloutput generate
$$

0

Cả hai lệnh trong hành động sẽ trông như thế này

Di chuyển tập tin

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