什么是静态网站？100%新手指南

您正在为下一个项目选择静态网站还是动态网站？或者你甚至不知道什么是静态网站？

无论如何，这篇文章都能帮到你。它包含了你需要了解的有关静态网站的一切信息，包括静态网站是什么、静态网站如何工作、静态网站与动态网站有什么不同，以及静态网站与动态网站的一些优缺点。

最后，您应该对哪种方法最适合您的项目，以及如何开始使用有了很好的了解。

什么是静态网站？

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

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

用非技术术语来说，这意味着您的主机将网站文件发送到访问者的浏览器上，与这些文件在服务器上的显示完全一致。

更重要的是，每一位访问者的浏览器都会收到相同的静态文件，这就意味着访问者会获得完全相同的体验，看到完全相同的内容。

什么是动态网站？

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

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

这也意味着，您在网站管理控制面板上所做的任何更改都可以立即看到，因为内容管理系统会自动开始提供带有最新内容/更改的页面。

提示：*使用页面缓存等技术，可以在一定时间内存储完成的 HTML 版本页面，从而无需每次加载页面时都执行上述操作。

静态网站如何运行？

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

1. 选择建站方式-对于非常简单的网站，您可以手动创建静态 HTML、CSS 和 JavaScript 文件，但许多现代静态网站都使用某种类型的静态网站生成器 (SSG) 工具或无头 CMS。
2. 建立网站-使用所选工具建立网站。与 WordPress 不同的是，你不能从实时生产服务器上控制你的网站。
3. 部署网站-这意味着您要将网站的静态文件移动到实时主机上，以便用户可以访问它们。

静态网站和工具示例

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

Astro 是静态网站生成器的一个流行范例。

下面是创建静态网站软件方面最受欢迎的一些静态网站示例：

• Astro
• Jekyll
• Hugo
• Eleventy (11ty)
• VuePress
• Gatsby
• Pelican
• Nikola
• Publii

所有这些工具都能让你创建静态网站，但它们的方法却大相径庭。例如，Publii 为你提供了一个无需代码的桌面界面，而其他一些工具则要求你使用命令行。

动态网站和工具示例

为了帮助您与上述静态网站示例进行对比，我们也来看看一些动态网站示例。

最受欢迎的动态网站示例是 WordPress 软件，互联网上超过 43% 的网站都使用了该软件。

WordPress 是最流行的动态网站工具。

虽然您可以通过安装静态网站生成器插件来使用 WordPress 创建静态网站，但 WordPress 的默认功能是动态网站生成器。

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

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

静态网站与动态网站的利与弊

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

静态网站优点

• 更易于优化性能-可以说，由于静态网站的 “活动部件 “较少，因此更易于优化性能。静态网站一般都非常精简，加载速度也很快，尤其是如果你制作得当的话。
• 需要的服务器资源更少-由于静态网站不需要任何服务器端处理，因此每次访问时服务器需要做的工作要少得多。这就提高了网站的性能，并有助于网站在扩展时发挥更好的性能。您甚至可以直接将静态网站部署到 CDN，而完全不使用网络服务器（这在一定程度上意味着您的网站没有静态 IP 地址）。
• 托管静态网站的费用非常低廉-对于简单的业余爱好项目/作品集而言，您可以将其免费托管在我们的静态网站托管服务上，或使用其他免费托管服务，如 GitHub Pages 或 Cloudflare Pages。
• 更容易确保安全-由于静态网站不依赖服务器端处理或数据库，因此恶意行为者的攻击面较少。静态网站仍有可能被黑客攻击，但发生的可能性要小得多。
  非常容易启动简单的网站–您可以非常快速地启动静态网站，因为您无需担心数据库等技术细节的设置。

静态网站缺点

