如何仅以每年 $10.44 的费用启动和维护一个 WordPress 网站(包含域名和托管)

我知道你可能在想什么——这肯定有猫腻。

肯定有猫腻。你怎么可能以每月不到 $1 的费用启动一个网站,并无限期地维持运营?

好吧,确实有猫腻,但在你喊出"啊哈,我就知道!"之前,这个猫腻可能不是你想象的那样。

launch WordPress for 10 a year

这不是关于某种特殊的促销价格或使用优惠码。这个解决方案的猫腻是,与注册一些预装 WordPress 的简单共享托管计划相比,它确实需要更多的努力和技术知识。它也有一些限制(尽管有解决方法),可能不是所有类型网站的最佳选择。

然而,如果你有耐心按照眼前的指南操作,而且你的网站不需要某些功能,那么你不仅能节省大量资金,还能获得一个加载速度极快、超安全的 WordPress 网站,它可以处理 virtually 无限的流量而不会变慢。

好了,不再让你悬念,我现在要向你展示的是,如何使用 Local by Flywheel 在你自己的电脑上构建 WordPress 网站,使用 Simply Static 插件将其转换为静态 HTML 文件,然后完全免费地托管在 Cloudflare Pages 上。你唯一持续要花的费用?Cloudflare 收取的 .com 域名每年 $10.44。

如果这对你来说听起来不错,那让我们开始吧。

目录

了解你真正要做什么

正如我在介绍中提到的,静态网站路线对某些类型的网站是一个极好的选择,但不是全部。这主要取决于启动静态 WordPress 网站的相关优势和限制是否特别适用于你。所以让我们先回顾这些,如果你仍然感兴趣,我会带你完成整个过程。

⏭️ 我已经被说服了。直接带我去教程让我开始吧。

静态网站的优势

  • 闪电般的加载速度——静态网站直接向访问者提供预渲染的 HTML 文件,无需数据库查询或服务器端处理。这意味着你的页面几乎可以即时加载,访问者喜爱这一点,搜索引擎也会给予更好的排名作为奖励。
  • 固若金汤的安全性——没有数据库?没有 PHP?没问题!大多数 WordPress 黑客攻击的是数据库或 PHP 代码中的漏洞。通过从你的生产网站中移除这些元素,你基本上消除了大多数潜在的攻击向量。黑客无法攻破不存在的东西。
  • 处理 virtually 无限的流量——传统托管计划在突然的流量高峰(例如当你的内容病毒式传播时)往往会崩溃。Cloudflare Pages 上的静态网站可以处理大量流量激增而不会出问题——也不会向你收取额外费用。
  • 全球 CDN 分发——你在 Cloudflare Pages 上的静态网站会自动分发到全球 275+ 个数据中心。这意味着从东京到多伦多的访问者都能获得同样快速的体验。

静态网站的限制

  • 无动态WordPress功能 – 这是最大的取舍。评论、用户账户、搜索功能和联系表单无法在静态网站上开箱即用,因为它们通常需要服务器端处理。您需要使用第三方解决方案来实现这些功能。
  • 手动更新流程 – 您无法点击“发布”让更改立即显示。这个过程需要一两分钟,而不是几秒钟。每次更新网站时,您都需要:
    • 在本地WordPress设置中进行更改。
    • 生成新的静态文件。
    • 运行脚本部署更新的网站。
  • 插件兼容性有限 – 许多WordPress插件依赖服务器端PHP和数据库访问才能运行。虽然Simply Static插件在转换大多数内容方面做得很好,但包含大量动态元素的插件在静态版本中无法工作。
  • 学习曲线较陡 – 这种方法需要熟悉多种工具(Local by Flywheel、WordPress、GitHub、Cloudflare)和一些初学者可能觉得有挑战性的概念。这不是火箭科学,但肯定比一键安装WordPress更复杂。
  • 内容限制 – 会员专区、电子商务功能、个性化内容以及其他需要用户状态跟踪的高级功能,使用纯静态方法极难(如果不是不可能的话)实现。

