如何托管静态 WordPress 免费网站(在 GitHub Pages、Vercel、Netlify 上)

in WordPress

我们的内容是读者支持的. 如果您点击我们的链接,我们可能会赚取佣金。 我们如何审核.

WordPress 是一个功能强大且流行的内容管理系统,但托管动态 WordPress 网站的成本可能很高,而且需要持续维护。对于许多简单的网站或博客来说,静态版本的 WordPress 网站可以是一个很好的替代方案。静态网站速度更快、更安全,并且可以免费托管在 GitHub Pages、Netlify 或 Vercel 等平台上。

在本教程中,我将介绍如何创建静态版本的 WordPress 网站并免费托管。这种方法非常适合希望利用用户友好的 WordPress 内容创建界面,同时享受静态站点的好处。

您需要的工具

在深入了解该过程之前,让我们确保您拥有所有必要的工具。以下是托管静态网站所需的所有工具的列表 WordPress 免费网站:

本地WP:免费本地 WordPress 开发工具,可让您构建和测试 WordPress 网站离线。

简单静态:免费 WordPress 插件会生成你的静态版本 WordPress 网站。

混帐:用于跟踪文件更改的版本控制系统。通常预装在 Mac 和 Linux 上。Windows 用户可以从 git-scm.com

GitHub桌面:用于管理 Git 存储库的用户友好界面。从以下网址下载: 桌面版.github.com

GitHub帐户:您需要使用它来托管您的存储库并使用 GitHub Pages。免费注册: github.com

托管平台账户:选择下列选项之一:

在继续本教程之前,请确保您已安装这些工具并设置了帐户。一切准备就绪将使整个过程变得顺利而直接。

第三步:发展你的 WordPress LocalWP 上的网站

在我们开始之前,你需要 WordPress 网站已准备就绪。如果您尚未创建网站,或者网站目前托管在其他地方,我建议您使用 LocalWP(以前称为 Local by Flywheel)在本地开发和测试您的网站。

本地
  1. 免费下载并安装 LocalWP 本地wp.com.
  2. 创建一个新的 WordPress LocalWP 中的站点。
  3. 设计您的网站,添加内容并安装必要的插件。
  4. 确保您的网站在静态形式下的外观和功能完全符合您的要求。

了解静态站点的限制

虽然静态 WordPress 虽然网站提供了诸如速度更快、更安全以及免费托管选项等好处,但重要的是要意识到它们的局限性。 WordPress 在静态环境中无法运行:

  1. WordPress 表格: 传统的 WordPress 依赖服务器端处理的表单将无法工作。这包括联系表单、订阅表单和其他交互式表单。
  2. WordPress 评论:静态网站不支持允许实时用户交互的动态评论系统。
  3. 管理区访问: 任何链接到 /wp-admin 或类似的内部 WordPress 路线将无法发挥作用,因为它们需要服务器端处理。
  4. 实时内容更新:与动态站点不同,静态站点需要重新生成和重新部署才能显示任何内容更改 WordPress 发生即时变化的站点。
  5. 用户认证:基本静态站点设置不支持需要用户登录或会员资格的功能。
  6. 电子商务功能:动态购物车和付款处理通常无法在静态环境中工作。
  7. 搜索功能: WordPress的内置搜索功能将无法工作,但可以实施替代方法(如 Simply Static Pro 功能中所述)。
  8. 动态侧边栏和小部件:提取实时数据或需要服务器端处理的小部件将无法按预期运行。

可能的解决方法

尽管存在这些限制,但仍有一些方法可以缓解其中一些限制:

  • 对于表格,您可以使用第三方服务,如 Formspree 或 Netlify Forms。
  • 评论可以通过 Disqus 或 Facebook Comments 等服务来处理。
  • 可以使用客户端解决方案(如 Lunr.js 或 Algolia(如 Simply Static Pro 中提供的))来实现搜索功能。
  • 对于电子商务,请考虑使用 Snipcart 或 Gumroad 等外部​​服务。

当开发你的 WordPress 网站,请牢记这些限制并相应地规划网站结构和功能。专注于内容驱动的页面,并尽量减少对不会转化为静态环境的动态功能的依赖。

步骤2:安装并配置 Simply Static

Simply Static 是一款免费的 WordPress 插入 生成你的静态版本 WordPress 站点。设置方法如下:

  1. 在您的 WordPress 仪表板,转到插件>添加新插件。
  2. 搜索“Simply Static”,安装插件并激活插件。
  3. 进入 Simply Static > 设置 WordPress 仪表板。
  4. 在“常规”选项卡下,设置以下内容:
    • 目标网址:选择“保存以供离线使用”。如果您已经有自定义域名,请选择“绝对网址”,如下图所示:
