WordPress交流

创建静态WordPress网站

—

static-wp-site

WordPress 是一个出色的内容管理系统 （CMS）。我们几乎可以用它实现任何事情。由于其动态特性，我们只需单击一个按钮即可更改任何内容。虽然这很神奇，但它也带来了一些危险，并且在交通繁忙的情况下可能会变得难以维护。

将您的 WordPress 网站转换为静态网站可能会解决这些问题。

目录

  1. 什么是静态网站？
  2. 静态的优点
  3. 静态的缺点
  4. 初步步骤
  5. 将WordPress 网站转换为静态网站
  6. 将WP转换为静态的其他方法

什么是静态网站？

要解释静态网站的工作原理，首先，我们必须了解动态网站的工作原理。

每次我们访问网站时，服务器都必须解析 PHP 文件，查询数据库以获取数据，最后将渲染的 HTML 返回给浏览器。

静态网站首先完成所有繁重的工作 – 在访问网站之前，我们将每个页面保存为静态 HTML。当我们访问所需的页面时，服务器会按原样提供它。

静态的优点

速度和性能

静态网站快速且性能出色。为什么？因为它们只是静态 HTML。这意味着服务器只需要做一件事——为网站服务。它不必解析任何内容或等待数据库中的数据。

此外，静态网站更容易托管在 CDN 上（尽管 Edge Cache 的工作原理类似），它会将所有文件放置在尽可能靠近您的地方。

总体而言 – 静态网站在流量大的情况下表现惊人。

安全

WordPress 的核心是安全的 – 它确实是安全的。但是插件和主题 – 并非总是如此。此外，每个人都可以尝试开始猜测我们的登录名和密码。

总的来说，我喜欢将 WordPress 比作一个有很多门窗的房子。由我们来选择最安全的，但是，如果一扇门不够安全，黑客仍然可以入侵我们的网站。

将您的网站转换为静态网站可以删除大多数攻击媒介。因为它只是 HTML，所以黑客将无法使用易受攻击的插件或从弱密码中受益。

安心

典型的 WordPress 设置由许多移动部件组成——PHP 和数据库服务器、主题或插件——每个部分都可能损坏。使用 static，我们删除了其中的大部分。我们的服务器变得更加简单，因为它只提供 HTML，并且我们的内容遍布全球，这要归功于 CDN，这使得它受到 DDoS 保护。

因此，某些东西出问题的概率比平时小得多。

静态的缺点

解决方法

我们已经习惯了搜索网站、添加评论或发送表格以使用 WordPress 开箱即用等操作。有了 static，事情就不再那么简单了。因为我们把所有东西都转换成了 HTML，所以我们失去了这些可能性。

我们必须使用一些第三方工具来重新添加此功能。

构建过程

我们已经习惯了按下发布按钮后我们网站上可用的新内容。使用静态方法，我们必须在想要更新网站时转换它。因此，从按下按钮到让每个人都可以使用它可能需要几分钟时间。

初步步骤

在我们开始之前，我们必须处理一些事情。

1. 创建 Git 存储库

在此示例中，我们使用 GitHub，但您可以使用任何其他 Git 解决方案（如 GitLab 或 BitBucket）。现在，只需创建一个帐户（如果您还没有帐户）并创建一个空存储库。

在此之后，我们必须在 repo 中创建一个文件;否则，我们将无法将其连接到 Kinsta。

static-wp-kinsta-static-repo
将文件添加到存储库。

2. 将此存储库与静态站点托管连接

转到 MyKinsta，从侧边栏中选择静态站点，然后选择 添加站点.

选择您创建的存储库，不要忘记选择 “Automatic deployments on commit”（提交时自动部署）。

Kinsta_s UI showing a new static site being
Kinsta 静态站点托管设置。

将您的 WordPress 网站转换为静态网站

我们可以使用一些方法将我们的 WordPress 网站转换为静态网站。在本文中，我们将介绍其中两个：

  1. 使用 WP 插件和 Git
  2. 使用 WP-CLI、CI/CD 和 Git

使用插件和 Git

要求：

步骤

  1. 在浏览器上打开您的网站并安装 Simply Static 插件。
  2. 前往 Simply Static > Settings > Deployment 将部署方法设置为本地目录并设置本地文件夹 – 您可以按照占位符提供的提示进行操作，例如 /www/kinstaapi_533/public/public_static。请记住，该插件不会不会为您创建此文件夹 – 您必须手动执行此操作。
  3. 按 Generate Static Files 按钮。

几分钟后，所有静态文件都将位于上一步中指定的文件夹中。

说明：您可以在本地计算机或远程服务器上执行此操作。如果您使用远程服务器，则必须事先通过 SSH 连接它。

将代码推送到 Git 存储库

  1. 在 GitHub 中创建存储库。
  2. 打开终端或 Powershell，转到包含静态文件的文件夹，然后运行：
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

这些命令连接存储库并将所有静态文件推送到 GitHub。推送更改会触发自动部署，因为我们已经将此存储库与 Kinsta 的静态站点托管连接起来。

下次更改 WordPress 中的某些内容时，请重建整个网站，然后运行：