• 应用内容/设计更新可能更复杂-对于静态网站，每次进行更改或应用更新时都需要重新部署网站，即使是更改导航菜单中的一个项目这样很小的事情也是如此。这可能会增加一些额外的复杂性，尤其是当你定期更改网站时。不过，当你通过 Kinsta 等静态网站托管服务部署 Git 仓库时，你可以开启自动部署功能，在有任何更改时自动从 Git 仓库触发部署。
• 添加功能的技术性更强-使用 WordPress 等动态网站工具，当你想为网站添加功能时，可以安装一个新插件。而对于静态网站，通常（但并不总是）会更加复杂。
• 内容管理功能通常没有那么强-静态网站工具在管理内容方面通常没有那么强，如果你有一个拥有成千上万内容和大量分类组织的大型网站，这可能会很麻烦。不过，一些静态网站生成器正在努力减少这一问题。
• 依赖第三方服务实现网络表单等基本功能-例如，大多数静态网站都使用 FormBold 或 Getform 等表单端点 API。或者，你也可以嵌入第三方表单服务，如 Google 表单（或这些 Google 表单替代品之一）。对于 WordPress 这样的动态内容管理系统，您只需安装一个表单插件，然后将所有内容存储到网站数据库中即可。

动态网站优点

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

动态网站缺点

• 托管费用可能更高-在同等条件下，动态网站的托管费用通常更高，因为它需要更多的服务器资源来进行服务器端处理。
  更难确保安全–动态网站比静态网站有更多的攻击面，这使得它们的安全问题更复杂一些。例如，你需要担心 SQL 注入攻击，而静态网站不会受到这种攻击（因为静态网站没有数据库）。
• 需要投入更多精力进行性能优化-动态网站的优化更加复杂，因为您需要同时担心前端和后端的性能。例如，动态网站可能需要花时间优化数据库查询和性能，而静态网站则不需要。
• 设置过程略微复杂-例如，如果你想创建一个 WordPress 网站，你需要设置数据库并确保网站拥有必要的技术（如最新版本的 PHP、MySQL/MariaDB 等）。不过，使用 Kinsta 这样的 WordPress 托管服务可以让您使用简单的界面启动 WordPress 网站，从而大大简化 WordPress 网站的管理。

如何创建静态网站

如果你认为创建静态网站的优势可能会让它成为你下一个项目的理想选择，这里有一份关于如何创建静态网站的快速指南。

我们有意将本指南保持在较高水平，这样你就可以根据自己的使用情况进行调整。

1. 选择静态网站生成器或内容管理系统

首先，选择一个静态网站生成器或一个可以部署静态网站的内容管理系统。

如果你有技术知识，可以使用自己的 HTML、CSS 和 JavaScript 以及最喜欢的 HTML 编辑软件，从头开始创建一个静态网站。不过，随着网站规模的扩大，这种方法很快就会变得臃肿不堪，而且您可能不具备从头开始创建网站的技术知识。

静态网站生成器为您提供了一种更简单的方式来构建静态网站。它还能让您在将来更新网站时更加轻松。

静态网站生成器可以帮助您部署新版本的所有网站文件，以反映所做的更改，而无需在做出更改（如在导航菜单中添加新项目）时编辑每一个 HTML 文件。

以下是一些常用的静态网站生成器，你可以考虑使用：

• Jekyll – 最受欢迎的开源静态网站生成器之一。可用于各种网站并支持博客。我们有一整篇文章介绍如何使用 Jekyll 创建静态网站。
• Hugo – 另一种流行的开源生成器，适用于各种不同类型的网站。我们也有一篇关于如何使用 Hugo 创建静态网站的文章。
• WordPress + 静态网站生成器插件 – 您可以使用 WordPress 构建网站，然后使用您喜欢的静态网站生成器插件将其部署为静态 HTML 网站。

如需更多选择，请查看我们的文章，了解顶级静态网站生成器。

2. 构建您的网站

一旦选择了自己喜欢的工具，就可以使用该工具来创建网站。