这种方法的理想用例

WordPress转静态解决方案最适合以下类型的网站:

  • 个人博客 – 如果您发布内容的频率相对较低(少于每天一次),并且不需要原生评论,这种设置非常完美。
  • 作品集网站 – 展示您的作品很少需要动态功能。静态作品集网站加载速度极快,让您的设计或摄影成为焦点,无需等待数据库查询。
  • 小型企业网站 – 大多数小型企业需要一个数字店面,包含服务信息、联系方式,也许还有博客。静态方法完美处理这些内容,同时确保您的网站为潜在客户快速加载。
  • 文档站点 – 不需要用户登录的技术文档或知识库是很好的选择。您仍然可以使用WordPress来组织复杂的信息层次结构,然后以超快的静态页面交付。
  • 宣传册网站 – 任何“设置后不管”的信息网站,如果不经常更改,都会受益于这种方法的简单性和性能。
  • 营销着陆页 – 当速度和正常运行时间对转化率至关重要时,静态网站提供动态网站难以匹配的可靠性能。

所有这些网站的共同点是它们的內容不经常变化,也不需要复杂的用户交互或个性化。如果您的网站属于上述任何一种,并且实施我即将教您的内容,那么您将节省大量资金,同时实际改善您网站的性能。

启动静态WordPress网站:分步指南

要开始使用,您需要下载 Local by Flywheel,并在 GitHubCloudflare 注册账户。您还需要 Simply Static插件,但您可以在本地WordPress网站上安装并激活它,因此无需提前下载。

🥳 所有这些工具和账户都是免费的(或有免费版本)

您还需要一个域名。如果您还没有,可以在Cloudflare账户中直接购买一个新的。

Registering a new domain on Cloudflare Domains scaled 1

好了,闲话少说,以下是步骤(概览):

  • 创建一个本地 WordPress 网站
  • 安装并配置 Simply Static 插件和一些 wp-admin 设置 + 将您的网站文件导出到硬盘
  • 设置一个 GitHub 仓库并将其连接到您的本地仓库(即您导出的网站)
  • 将您的 WordPress 网站转移到 Cloudflare Pages
  • 创建一个高效的更新工作流程

第一阶段:创建本地 WordPress 网站

下载 Local by Flywheel 并打开后,您将看到如下界面。在左下角有一个 + 图标位于圆圈内。点击它开始:

Adding a local site

这将启动设置向导。点击 创建新网站,然后点击右下角的 继续

Creating a new site on Local by Flywheel

在下一个屏幕(此处未显示),它会询问您想要安装 首选 设置,还是想要使用 自定义 设置。除非您有充分的理由选择自定义,否则请 选择首选

接下来的步骤是您为网站命名的地方。

您以后可以随时更改,但我建议使用您实际计划使用的名称。原因之一是 WordPress 中的许多配置文件都引用您的网站名称和 URL。当您最终将网站迁移到 Cloudflare Pages 时,从一开始就使用一致的命名可以减少更新这些引用所需的数据库搜索和替换操作次数。

Step 1 of setting up local WordPress site

在最后一个屏幕上,您需要输入 用户名密码电子邮件地址

💡 快速提示:虽然您的开发网站目前隔离在您的电脑上,但最佳做法是避免使用 "admin" 作为用户名,并使用强密码。这些凭据最终将用于您的在线 WordPress 网站,尽管您可以在部署到 Cloudflare Pages 之前更改它们,但随着您要处理的其他所有事务,您可能会忘记。如果您担心复杂密码会减慢您的工作流程——其实不会。稍后我会向您展示如何完全跳过登录屏幕。

完成后,点击右下角的 添加网站

Step 3 of setting up local WordPress site