git add .
git commit -m "static content"
git push --force -u origin main

说明：您不必在每次更改某些内容时都重建您的网站。仅当您希望公开此更改时，才希望重新生成。这意味着您可以进行多项更改，并在完成后重新构建所有内容。

您可以在 Simply Static 的详细指南中找到有关生成静态站点并使用 Kinsta 托管它的更多信息。

Simply Static 的 Pro 版本提供了一个 GitHub 插件，可以自动化构建过程。尽管如此，它是一个付费插件，在某些情况下，手动执行此操作可能是一个足够好的解决方案。

使用 WP-CLI、CI/CD 和 Git

此方法使用与上述方法相同的 WP 插件，但在其高级（付费）版本中，并使用来自 Buddy CI 的 CI/CD 管道将您的代码推送到 GitHub 存储库。

这种方法的设置更复杂，但在每次部署期间需要的手动工作较少。此外，由于您可以控制每个步骤，因此它的可扩展性更强。如果需要，您可以向管道添加更多操作。

要求：

  • Simply Static Pro（只有 Pro 版本具有 WP-CLI 集成）。
  • 您的网站必须是可公开访问的（因此它不能位于 localhost 上），并且服务器需要 SSH 访问并安装 WP-CLI。
  • 您网站的代码库托管在 GitHub 存储库中
  • 一个 CI/CD 工具，用于编排所有内容。在此示例中，我们使用 Buddy，因为它友好且简单。但是您可以使用任何其他工具，例如 GitHub Actions 或 GitLab CI/CD。

步骤：

  1. 在浏览器上打开您的 WP 站点并安装 Simply Static Pro 插件。
  2. 前往 Simply Static > Settings > Deployment 将部署方法设置为本地目录并设置正确的路径 – 您可以按照占位符提供的提示进行操作，例如 /www/kinstaapi_533/public/public_static。
  3. 请记住，该插件不会为您创建此文件夹 – 您必须手动执行此操作。
  4. 前往您的 GitHub 存储库并使用 write 创建访问令牌以访问您的存储库。我们很快就会需要它。
  5. 登录您在 Buddy 上的帐户，添加新项目，并将其与您的存储库连接。

让我们在 Buddy 上创建一个 pipeline 来执行以下操作：

  1. 通过服务器上的 SSH 运行 Simply Static WP-CLI 命令。
  2. 拉上所有拉链。
  3. 将其下载到 Buddy 文件系统。
  4. 解压缩所有内容。
  5. 将所有内容推送到您的 Git 存储库。
Buddy UI on the Actions tab showing the prop
建议的 Buddy’s 工作流程概述。
  1. 首先，我们必须添加一个名为 SSH 命令的操作。
  2. 在 Run CMDs （运行 CMDs） 选项卡中，运行：
wp simply-static run
cd public_static
zip -FSr ../static.zip .

此脚本将我们的网站转换为 static 并将其压缩。

  1. 在 Target （目标） 选项卡中，输入您的所有凭据并将工作目录设置为 public。
Buddy_s UI showing the Target tab setup
Buddy Target 设置。
  1. 接下来，添加 Local Shell 操作。在其中，运行：
rm -rf *

此命令可确保不会有任何我们不需要的文件。

  1. 要从服务器下载 zip 文件，请添加新操作（您可以通过按操作列表中的 + 来执行此操作），然后从列表中选择 SFTP 下载。除了凭据之外，我们还必须将路径传递给 zip 文件并选中 overwrite 选项。
Buddy_s UI showing the Push action_s setup
Buddy’s Download 操作设置。
  1. 添加另一个 Local Shell 操作以解压缩所有文件并删除 zip 文件（我们不再需要它）。跑：
unzip -o static.zip
rm static.zip
  1. 转到Ubuntu选项卡并选择Packages & Tools install unzip。为此，请运行：
apt-get update && apt-get install -y unzip
  1. 最后一步需要使用 Git Push 操作。您必须使用您在第一步中配置的 GitHub Access Token 及其密码。另外，不要忘记检查 Force Push 和 Push revision to the specific branch。
Buddy_s UI showing the Push action_s setup
Buddy’s Push 操作设置。

当您想重新部署您的网站时，按下 Buddy 中的“运行”按钮，神奇的事情就会发生。如果您想自动化此过程，您可以使用一个 WordPress 插件。

Buddy UI on the Actions tab showing the prop
建议的 Buddy’s 工作流程概述。

根据 Buddy 的文档，查看如何进一步自动化工作流程。

将 WP 转换为静态的其他方法

静态站点生成器

许多静态站点生成器可以让您使用 API 连接任何 CMS（WordPress 具有内置的 REST API 和通过插件提供的 GraphQL）。您可以使用 Astro、Eleventy 或任何其他。

虽然这种方法为您提供了更大的灵活性，但它需要比上述解决方案更多的工作。

总结

将 WordPress 网站转换为静态网站是个好主意吗？这要看情况。在执行此操作之前，您必须考虑许多因素。当然，考虑一下是个好主意。如前所述——静态网站有很多优点，不从中受益可能是巨大的浪费。

评论

发表回复

必填项已用 * 标注