具体如何操作取决于您选择的工具，因此没有适用于所有静态网站生成器的单一指南。

如果你来自 WordPress 背景，那么使用 WordPress 本身作为静态网站生成器是最简单的方法之一，你可以用它来创建你的第一个静态网站。

下面是一个使用 WordPress 创建静态网站的示例：

1. 使用本地环境工具创建本地 WordPress 网站。这并不是访客真正与之互动的网站-它只是你管理内容和网站设计的地方。
2. 使用您最喜欢的设计工具设置网站。您可以使用 WordPress 原生区块编辑器，也可以使用您喜欢的页面生成器插件，如 Elementor 或 Divi。
3. 安装静态网站生成器插件。这是您在下一步部署静态网站时使用的插件。流行的选择包括 Simply Static 和 WP2Static，不过也有一些新的替代品，如 Staatic。

Simply Static 插件可让您将 WordPress 用作静态网站生成器。

另一种方法是使用 GraphQL 将 WordPress 与 Gatsby 配对。

3. 部署您的网站

建立网站后，您需要将其部署到托管服务中。从本质上讲，这意味着您需要一种方法，将静态 HTML 文件从您的电脑传输到互联网。

这里有几种不同的方法。

一种方法是使用静态网站托管服务。通过这种托管解决方案，您可以毫不费力地通过首选的 Git 提供商设置自动和持续的部署。

例如，向 GitHub 推送新文件可能会自动触发这样一个流程：

1. 当您在 GitHub 上推送更改时，它会自动通知您的服务器，例如 Kinsta。
2. 服务器从 GitHub 获取最新文件，并运行静态网站的构建命令。
3. 服务器会将文件传输到实时网站环境中。

另一种基于 Git 的方法是使用 GitHub 页面创建静态网站。

另一种方法是直接部署到 CDN，而不是使用任何类型的网站服务器。这种方法看起来是这样的：

1. 您可以将网站文件上传到某种在线存储环境。许多工具都可以自动或通过命令行完成这一操作。
2. 您可以设置一个 CDN 从该存储中提取文件。
3. 当您向存储空间发布新文件时，CDN 就会自动开始提取这些新文件。

如果你的工具没有提供任何简化网站部署的特殊功能，你就需要这样做：

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

下一个项目应该使用静态网站吗？

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

因此，这里没有一个放之四海而皆准的答案。

相反，让我们来看看在哪些情况下使用静态网站是合理的，哪些情况下是不合理的。

静态网站的合理性

静态网站最适用于所有访问者都看到相同内容且内容不会经常变化的网站，尤其适用于内容不多的小型网站。

以下是一些可以很好地使用静态方法的网站类型：

• 作品集网站
• 基本业务手册网站
• 简历网站
• 不经常发布的简单博客
• 文档内容/知识库
• 登陆页面

这些类型的网站能够实现静态方法的所有优点，但很少有折衷。

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

同样，这类网站也不会经常变化，因此您不必担心经常重新部署静态页面。

动态网站的合理性

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

基本上，如果你希望用户能在一个页面上看到不同的内容，你通常希望使用动态网站。虽然也有办法使用静态网站来构建上述类型的网站，但你必须做出的取舍通常并不值得，这就是为什么动态网站可能是更好的选择。对于内容繁多的网站，尤其是有大量分类法和其他组织方法的网站，动态网站往往更有意义。

同样，如果你经常发布新内容，这也是使用动态网站的一个原因。

例如，如果您的个人博客每两周只发布一篇新文章，那么静态网站可能还不错，但如果您的博客以盈利为目的，每天发布五篇新文章，那么动态网站可能会更好。

小结

简而言之，静态网站是一种提供固定 HTML 页面并在客户端进行所有处理的网站。创建静态网站时，每个用户在访问页面时都会收到相同的静态 HTML 文件/内容。

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

不过，建立静态网站有利也有弊，因此并不是所有网站都适合采用这种方法。