介绍
有许多软件和工具用于创建网站。一个快速成为主流的工具被称为 Static Site Generator (SSG)。一个SSG是一个应用程序,自动创建必要的HTML,CSS和JavaScript文件来渲染一个网站。SSG因其灵活性而获得了普及。它可以作为一个独立的工具或深度集成到您选择的Web架构中。
为了概述支持SSG的潜在网络技术以及使其有用的功能,本文将探讨各种概念,因为它们与静态,网站和发电机有关。
静态
当用户在网站上查看页面时,会向网页服务器发送请求,网页服务器会根据该请求回复一个特定的文件。
例如,假设用户在传统或动态网站上请求页面,服务器可能需要查询数据库,将结果发送到模板应用程序,然后最终生成HTML文件以向浏览器渲染。
相反,在静态网站上,所请求的文件已经坐在网页服务器上,这就是用术语 static 所指的:用于渲染网站的文件不变,因为它们已经包含了 HTML、CSS 和 JavaScript 代码。
要明确的是,静态网站仍然可以互动。JavaScript代码、CSS动画、视频和音频元素以及JSON等数据格式仍然受支持,并且可以在静态网站上正常运行。
另一方面,现场体育页面或评论部分是动态网站的例子. 对于这些动态网站,您需要一个服务器或API调用来执行额外的处理,以便正确地将一个元素转换给用户。
网站
在任何站点上,你需要一种方式来组织和创建内容。静态站点生成器提供了一个简化的方式来完成这个任务。使用SSG,你可以创建和组织你的站点结构,同时还可以直接访问内容。
寺庙发动机
模板引擎是为您网站上出现的常见元素创建模板的软件,而不是为您网站上的每个页面编码重复的HTML,模板引擎有助于为您所有页面创建这些元素。
请记住,许多SSG允许您选择您的模板语言,而有些可以为您选择前端框架和模板语言,例如 Nunjucks, Pug, Liquid和 Blade为您提供不同的创建模板方式。
以下是 Nunjucks 模板引擎中的 _base 模板的例子:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Your Website</title>
6 </head>
7 <body>
8 <header>
9 {% block header %}
10 This is your header content
11 {% endblock %}
12 </header>
13
14 <div id="content">{% block content %}{% endblock %}</div>
15
16 <footer>
17 {% block footer %}
18 This is your footer content
19 {% endblock %}
20 </footer>
21 </body>
22</html>
您可以将基础模板视为一个容器的位置持有者。{% block %}标签是模板代码的块。这些标签可以包含内容或被留空,以便由 child templates 填写或翻译。请注意,每个{% block %}标签都附有变量名称。例如,嵌入在<header>>HTML标签中,有一个{% block header%}标签,说明该块被命名为标题。
模板引擎进行一些重大的提升,以创建这些可重复使用的模板,然后转换为HTML。这些模板文件通常被放置在名为布局或模板的目录中。
标记
Markdown 是一个标记语言,用于在转换为 HTML 之前将格式化添加到文档中,虽然不是写 HTML 的完整替代品,但 Markdown 可以帮助您编写和结构您的内容,而不必担心太多的 HTML 标签。
例如,如果您需要在HTML中创建一个未分类的列表,您必须创建一个<ul>标签,然后嵌入其中,您的列表元素被包装了<li>标签。
1<ul>
2 <li>Thing 1</li>
3 <li>Thing 2</li>
4 <li>Thing 3</li>
5</ul>
1* Thing 1
2* Thing 2
3* Thing 3
许多 SSG 允许您在 Markdown 中写所有内容,除了涵盖的代码库之外。这样,您可以专注于编写内容而不是代码,尽管您可以选择在 Markdown 文件中写简单的 HTML。这些文件通常被称为内容文件,并且通常存储在内容特定的目录中。
<$>[info] **信息:**您可以了解我们的 自定义和开源Markdown引擎如何支持和格式化DigitalOcean的社区网站上的内容。
元数据和前线问题
SSG 工具箱中的另一个强大的工具是帮助配置和格式化元数据的语言。 YAML, TOML和 JSON是用来定义内容文件前面的元数据的语言。 前面的数据是描述或定义内容属性的结构化数据。
例如,使用前置内容,您可以定义标题、作者、提供内容的简要描述,并使用您的模板中的特定布局:
1---
2title: Front Matter Matters
3author: Author Name
4description: Write out your description here
5layout: base.html
6---
此示例使用YAML语言来定义页面的内容. 顶部和底部的三个字符串---封装了你的前面的元素元数据。 没有这些字符串,你的元数据将不会功能。 在实践中,你可以包括更多的或更少的元数据元素。 与模板引擎和Markdown相结合,你的内容将根据你如何构建你的网站转换为页面。
结构您的前提可以变得越来越复杂,随着您的网站的增长. 虽然它是超越本文解释复杂性,你可以使用前提来创建链接,标签,以及更多来自定义您的网站。
发电机
在构建过程中,您的所有资产 - 包括CSS,图像,JavaScript,元数据等 - 被输入到一个管道中,并合并在一起。
微型化
当您的资产是 minified 时,应用程序会删除白色空间、插图、新行、长的变量名称和代码评论,以便让文件尽可能小。
下面是小型化之前的一些CSS代码的例子:
1html {
2 box-sizing: border-box;
3}
4*,
5*::before,
6*::after {
7 box-sizing: inherit;
8 margin: 0;
9 padding: 0;
10}
11body {
12 background: seagreen;
13 font-family: sans-serif;
14}
15.wrapper {
16 padding: 1rem;
17 border-radius: 1rem;
18 display: flex;
19}
以下是相同的代码,但小型化:
1html{box-sizing:border-box}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{background:#2e8b57;font-family:sans-serif}.wrapper{padding:1rem;border-radius:1rem}
Minified 文件不是要编辑的,因为 minified 代码包含在新文件中,它是生产站点上使用的代码。相反,如果您需要编辑,则可以编辑原始的 unminified 文件,重新保存和重新编译 minified 文件,并在服务器上更换它以反映您的更改。
包装
在开发过程中,将代码写成单独的文件是常见的做法,这允许您使用更小的,更易于管理的代码片段,而不是一个包含网站所有代码的单一单一文件。
例如,您可能有多个脚本和模块在按钮时互相调用,您也可能有多个 CSS 样式表,用于您的网站上的不同页面和元素。此外,您的脚本和 CSS 也可能相互依赖于功能。
例如,如果您的JavaScript函数、模块和组件包含在单独的文件中,包装将它们合并为一个JavaScript文件。同样,如果您使用CSS预处理器编写您的风格,如SASS(https://sass-lang.com/),其中代码分开。
最终,组合,像小型化,是一个优化过程,而不是请求多个脚本或风格表,通过组合浏览器可能只需要请求几个。
不同的包裹使用不同的流程将您的代码合并在一起. 有一些包裹在那里,每个SSG通常都集成到一个。 rollup.js, Parcel,和 webpack是包裹的例子。
转载和编译
转录和编译过程基本上将您的代码转换为任何Web浏览器都可以阅读和执行的文件。
一般来说,一个 compiler 是一个将高级编程语言转换为低级编程语言的应用程序,例如,一个编译器可以将 C 代码转换为 1 和 0 的机器代码,以便运行程序。
一个 transpiler 是一个类型的编译器,将代码从一个编程语言翻译到另一个相当的编程语言. 例如,转换过程可能意味着将编写在 Typescript 编程语言中的代码转换为 JavaScript 语言。
受欢迎的 JavaScript 应用程序名为 Babel是实践中这些概念的一个例子。 Babel 尽最大努力确保 JavaScript 代码在旧和现代浏览器中都能读取。
无论您是在传统代码库中工作,还是使用最新的语法,转载和编译过程都会解释浏览器的代码,以实现尽可能深入的浏览器支持,以便用户可以按照预期与页面进行交互。
建立命令
当您完成创建您的网站时,您可以在您的终端中输入 SSG 的特定构建命令. 此命令被配置为缩小,转载,编译,组合您的代码,以及执行任何其他需要为您的静态文件提供服务的任务。
在构建过程中,您可能会注意到终端输出构建的进展。这包括有关如何处理文件的具体细节。在这个过程中,您也可能会遇到错误消息,告诉您失败发生在哪里。
在成功的构建过程中,所需的静态HTML、CSS和JavaScript文件将放置在一个公共或分散目录中,这个文件夹的确切名称取决于您的配置。
<$>[注] 注: 如果您对这个过程有更深入的解释感兴趣,请参阅 Gatsby的伟大文档详细介绍了在其构建过程中发生的事情。
在构建您的网站后,您可能会发现一个类似于以下的网站结构:
1your_project_root
2├── node_modules
3├── public
4├── src
5│ ├── css
6│ │ └── styles.css
7│ ├── js
8│ │ └── script1.js
9│ │ └── module.js
10│ ├── images
11│ │ ├── dog.jpg
12│ │ └── cat.jpg
13│ ├── _includes
14│ │ ├── partials
15│ │ │ └── about.html
16│ │ └── layouts
17│ │ └── base.html
18│ ├── posts
19│ │ ├── post-1.md
20│ │ ├── post-2.md
21│ │ ├── post-3.md
22│ └── index.html
23├── .your_SSG_config.js
24├── package.json
25├── package-lock.json
26├── README.md
27└── .gitignore
请注意,取决于您使用的 SSG,您的文件结构可能包括不同的文件和目录. 虽然在创建一个使用 SSG 的网站时可能会有大量的工作,但报酬是静态文件,这些文件将被服务,而不会需要额外的服务器流程,从而为您的用户创造更快的加载体验。
超越静态
静态网站生成器本身是强大的工具. 与其他 Web 技术相结合,它们可以模糊静态和动态之间的界限。 SSG 在 Jamstack 生态系统中发挥着不可或缺的作用。 像 LAMP 或 MEAN 堆栈一样,Jamstack 是创建和构建网站或 Web 应用程序的另一种方式。 它利用 SSG 创建静态 HTML 的力量,并使用 JavaScript 和 API 调用连接到后端服务和数据库。
SSG 也可以与 CMS 一起工作. 这个其他开发模式被称为 headless CMS. 有了 headless CMS,你有一个存储数据的方式,有一个图形用户界面来交互以获取内容,以及一个 API 终端点来连接。 在这个模型中,你正在从后端管理系统中删除演示层――头部。 SSG 填补了演示层的缺失角色。 例如,编辑器可以使用 CMS 界面创建内容,然后存储在数据库中。
SSGs也可扩展. 通过不同的插件和模块,您的 SSG 可以成为比其初始提供的更多东西。 例如,在 Eleventy,您可以使用插件来优化和调整图像的大小,甚至利用无服务器功能来创建动态页面。 根据您的需求,SSG 可以在复杂性和功能上增长,同时还可以输出静态文件。
结论
在本概念文章中,您了解了静态网站生成器用于创建网站的一些潜在技术. 有了这些信息,您现在可以更好地了解静态网站是如何使用SSG创建的。
如果您想了解有关使用 SSG 创建网站的更多信息,我们有一个 关于流行的 SSG Gatsby 的教程系列。
如果您对 Eleventy 感兴趣,我们还有一些关于 [如何创建和部署您的第一个 Eleventy 网站] 的教程(https://andsky.com/tech/tutorials/how-to-create-and-deploy-your-first-eleventy-website)。