简单静态 URL 设置
  1. 本地目录:将其设置为您 WordPress 安装,例如 /Users/yourusername/Documents/StaticSite
    简单静态部署设置
    1. 在“包含/排除”选项卡下,确保包含所有必要的 URL。
      • 大多数情况下使用 /wp-content/ 和 /wp-includes/
    其他文件和目录
    1. 保存设置。

      还有一个 SimplyStatic 的专业版,以下是 Simply Static 插件的专业功能摘要:

      1. 高级部署:
        • 将静态站点部署到多个平台,包括 SimplyCDN、GitHub、Amazon AWS S3、Digital Ocean Spaces 和 BunnyCDN。
      2. 轻松的站点更新:
        • 有效管理内容更新,无论是单个帖子、批量更新还是特定的 URL。
      3. 表格和评论集成:
        • 将流行插件(如 Contact Form 7、Gravity Forms 和 Elementor Forms)中的表单无缝集成到您的静态网站中。
      4. 搜索功能:
        • 使用 Fuse.js 实现基本搜索或使用 Algolia 升级到更全面的搜索体验。
      5. WP-CLI支持:
        • 使用 WP-CLI 直接从命令行配置、导出和管理 Simply Static 功能。
      6. 多语言支持:
        • 通过与 WPML、Polylang 和 TranslatePress 集成,提供多种语言的内容。
      7. 缩小:
        • 通过缩小 CSS、JavaScript 和静态 HTML 文件来优化网站性能。
      8. WordPress 隐蔽性:
        • 替换默认 WordPress 路径来隐藏事实 WordPress 被用作内容管理系统。

      这些专业功能显著增强了静态的功能和灵活性 WordPress 站点,允许更高级的部署、更好的性能和改善的用户体验。

      步骤 3:初始化 Git 存储库

      现在我们已经设置了静态站点生成器,让我们准备用于版本控制的本地目录:

      1. 打开终端或命令提示符。
      2. 导航到您在 Simply Static 中指定的目录(例如, cd /Users/yourusername/Documents/StaticSite).
      3. 通过运行以下命令初始化新的 Git 存储库:
         git init

      步骤 4:创建 GitHub 存储库

      我们将使用 GitHub Desktop 来创建和管理我们的存储库:

      github桌面
      1. 从以下位置下载并安装 GitHub Desktop 桌面版.github.com 如果你还没有。
      2. 打开 GitHub Desktop 并登录您的 GitHub 帐户。
      3. 单击“文件”>“新存储库”或使用“在硬盘上创建新存储库”按钮。
      4. 设置以下内容:
        • 名称:为您的存储库选择一个名称(例如“my-static-wordpress”)
        • 本地路径:将其设置为您在 Simply Static 中指定的相同目录
        • 使用 README 初始化此存储库:保留未选中状态
        • Git ignore:选择“无”(我们在步骤 3 中创建了自己的)
        • 许可证:选择适当的许可证或保留为“无”
      5. 点击“创建存储库”

      步骤 5:提交存储库

      现在我们已经设置好了存储库,让我们进行第一次提交:

      1. 在 GitHub Desktop 中,您应该会看到静态站点中列出的所有文件都发生了更改。
      2. 输入您的提交的摘要(例如“静态站点文件的初始提交”)。
      3. 单击“提交到主要”(或在旧版本中单击“提交到主”)。
      4. 点击“发布存储库”将本地存储库推送到 GitHub。

      步骤 6:运行简单静态导出

      现在是时候生成我们的静态站点了:

      简单静态导出
      1. 回到你的身边 WordPress 仪表板。
      2. 导航到 Simply Static > Generate。(您可以忽略诊断错误警报,因为您仅部署到本地目录)。
      3. 点击“生成静态文件”。
      4. 等待该过程完成。这可能需要几分钟,具体取决于您的网站大小。
      5. 完成后,返回 GitHub Desktop。
      6. 您应该会看到新生成或更新的文件被列为更改。
      7. 使用“更新静态站点文件”之类的消息提交这些更改。
      8. 单击“Push origin”将更改推送到 GitHub。

      步骤 7:将存储库连接到托管平台

      现在我们的静态网站已经在 GitHub 上了,我们可以轻松地将其连接到免费托管平台。我将提供 GitHub Pages、Netlify 和 Vercel 的说明:

      GitHub页面

      1. 转到 GitHub.com 上的存储库。
      2. 点击左侧边栏的“设置”>“页面”。
      3. 在“源”下,选择“从分支部署”。
      4. 选择您想要部署的分支(通常是“main”或“master”)。
      5. 选择根文件夹(/)并点击“保存”。
      6. 您的网站将在 https://yourusername.github.io/repository-name/.

      Netlify

      1. 在以下位置注册一个免费帐户 netlify.com 网站.
      2. 在 Netlify 仪表板上单击“从 Git 创建新站点”。
      3. 选择 GitHub 作为您的 Git 提供商并授权 Netlify。
      4. 从列表中选择您的存储库。
      5. 将构建命令和发布目录留空。
      6. 点击“部署站点”。
      7. 您的网站将在 Netlify 子域上运行,您可以在网站设置中自定义它。

      威赛尔

      1. 在以下位置注册一个免费帐户 vercel.com.
      2. 单击 Vercel 仪表板上的“新项目”。
      3. 导入您的 GitHub 存储库。
      4. 保留原来的构建设置(Vercel 应该自动检测它是一个静态站点)。
      5. 单击“部署”。
      6. 您的网站将在 Vercel 子域上运行,您可以在项目设置中对其进行自定义。

      总结

      恭喜!你现在有了一个静态版本的 WordPress 网站托管 免费。请记住,每当您对您的 WordPress 网站。此工作流程可让您轻松享受 WordPress 用于内容创作,同时受益于静态站点的速度、安全性和免费托管。

      一些额外的提示:

      • 考虑设置自定义域以获得更专业的外观。
      • 定期更新您的 WordPress 安装和插件,以确保您使用最新的功能和安全更新。
      • 探索高级功能 Simply Static 的专业版,比如隐藏 WordPress 并为您的静态站点设置表单或搜索功能。

      作者简介

      马特阿尔格伦

      马蒂亚斯·阿尔格伦 (Mathias Ahlgren) 是 Website Rating,领导一支由编辑和作家组成的全球团队。他拥有信息科学和管理硕士学位。在大学期间获得早期网络开发经验后,他的职业生涯转向了 SEO。在 SEO、数字营销和网络开发领域拥有超过 15 年的经验。他的重点还包括网站安全,网络安全证书证明了这一点。这种多元化的专业知识巩固了他在 Website Rating.

      » WordPress » 如何托管静态 WordPress 免费网站(在 GitHub Pages、Vercel、Netlify 上)
      分享给...