基本的 WordPress 网站设置完成后,下一步就是访问它以便开始构建。您可以点击 WP 管理后台按钮 来实现。但是,在执行此操作之前,请打开 一键管理后台 开关。这是我刚才提到的 不那么秘密 的技巧,它可以让您跳过登录屏幕直接进入您的网站:

Turning on 1 click admin in Local

第二阶段:配置 Simply Static 插件和 wp-admin 设置 + 导出网站

💡 快速提示:你可能已经注意到,我没有包含安装主题、其他插件或构建 WordPress 网站的一般步骤。我假设你已经知道如何做,但以防万一,我们有网络上最全面的相关教程之一。

它也是最近更新的,所以其中的信息是准确的。你可以使用此链接访问它。它会跳过开头部分,直接带你到 WordPress 界面部分,在那里你可以熟悉各项功能以及如何设置你的网站。

1. 安装 Simply Static

这一步的"安装"部分与安装任何其他插件相同:

  • 从 wp-admin 界面,转到 插件添加新插件
  • 然后在搜索插件窗口中输入"simply static"。
  • 当你在结果中看到该插件时,点击立即安装激活
Installing the Simply Static plugin scaled 1

插件激活后,通过转到 Simply Static设置从侧边栏访问其设置。

2. 配置常规设置

在常规部分,你会看到三个主要区域:替换 URL包含排除

你还会注意到左侧有一系列附加选项。其中大部分在免费版本中都可用,但有三个例外:表单、搜索和优化。你可以点击它们,但所有功能都隐藏在 Simply Static 的付费墙后面。幸运的是,其中一些有解决方法(例如,你可以在将图片添加到网站之前使用 Optimole 的免费图片压缩器 对其进行优化)。

Simply Static User Interface General Section scaled 1

但回到你需要处理的三个部分……

替换 URL

这里有四个子部分。处理方法如下:

  • 替换 URL:这里的默认设置是相对路径。将其更改为绝对 URL
  • 方案:确保选择 https://。Cloudflare Pages 会为你的网站提供免费 SSL 证书,因此 https:// 是正确的选择。
  • 主机:输入你将在 Cloudflare Pages 上部署网站时的最终域名。
  • 强制 URL 替换:将其打开。这可以确保你的 WordPress URL 的所有实例(包括 CSS 和 JavaScript 中的)都能正确转换以在静态环境中工作。
包含

此部分有助于捕获 Simply Static 在自动爬取时可能会遗漏的内容:

  • 附加网址:只添加您网站上没有从其他地方链接的页面,例如感谢页面或隐藏的着陆页。
  • 附加文件和目录:除非您有自定义资源目录或在首次生成后收到“缺少文件”错误,否则通常不需要修改此设置。
  • 生成404页面:启用此选项,但请检查您网站的主题以查看404页面是否包含搜索栏。静态网站默认不支持搜索,这意味着如果您的主题确实有搜索栏,则需要用替代解决方案替换它(Simply Static有一个不错的教程)或完全移除它。要检查您主题的404页面是否有搜索栏,只需访问网站上不存在的页面(即mysite.com/this-page-does-not-exist)。这将显示404页面,您可以检查上面是否有搜索栏。如果有,请使用下面的解决方案移除它。

如何移除搜索栏 🪚

首先,安装并激活Header and Footer scripts插件。然后转到设置Header and Footer Scripts,在页眉脚本部分添加以下代码:

<style>
.error404 .search-form,
.not-found .search-form,
body[class*="404"] .search-form {
  display: none !important;
}
</style>Code language: HTML, XML (xml)

完成后,点击底部的保存设置

  • 包含订阅源:此选项应保持关闭。RSS订阅源(即“包含订阅源?”所指的)只有在您的网站有订阅者通过RSS阅读器关注您的内容或您设置了依赖这些订阅源的电子邮件订阅时才需要。大多数现代网站不再严重依赖RSS订阅源,因此关闭此选项可以减少静态导出中的不必要文件。
排除

