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
• 托管平台账户:选择下列选项之一:
- GitHub Pages(随你的 GitHub 帐户提供)
- 网络化: netlify.com 网站
- 韦尔塞尔: vercel.com
在继续本教程之前,请确保您已安装这些工具并设置了帐户。一切准备就绪将使整个过程变得顺利而直接。
第三步:发展你的 WordPress LocalWP 上的网站
在我们开始之前,你需要 WordPress 网站已准备就绪。如果您尚未创建网站,或者网站目前托管在其他地方,我建议您使用 LocalWP(以前称为 Local by Flywheel)在本地开发和测试您的网站。
- 免费下载并安装 LocalWP 本地wp.com.
- 创建一个新的 WordPress LocalWP 中的站点。
- 设计您的网站,添加内容并安装必要的插件。
- 确保您的网站在静态形式下的外观和功能完全符合您的要求。
了解静态站点的限制
虽然静态 WordPress 虽然网站提供了诸如速度更快、更安全以及免费托管选项等好处,但重要的是要意识到它们的局限性。 WordPress 在静态环境中无法运行:
- WordPress 表格: 传统的 WordPress 依赖服务器端处理的表单将无法工作。这包括联系表单、订阅表单和其他交互式表单。
- WordPress 评论:静态网站不支持允许实时用户交互的动态评论系统。
- 管理区访问: 任何链接到
/wp-admin
或类似的内部 WordPress 路线将无法发挥作用,因为它们需要服务器端处理。 - 实时内容更新:与动态站点不同,静态站点需要重新生成和重新部署才能显示任何内容更改 WordPress 发生即时变化的站点。
- 用户认证:基本静态站点设置不支持需要用户登录或会员资格的功能。
- 电子商务功能:动态购物车和付款处理通常无法在静态环境中工作。
- 搜索功能: WordPress的内置搜索功能将无法工作,但可以实施替代方法(如 Simply Static Pro 功能中所述)。
- 动态侧边栏和小部件:提取实时数据或需要服务器端处理的小部件将无法按预期运行。
可能的解决方法
尽管存在这些限制,但仍有一些方法可以缓解其中一些限制:
- 对于表格,您可以使用第三方服务,如 Formspree 或 Netlify Forms。
- 评论可以通过 Disqus 或 Facebook Comments 等服务来处理。
- 可以使用客户端解决方案(如 Lunr.js 或 Algolia(如 Simply Static Pro 中提供的))来实现搜索功能。
- 对于电子商务,请考虑使用 Snipcart 或 Gumroad 等外部服务。
当开发你的 WordPress 网站,请牢记这些限制并相应地规划网站结构和功能。专注于内容驱动的页面,并尽量减少对不会转化为静态环境的动态功能的依赖。
步骤2:安装并配置 Simply Static
Simply Static 是一款免费的 WordPress 插入 生成你的静态版本 WordPress 站点。设置方法如下:
- 在您的 WordPress 仪表板,转到插件>添加新插件。
- 搜索“Simply Static”,安装插件并激活插件。
- 进入 Simply Static > 设置 WordPress 仪表板。
- 在“常规”选项卡下,设置以下内容:
- 目标网址:选择“保存以供离线使用”。如果您已经有自定义域名,请选择“绝对网址”,如下图所示:
- 本地目录:将其设置为您 WordPress 安装,例如
/Users/yourusername/Documents/StaticSite
- 在“包含/排除”选项卡下,确保包含所有必要的 URL。
- 大多数情况下使用 /wp-content/ 和 /wp-includes/
- 保存设置。
还有一个 SimplyStatic 的专业版,以下是 Simply Static 插件的专业功能摘要:
- 高级部署:
- 将静态站点部署到多个平台,包括 SimplyCDN、GitHub、Amazon AWS S3、Digital Ocean Spaces 和 BunnyCDN。
- 轻松的站点更新:
- 有效管理内容更新,无论是单个帖子、批量更新还是特定的 URL。
- 表格和评论集成:
- 将流行插件(如 Contact Form 7、Gravity Forms 和 Elementor Forms)中的表单无缝集成到您的静态网站中。
- 搜索功能:
- 使用 Fuse.js 实现基本搜索或使用 Algolia 升级到更全面的搜索体验。
- WP-CLI支持:
- 使用 WP-CLI 直接从命令行配置、导出和管理 Simply Static 功能。
- 多语言支持:
- 通过与 WPML、Polylang 和 TranslatePress 集成,提供多种语言的内容。
- 缩小:
- 通过缩小 CSS、JavaScript 和静态 HTML 文件来优化网站性能。
- WordPress 隐蔽性:
- 替换默认 WordPress 路径来隐藏事实 WordPress 被用作内容管理系统。
这些专业功能显著增强了静态的功能和灵活性 WordPress 站点,允许更高级的部署、更好的性能和改善的用户体验。
步骤 3:初始化 Git 存储库
现在我们已经设置了静态站点生成器,让我们准备用于版本控制的本地目录:
- 打开终端或命令提示符。
- 导航到您在 Simply Static 中指定的目录(例如,
cd /Users/yourusername/Documents/StaticSite
). - 通过运行以下命令初始化新的 Git 存储库:
git init
步骤 4:创建 GitHub 存储库
我们将使用 GitHub Desktop 来创建和管理我们的存储库:
- 从以下位置下载并安装 GitHub Desktop 桌面版.github.com 如果你还没有。
- 打开 GitHub Desktop 并登录您的 GitHub 帐户。
- 单击“文件”>“新存储库”或使用“在硬盘上创建新存储库”按钮。
- 设置以下内容:
- 名称:为您的存储库选择一个名称(例如“my-static-wordpress”)
- 本地路径:将其设置为您在 Simply Static 中指定的相同目录
- 使用 README 初始化此存储库:保留未选中状态
- Git ignore:选择“无”(我们在步骤 3 中创建了自己的)
- 许可证:选择适当的许可证或保留为“无”
- 点击“创建存储库”
步骤 5:提交存储库
现在我们已经设置好了存储库,让我们进行第一次提交:
- 在 GitHub Desktop 中,您应该会看到静态站点中列出的所有文件都发生了更改。
- 输入您的提交的摘要(例如“静态站点文件的初始提交”)。
- 单击“提交到主要”(或在旧版本中单击“提交到主”)。
- 点击“发布存储库”将本地存储库推送到 GitHub。
步骤 6:运行简单静态导出
现在是时候生成我们的静态站点了:
- 回到你的身边 WordPress 仪表板。
- 导航到 Simply Static > Generate。(您可以忽略诊断错误警报,因为您仅部署到本地目录)。
- 点击“生成静态文件”。
- 等待该过程完成。这可能需要几分钟,具体取决于您的网站大小。
- 完成后,返回 GitHub Desktop。
- 您应该会看到新生成或更新的文件被列为更改。
- 使用“更新静态站点文件”之类的消息提交这些更改。
- 单击“Push origin”将更改推送到 GitHub。
步骤 7:将存储库连接到托管平台
现在我们的静态网站已经在 GitHub 上了,我们可以轻松地将其连接到免费托管平台。我将提供 GitHub Pages、Netlify 和 Vercel 的说明:
GitHub页面
- 转到 GitHub.com 上的存储库。
- 点击左侧边栏的“设置”>“页面”。
- 在“源”下,选择“从分支部署”。
- 选择您想要部署的分支(通常是“main”或“master”)。
- 选择根文件夹(/)并点击“保存”。
- 您的网站将在
https://yourusername.github.io/repository-name/
.
Netlify
- 在以下位置注册一个免费帐户 netlify.com 网站.
- 在 Netlify 仪表板上单击“从 Git 创建新站点”。
- 选择 GitHub 作为您的 Git 提供商并授权 Netlify。
- 从列表中选择您的存储库。
- 将构建命令和发布目录留空。
- 点击“部署站点”。
- 您的网站将在 Netlify 子域上运行,您可以在网站设置中自定义它。
威赛尔
- 在以下位置注册一个免费帐户 vercel.com.
- 单击 Vercel 仪表板上的“新项目”。
- 导入您的 GitHub 存储库。
- 保留原来的构建设置(Vercel 应该自动检测它是一个静态站点)。
- 单击“部署”。
- 您的网站将在 Vercel 子域上运行,您可以在项目设置中对其进行自定义。
总结
恭喜!你现在有了一个静态版本的 WordPress 网站托管 免费。请记住,每当您对您的 WordPress 网站。此工作流程可让您轻松享受 WordPress 用于内容创作,同时受益于静态站点的速度、安全性和免费托管。
一些额外的提示:
- 考虑设置自定义域以获得更专业的外观。
- 定期更新您的 WordPress 安装和插件,以确保您使用最新的功能和安全更新。
- 探索高级功能 Simply Static 的专业版,比如隐藏 WordPress 并为您的静态站点设置表单或搜索功能。