初学者指南 - 什么是静态网站

尝试为您的下一个项目在静态网站和动态网站之间做出决定？或者您甚至不确定什么是静态网站？

无论哪种方式，本文都可以提供帮助。它包含您需要了解的有关静态网站的所有信息，包括它们是什么、它们如何工作、它们与动态网站有何不同，以及静态网站与动态网站的一些优缺点。

最后，您应该清楚地知道哪种方法最适合您的项目，以及如何开始。

什么是静态网站？

静态网站是使用固定数量的由 HTML、CSS 和 JavaScript 组成的预构建文件提供页面的网站。

静态网站没有后端服务器端处理，也没有数据库。与静态站点相关的任何“动态”功能都在客户端执行，这意味着代码在访问者的浏览器中执行，而不是在服务器上执行。

用非技术术语来说，这意味着您的主机将网站文件交付给访问者的浏览器，就像这些文件在服务器上显示的那样。

更重要的是，每个访客都会收到相同的静态文件发送到他们的浏览器，这意味着在很大程度上具有完全相同的体验并看到完全相同的内容。

什么是动态网站？

动态网站是在服务器端控制并依赖于某种类型的脚本语言（e.g. PHP）的网站。每次有人访问该网站*时，服务器都会处理其代码和/或查询数据库以生成完成的页面。

这允许服务器为每次访问显示不同的内容。例如，登录到该网站的用户可能会看到该页面的一个版本，而未登录的用户在访问该页面时可能会看到完全不同的内容。

这也意味着您在站点管理仪表板中所做的任何更改都会立即可见，因为内容管理系统会自动开始交付包含最新内容/更改的页面。

信息：使用页面缓存等技术可以通过将页面的已完成 HTML 版本存储一定时间来消除对每次页面加载执行此操作的需要。

静态网站如何运作？

我们稍后更深入地讨论如何制作静态网站，但大多数静态网站使用的基本方法如下：

选择如何构建您的网站 – 虽然您可以为非常简单的网站手动创建静态 HTML、CSS 和 JavaScript 文件，但许多现代静态网站使用某种类型的静态站点生成器（SSG）工具或headless CMS.。
设置您的网站 – 使用您选择的工具构建您的网站。与 WordPress 不同，您不会从实时生产服务器控制您的网站。
部署您的网站 – 这意味着您将网站的静态文件移动到实时托管上，以便用户可以访问它们。

静态网站和工具示例

在查看网站时，没有硬性规定来判断它是静态的还是动态的。相反，查看可帮助您构建和管理静态网站的工具示例会更有帮助。

以下是创建静态网站的软件时一些最流行的静态网站示例：

所有这些工具都允许您创建静态网站，但它们的处理方式非常不同。例如，Publii 为您提供无代码的桌面界面，而其他一些工具则需要您使用命令行。

动态网站和工具示例

为了帮助您与上面的静态网站示例进行比较和对比，我们还看一些动态网站示例。

动态网站最流行的示例是 WordPress，它为互联网上超过 43% 的网站提供支持。

虽然您可以通过安装静态站点生成器插件将 WordPress 用于静态网站，但 WordPress 默认用作动态网站构建器。

以下是使用类似方法的动态网站的其他一些知名示例：

Drupal
Joomla
Shopify （以及几乎所有其他电子商务平台)

静态与动态网站：优点和缺点

现在您已经对什么是静态网站以及它与动态网站的比较有了深入的了解，让我们来了解一下静态网站与动态网站的一些优缺点。

静态网站优点

更容易优化性能 – 因为静态网站的 “移动部件” 更少，所以可以说，它们更容易优化性能。静态网站通常非常精简且加载速度快，尤其是在您构建良好的情况下。
需要更少的服务器资源 – 由于静态网站不需要任何服务器端处理，因此服务器需要为每次访问做更少的工作。这可以提高性能并帮助您的网站在规模下表现更好。您甚至可以将静态网站直接部署到 CDN 并完全跳过使用 Web 服务器（这在一定程度上意味着您的网站没有静态 IP 地址）。
托管静态网站非常便宜——对于简单的业余爱好项目/作品集，您可以免费将它们托管在我们的静态站点托管上，或使用其他免费托管服务，例如 GitHub Pages 或 Cloudflare Pages。
更易于保护 – 由于静态站点不依赖于服务器端处理或数据库，因此恶意行为者的攻击面更少。静态网站仍然有可能被黑客入侵——但发生的可能性要小得多。
非常容易启动简单的网站 – 您可以非常快速地启动静态网站，因为您无需担心设置数据库等技术细节。