对于大多数简单的WordPress网站,您不需要修改排除设置。Simply Static插件已经自动处理了排除WordPress特定管理区域的工作,诊断检查有助于识别不兼容的插件:

Using the Diagnostics check inside Simply Static to check for incompatible plugins

只有在您有特定不希望出现在静态网站中的内容时才添加排除项。

3. 配置集成设置

集成部分显示了Simply Static如何与您WordPress网站上的其他插件交互。此处列出的任何插件,如果您也已安装,默认会开启——付费插件除外。

您真正需要做的唯一操作是在顶部开启Admin Bar(核心)。

这将在屏幕顶部的WordPress管理栏中添加一个小的Simply Static图标。它将显示您静态导出的当前状态,并让您快速访问Simply Static设置。

Integrations Section of Simply Static plugin

4. 配置部署设置

现在我们需要设置Simply Static将保存静态网站文件的位置——然后生成它们。

在侧边栏中导航到部署

部署方式下拉菜单中选择“本地目录”。这告诉Simply Static将所有静态文件保存到您计算机上的一个文件夹中。

Deployment Settings in the Simply Static UI

在此下方,在 PATH 字段中为您的静态文件选择一个路径。简单来说,您需要指定静态文件应该保存在您计算机的哪个位置。

乍一看,最简单的方法似乎是什么都不做,让插件自动为您创建一个文件夹。但是,我个人发现手动预先创建目录并将其放在 WordPress 安装目录之外可以获得最可靠的结果。

  • 如果您使用的是 Mac,打开终端应用程序并输入:mkdir ~/Desktop/static-site
  • 对于 Windows 用户,打开 Windows 命令提示符并输入:mkdir %USERPROFILE%\Desktop\static-site

这将在您的桌面上创建目录,这样更容易找到。不过,您也可以在其他地方创建它。完成后,返回 Simply Static 的 Deploy 设置,输入您新创建的文件夹的完整路径:

  • 对于 Mac 用户:/Users/yourusername/Desktop/static-site
  • 对于 Windows 用户:C:\Users\yourusername\Desktop\static-site

将 "yourusername" 替换为您的实际用户名。

💡 快速提示:无论您决定如何处理这部分,我建议将目录复制并保存到某个地方(例如,空白文档或电子邮件草稿)。手头有它会使您在进入 GitHub 部分时更快完成操作。

最后,在底部您会看到 Clear Local Directory。它默认应该是关闭的。保持不变,然后点击 Save Settings

5. 自定义 wp-admin 设置

您几乎准备好导出您的网站了,但在此之前需要进行一项重要的小配置。

这是因为禁用评论,因为静态网站不支持评论。

从您的 WordPress 仪表板,转到 SettingsDiscussion。然后在标题为 Default post settings 的第一个部分中,只需取消选中所有三个选项。滚动到底部,点击 Save Changes 完成。

Turning off comments in wp admin

6. 生成(导出)您的静态网站到硬盘

🎉 现在到了令人兴奋的部分——生成实际的静态网站!

但是在您点击紫色的 Generate 按钮之前,请快速检查一下我之前向您展示的 Diagnostics 部分。这是为了确保插件没有标记任何问题。如果您确实遇到一些问题,我建议您查看 Simply Static 文档页面的故障排除部分,或者在帖子底部发表评论,我会尽力帮助您。

否则,如果一切看起来都很好,您可以点击 Generate。您也可以通过事先进入 Activity Log 部分来观看整个过程的展开并获取详细信息:

Generating the Static Files and monitoring the process on Activity Log scaled 1

流程完成后,您将在之前在 Deploy 设置中指定的本地目录路径中找到所有静态网站文件。这些文件代表了完整的、已准备好部署的 WordPress 网站静态版本。

您现在已准备好进入工作流的下一阶段——设置 GitHub 仓库。

第三阶段:设置 GitHub 仓库并将其连接到您的本地仓库

GitHub 将充当本地开发与 Cloudflare 托管平台之间的桥梁。

它将通过将静态网站文件存储在仓库中来做到这一点,然后 Cloudflare Pages 将连接到该仓库,以便在您进行更改时自动部署您的网站。让我们一起走过设置这个仓库的过程。

1. 安装 Git(如果您还没有安装)

在创建仓库之前,请确保您的计算机上已安装 Git:

  • Windows:从 git-scm.com 下载并安装 Git
  • Mac:打开终端并输入 git --version。如果未安装,系统会提示您安装

2. 在静态站点目录中初始化 Git 仓库

打开终端或命令提示符,导航到 Simply Static 保存静态站点文件的目录,输入:

cd path/to/your/static/site/directoryCode language: JavaScript (javascript)

path/to/your/static/site/directory 替换为您在 Simply Static 的部署设置中配置的实际路径。

💡 还记得我之前提供的关于复制并将其放在一边的快速提示吗?这就是原因。

进入正确的目录后,初始化一个新的 Git 仓库:

git init

您应该会看到类似 "Initialized empty Git repository in [your directory path]." 的消息。

3. 创建 .gitignore 文件

在将文件添加到仓库之前,最好创建一个 .gitignore 文件来排除不必要的文件:

  • 在 Mac 上输入:touch .gitignore 到终端。
  • 在 Windows 上输入:echo. → .gitignore 到命令提示符。

接下来,您需要显示系统的隐藏文件。这是因为 .gitignore 默认不会显示。

在 Mac 上,在终端中输入:

defaults write com.apple.finder AppleShowAllFiles true
killall FinderCode language: CSS (css)

在 Windows 上,在命令提示符中输入:

dir /a

然后在文件目录中找到 .gitignore 文件,并使用任何文本编辑器(例如 Notepad、TextEdit、Sublime Text 等)打开它。将以下内容粘贴到文件中并保存:

# System files
.DS_Store
Thumbs.db

# Editor directories and files
.idea/
.vscode/
*.swp
*.swo

# Temporary files
*.log
tmp/Code language: PHP (php)

4. 暂存并提交您的文件

现在是时候将所有静态站点文件添加到仓库中了(排除 .gitignore 文件中的文件):

git add .

接下来,使用描述性消息创建您的第一个提交:

git commit -m "Initial commit of static site"Code language: JavaScript (javascript)

完成这些后,前往 GitHub 并创建一个新仓库来存储您的文件。

5. 在 GitHub 上创建新仓库

转到 github.com 并登录(如果没有账户,请先创建一个)。点击右上角的 + 图标 并选择 新建仓库

Creating a new repository in GitHub

为您的仓库命名(例如 my-static-site)。在本教程中,我将其命名为 "mydirtcheapsite"。

将仓库标记为 私有(除非您有特定原因要将其公开——例如将其作为工作申请的示例)。

⚠️ 不要添加 .gitignore 文件、README 文件或许可证。我们之前已经创建了自己的 .gitignore 文件,它将被导入到仓库中。其他两个文件也不是必需的,因为这将是一个私有仓库,而不是一个面向互联网的开源项目。

完成后点击 创建仓库

Adding repository details in GitHub scaled 1

6. 将本地仓库连接到 GitHub

接下来它会询问您要如何创建这个新仓库。

您将使用第三个选项(从命令行推送现有仓库),但在此之前,您首先需要生成一个访问令牌。这是为了验证您有权限将文件导入仓库。

生成访问令牌

点击屏幕右上角的个人头像(或者如果您还没有添加个人头像,则点击占位符头像)。在滑出的侧边栏菜单中,点击设置

Going to GitHub settings scaled 1

在下一个屏幕(此处未显示),您会看到另一个侧边栏菜单——这次在屏幕左侧。向下滚动直到找到最底部的选项,即开发者设置。点击它。

进入开发者设置后,点击左侧的个人访问令牌,然后选择令牌(经典)。接着点击生成新令牌,从下拉菜单中选择生成新令牌(经典)