静态网站缺点

应用内容/设计更新可能更复杂 – 对于静态站点，您每次进行更改或应用更新时都需要重新部署您的网站 – 即使是非常小的事情，例如更改导航菜单中的项目。这可能会增加一些额外的复杂性，尤其是在您定期更改网站时。但是，当您通过 Kinsta 等静态站点托管通过 Git 存储库进行部署时，您可以打开自动部署以在发生任何更改时自动触发 Git 存储库的部署。
可以更具技术性地添加功能 – 使用像 WordPress 这样的动态网站工具，当您想向您的网站添加功能时，您可以安装一个新插件。对于静态站点，它通常（但并非总是）更复杂。
内容管理功能通常不那么强大 – 静态网站工具通常不那么擅长管理内容，如果您的大型网站包含数千条内容和大量组织分类法，这可能会很麻烦。不过，一些静态站点生成器正在做很多工作来减少这个问题。
甚至依赖第三方服务来实现 Web 表单等基本功能，例如，大多数静态网站都使用表单端点 API，例如 FormBold 或 Getform。或者，您可以嵌入第三方表单服务，例如 Google 表单。使用像 WordPress 这样的动态内容管理系统，您只需安装一个表单插件并将所有内容存储在您网站的数据库中。

动态网站优点

可以创建个性化的访客体验 – 您可以根据查看页面的人动态调整页面的内容。例如，您可以创建一个会员网站，付费会员可以在其中看到页面的完整内容，而匿名访问者只能看到一个小的预览。
易于更新您的网站（内容和设计） – 在动态网站上应用内容和设计更新非常容易。在站点管理控制面板中应用更新后，您应该会立即看到该更改反映在您的实时站点上。无需像处理静态站点那样重新部署整个站点。
更容易通过插件/应用程序添加新功能 – 例如，如果您使用 WordPress 作为动态网站内容管理系统，您只需安装新插件即可添加功能。
更强大的大规模内容管理功能 – 动态网站工具通常更适合管理大量内容。例如，如果您正在构建一个包含数千家本地企业的目录，那么动态网站工具通常是更好的选择。

动态网站缺点

托管成本可能更高 – 在所有条件相同的情况下，动态网站的托管成本通常更高，因为它需要更多的服务器资源进行服务器端处理。
更难保护 – 动态网站比静态网站有更多的攻击面，这使得它们的安全要复杂一些。例如，您需要担心 SQL 注入攻击，这不会影响静态站点（因为静态站点没有数据库）。
需要更多的努力来优化性能 – 优化动态网站更复杂，因为您需要同时担心前端和后端性能。例如，动态网站可能需要花时间优化数据库查询和性能，这对于静态网站来说不是问题。
稍微复杂的设置过程 – 例如，如果您想制作一个 WordPress 网站，您需要设置您的数据库并确保您的网站具有必要的技术（例如最新版本的 PHP、MySQL/MariaDB 等）。

如何构建静态网站

如果您认为构建静态网站的优势可能使其非常适合您的下一个项目，那么这里有一个关于如何创建静态网站的快速指南。

我们有意使本指南保持高级别，以便您可以根据自己的使用案例进行调整。

1. 选择静态站点生成器或 CMS

首先，请选择允许您部署静态站点的静态站点生成器或内容管理系统。

如果您具备技术知识，则始终可以使用自己的 HTML、CSS 和 JavaScript 以及您最喜欢的 HTML 编辑器软件从头开始创建静态站点。

静态站点生成器为您提供了一种更简单的方法来构建静态站点。它还使将来更新您的网站变得更加容易。

当您进行更改（例如向导航菜单添加新项目）时，无需编辑每个 HTML 文件，静态站点生成器可以帮助您部署反映更改的所有站点文件的新版本。

以下是一些您可以考虑的流行静态站点生成器：

Jekyll – 最受欢迎的开源静态网站生成器之一。适用于各种网站并支持博客。
Hugo – 另一个流行的开源生成器，可以适用于所有不同类型的站点。
WordPress + 静态站点生成器插件 – 您可以使用 WordPress 构建您的网站，然后使用您喜欢的静态站点生成器插件将其部署为静态 HTML 站点。

2. 建立您的网站