Selecting classic access tokens from the GitHub menu scaled 1

GitHub 会要求您通过您选择的双重身份验证方法重新进行身份验证。成功完成后,系统会要求您提供一些关于访问令牌的详细信息。那里有很多选项,但您实际上只需要关注三件事:

  • 备注中,写下令牌的用途。您可以随意填写。对于阅读本文的大多数人来说,这将是您 GitHub 列表中唯一的令牌,所以不太可能在混乱中丢失。尽管如此,如果您开始使用此方法部署多个站点,最好将备注设置为能与您正在处理的特定站点关联起来的名称。
  • 对于到期时间,您可以选择某个设定的时间,或者如果您不想每隔几个月创建一个新令牌,可以让令牌永久有效。
  • 最后,对于选择作用域,勾选 repo 框,并取消选中其下方的所有其他选项。

完成后,向下滚动并点击生成令牌

Naming personal access token and setting expiration date scaled 1

看到令牌后,点击它旁边的框内框图标进行复制:

Copying personal access tokens from GitHub scaled 1

将其放在一边并记住放在哪里,因为离开此屏幕后您将无法再次看到它。

使用访问令牌连接到 GitHub

下一步是使用访问令牌在您硬盘上存在的站点和 GitHub 仓库之间建立连接。请密切关注此步骤,因为您需要对命令进行大量手动替换以使其适用于您的站点和凭据。命令如下:

git remote add origin https://YOUR-USERNAME:YOUR-TOKEN@github.com/YOUR-USERNAME/YOUR-REPO-NAME.gitCode language: PHP (php)

因此,根据我向您展示的示例,它看起来像这样:

git remote add origin https://Macusik:ZKZjj0ssiCfs3nnkjy_yhgry34598hjcLMsZx1!@github.com/Macusik/mydirtcheapsite.gitCode language: JavaScript (javascript)

要使其适应您自己的设置:

  • YOUR-USERNAME(两次)替换为您的 GitHub 用户名。
  • YOUR-TOKEN 替换为您之前复制的个人访问令牌。
  • YOUR-REPO-NAME 替换为您的仓库名称。

在终端(Mac)或命令提示符(Windows)中输入或粘贴编辑后的命令,然后按 Enter

💡 安全提示:包含您令牌的命令可能会保存在您的 shell 历史记录中。如果您使用的是共享计算机,请考虑在完成这些步骤后清除历史记录,在 Mac 上使用 history -c 或清除 Windows 上的命令提示符历史记录。

设置主分支

接下来,我们需要将默认分支名称设置为 "main":

git branch -M main
将文件推送到 GitHub

最后,将您已提交更改推送到 GitHub:

git push -u origin main

-u 标志(--set-upstream 的缩写)告诉 Git 记住这些设置,使未来的推送更简单。

如果一切正常,您将看到表明您的文件正在上传到 GitHub 的输出。流程完成后,您可以刷新 GitHub 仓库页面,查看所有静态站点文件现已在线可用:

Initial commit of static site successfully showing in GitHub repository scaled 1

第四阶段:将本地 WordPress 站点迁移到 Cloudflare Pages

这可以说是最有价值的一步,因为您终于可以在站点部署后看到所有努力的成果。这也是最简单最快的一步,主要只需点击一些按钮即可完成。

开始操作:

  • 登录您的 Cloudflare 账户。
  • 使用左侧边栏找到 Workers & Pages。点击它,然后点击同名子菜单项(Workers & Pages)。
  • 点击屏幕顶部的 Pages(Workers 旁边)。
  • 点击 Connect to Git 按钮。
Connect to Git from Cloudflare Pages scaled 1

在下一个屏幕(未显示)中,点击 Connect GitHub

之后您需要授权该连接。

您可以选择授予所有仓库的权限,或仅授予包含您站点的特定仓库的权限。对于大多数阅读本文的读者来说,这个选择起初可能不太重要,但我建议只选择包含您站点文件的特定仓库

完成选择后,点击屏幕底部的 Install & Authorize

Install and authorize Cloudlfare Workers and Pages to connect to GitHub

下一页有一个奇怪的小问题。

如果您像我建议的那样选择了特定仓库,您会在 Select a repository 窗口中看到它已自动填充。但是,Begin setup 按钮将无法点击。

只需点击 Select a repository 窗口,即可解除按钮的锁定,这样您就可以点击它并继续前进。

Deploy a site from your account page in Cloudflare GitHub integration

接下来,您将看到 Cloudflare 执行该流程。完成后,您的站点将上线。

⚠️ 注意:传播可能需要几分钟,因此如果您点击链接后收到错误屏幕——请不要惊慌。等待约 5 分钟,它应该就能正常工作。请记住,这个临时链接并不重要,因为您将把站点连接到您的域名。

点击左下角的 Add custom domain 完成该步骤:

Website is deployed on Cloudflare Pages

添加域名非常简单——只需将其输入到 Domain 窗口中,然后点击 Continue

Adding a custom domain in Cloudflare Pages

在下一个屏幕(未显示)上,点击 Begin DNS transfer 按钮,让 Cloudflare 启动 DNS 转移。DNS 转移完成后,你就能够将自定义域名添加到你的静态 WordPress 网站了。

第五阶段:创建高效的更新工作流

如果你已经成功走到了这一步,你可能会想直接就此打住。毕竟,你的 WordPress 网站现在已经上线了。你有了免费托管、一个免费 SSL 证书,综合来看,你的状况很不错

但是,除非你不打算每年更新网站超过一次,否则我强烈建议你在本教程的最后一个阶段继续跟随我

原因在于,更新静态网站的方式与在传统虚拟主机上更新网站并不相同。

每次你进行任何更改并重新生成静态文件时,都需要将这些更改提交到 GitHub,这会触发 Cloudflare Pages 上的新部署。如果你每次都简单地覆盖所有文件,你的 Git 历史记录就会因为未更改的文件而变得臃肿,使得跟踪实际更改变得更加困难,并可能导致部署速度变慢。

幸运的是,有一个解决方案可以解决这个问题。

Python 来帮忙

通过使用 Python 脚本,你可以识别更新 WordPress 网站时实际更改了哪些文件。然后你只需要在 Git 仓库中更新这些特定的文件。这种方法可以保持你的仓库大小可控,同时准确记录你网站的演进过程。

以下是具体操作步骤:

创建和修改 Python 脚本
  • 在你的桌面上创建一个文件夹来组织你的自动化文件。你可以将其命名为 website-tools 之类的名称,以便记忆。
  • 在你喜欢的文本编辑器中打开一个新文档。如果你不知道使用哪个文本编辑器,并且你使用的是 Mac,可以使用 TextEditWindows 用户可以使用 Notepad。这两款工具都预装在各自的系统中。
  • 将下面的 Python 脚本复制并粘贴到你的文本编辑器文档中。

点击显示脚本 🐍

import os
import subprocess
import time

def run_git_commands(repo_dir):
    """Run git commands to commit and push changes if there are any."""
    # Change to git directory
    os.chdir(repo_dir)

    # Check if there are changes to commit
    git_status = subprocess.run(["git", "status", "--porcelain"], capture_output=True, text=True)

    if git_status.stdout.strip():
        print(f"Changes detected, committing...")
        # Create commit message with timestamp
        commit_message = f"Site update - {time.strftime('%Y-%m-%d %H:%M:%S')}"

        # Git commands
        subprocess.run(["git", "add", "."])
        subprocess.run(["git", "commit", "-m", commit_message])
        subprocess.run(["git", "push"])

        print("Changes committed and pushed to repository.")
        return True
    else:
        print("No changes detected. Repository unchanged.")
        return False