选择首选工具后，使用该工具构建您的网站。

它的工作原理取决于您选择的工具，因此没有适用于所有静态站点生成器的单一指南。

如果您来自 WordPress 背景，使用 WordPress 本身作为静态站点生成器提供了最简单的方法之一，可以让您的脚趾湿透并创建您的第一个静态站点。

以下是使用 WordPress 构建静态网站的示例：

使用 DevKinsta 创建本地 WordPress 站点。这不是您的访问者实际与之互动的网站——它只是您管理内容和网站设计的地方。
使用您最喜欢的设计工具设置您的网站。您可以使用原生 WordPress 块编辑器，也可以使用您最喜欢的页面构建器插件，例如 Elementor 或 Divi。
安装静态站点生成器插件。这是您在下一步中用于部署静态网站的方法。流行的选项包括 Simply Static 和 WP2Static，但也有更新的替代品，例如 Staatic。

另一种选择是使用 GraphQL 将 WordPress 与 Gatsby 配对。

3. 部署您的网站

构建网站后，您需要将其部署到您的托管服务。从本质上讲，这意味着您需要一种方法将静态 HTML 文件从您的计算机传输到 Internet。

您可以在这里选择几种不同的路线。

一种方法是使用静态站点托管服务。使用此托管解决方案，您可以通过首选的 Git 提供商轻松设置自动和持续部署。

例如，将新文件推送到 GitHub 可能会自动触发如下过程：

当您在 GitHub 中推送更改时，它会自动通知您的服务器。
您的服务器从 GitHub 拉取最新文件并运行 Static Site 的 build 命令。
您的服务器会将文件移动到活动站点环境中。

对于另一个基于 Git 的选项，您还可以将 GitHub 页面用于静态网站。

作为另一种方法，您可以直接部署到 CDN，而不是使用任何类型的 Web 服务器。此方法如下所示：

您将站点的文件上传到某种类型的在线存储环境。许多工具可以自动或通过命令行执行此操作。
您设置了一个 CDN 以从该存储中提取。
当您将新文件发布到存储时，CDN 会自动开始拉取这些新文件。

如果您的工具不提供任何特殊功能来简化站点部署，则需要：

生成站点的静态 HTML 文件。
手动将这些文件上传到您的静态网站托管服务。

您应该使用静态网站作为您的下一个项目吗？

静态网站是否适合您的下一个项目取决于您网站的目的和您自己的知识水平。

因此，这里没有单一的万能答案。

相反，让我们来看看使用静态网站可能有意义也可能没有意义的一些情况。

静态网站何时可能有意义

静态网站最适合所有访问者都看到相同内容且内容不经常更改的网站——尤其是对于内容不多的小型网站。

以下是一些可以与静态方法很好地配合的网站类型：

作品集网站
基本商业宣传册网站
简历网站
不经常发布的简单博客
文档内容/知识库
着陆页

这些类型的网站能够实现静态方法的所有好处，但几乎没有权衡。

例如，您不太可能需要个性化基本的商业宣传册网站，因此您不会因为使用静态方法而“失去”任何功能。

同样，这些类型的网站不会经常更改，因此您无需担心不断重新部署静态页面。

当动态网站可能有意义时

首先，对于需要个性化网站体验的情况，例如电子商务商店、会员网站、在线课程等，动态网站通常始终是最佳选择。

基本上，如果您希望用户能够在页面上看到不同的内容，您通常需要使用动态网站。

虽然有一些方法可以使用静态网站构建上述类型的网站，但您必须做出的权衡通常不值得，这就是为什么动态网站可能是更好的选择。

动态网站通常也适用于内容繁重的网站，尤其是具有大量分类法和其他组织方法的网站

同样，如果您一直在定期发布新内容，这可能是选择动态网站的原因。

例如，您每 2 周只发布 1 篇新文章的个人博客可能适合作为静态网站，但每天发布 5 篇新文章的专注于货币化的博客可能更适合作为动态网站。

总结

概括地说，静态网站是提供固定 HTML 页面并在客户端执行所有处理的网站。当您创建静态站点时，每个用户在访问页面时都会收到相同的静态 HTML 文件/内容。

这种静态网站方法越来越受欢迎，这在很大程度上要归功于 Hugo、Jekyll、Gatsby 等静态网站生成器工具。

但是，构建静态网站有利有弊，因此它并不适合所有网站。

初学者指南 – 什么是静态网站

目录