if __name__ == "__main__":
    # Path to configure (you'll need to adjust this for your setup)
    REPO_DIR = "/Users/yourusername/Desktop/static-site"

    # Perform git operations
    run_git_commands(REPO_DIR)Code language: PHP (php)
  • 修改脚本中的 REPO_DIR 以匹配你的具体设置。换句话说,将 /Users/yourusername/Desktop/static-site 替换为你在 Simply Static 插件的 Deploy 部分输入的路径。
Specifying PATH
  • 将文件保存为 update_site.py,放在你的 website-tools 文件夹中。
简化工作流程

不需要每次使用时都手动运行Python脚本,我将向你展示如何创建一个简单的shell脚本(在Windows上为批处理文件),只需一步即可完成整个更新序列。

再次打开文本编辑器中的新空白文档。将下面的代码复制并粘贴到文本编辑器中(根据你的操作系统选择),然后用适当的名称和扩展名保存文件:

  • 对于Mac:保存为 update-website.sh
  • 对于Windows:保存为 update-website.bat

别忘了将这些文件保存在专用文件夹中(如本例中的 website-tools),以保持你的自动化工具井然有序,并与静态站点文件分开。

点击此处查看Mac说明

#!/bin/bash
python3 ./update_site.pyCode language: JavaScript (javascript)

保存脚本后,你需要使其可执行,然后才能运行它。这是Mac的一项安全功能,可防止未经授权的脚本在你的系统上运行。要使脚本可执行,请导航到你的网站工具目录。在我们的示例中,它是:

cd ~/Desktop/website-toolsCode language: JavaScript (javascript)

然后授予脚本执行权限:

chmod +x update-website.shCode language: CSS (css)

请注意,你只需要在第一次执行此操作时设置权限。后续更新只需要运行脚本,这是下一步:

./update-website.sh

./ 前缀告诉终端在当前目录中运行脚本。

⚠️ 对于较旧的Mac用户:如果你使用的是较旧的Mac型号,它可能使用较旧版本的Python作为默认版本。如果你遇到类似 python: command not found 的错误,则可能需要将脚本中的 python3 命令改为简单的 python,如下所示:

#!/bin/bash
python ./update_site.pyCode language: JavaScript (javascript)

点击此处查看Windows说明

@echo off
python C:\path\to\update_site.pyCode language: CSS (css)

别忘了将 C:\path\to\ 替换为Python文件的实际位置。

然后,无论何时需要使用它,只需进入保存文件的文件夹并双击即可。

有了这个工作流程,你的更新过程将变得非常简单:

  1. 在Local by Flywheel中对你的WordPress站点进行更改。
  2. 使用Simply Static生成新的静态版本。
  3. 运行你的批处理脚本/shell脚本。

终点线

首先,深呼吸。你坚持到了最后。

这份指南并非为心脏脆弱的人准备,它比大多数关于如何安装某个插件或使用区块编辑器功能的简单WordPress教程都要长。

话虽如此,在我看来,将你的WordPress站点迁移到静态部署绝对值得你付出努力。第一次完成这个过程需要几个小时,但将在未来几年为你带来收益。你将拥有一个更快、更安全的站点,并具有全球CDN分发功能——而且银行账户里会有更多钱。

不客气。 😃

💡 最后一点,如果你想进一步提升你的静态WordPress站点,不妨看看我的两篇后续指南。一篇将向你展示如何向静态站点添加联系表单,另一篇将教你如何添加搜索页面

如果你有任何问题或在过程中的任何步骤遇到困难,请在下方留言。我很乐意帮助你。

别忘了参加我们的WordPress网站加速速成课程。了解更多如下:

如何加速您的WordPress网站

通过一些简单的修复,您可以将加载时间减少50-80% 🚀

通讯表单 – 侧边栏

名字 *

您的邮箱 *

立即订阅!

如果是人类,请将此字段留空。

Δ

通过输入您的邮箱,即表示您订阅我们的每周通讯。您可以随时更改您的想法。我们尊重您的收件箱和隐私。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注