有"compiling a website"这种东西吗？
Is there such a thing like "compiling a website"?
我正在开发一个简单的静态网站，只有 HTML 和 CSS。例如，在几个 HTML 页面上，我会有相同的页眉和页脚。为了更好的可维护性，我想只写一次并让它们以某种方式包含在每一页上。
我知道可以通过服务器端的 PHP 或客户端的 JS 来实现。但由于它是一个简单的静态网站，因此无需在服务器端或客户端一遍又一遍地创建它。我认为最好以某种方式一次生成完成的 HTML 代码并将其上传到网络服务器。就像编译 C 代码并发布可立即使用的可执行文件一样。
我也可以想象，这样的编译器能够删除 HTML 和 CSS 中的注释，优化（最小化）代码，或实现 CSS 中的变量（例如for colors) etc. 还有很多类似的问题，仅举几例：
- Make header and footer files to be included in multiple html pages
- Need an efficient way to get rid of my duplicate HTML code in multiple HTML files
- How to include header/footer in a static website?
但是都是编译一遍又一遍PHP，JS或者服务端include，这对静态网站来说是浪费资源。
所以我想知道，难道没有“编译网站”这回事吗？现在是怎么做到的？我错过了什么？
不编译。
您需要一个静态站点生成器 (SSG)。顺便说一句，我推荐 11ty，如果你想要简单且不限制模板语言（html，支持 md、nunjucks、liquid、handlebars 等），这是最好的选择
编辑 1：
如果您想快速入门，请在下方评论，我已经准备好使用代码 HTML、CSS、JS 缩小、连接
On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
此用例非常适合 template engines，例如 Handlebars、Mustache 或 Pug，仅举几例。模板引擎让您 re-use 跨多个文件的组件来简化您的开发。
此外，模板引擎（也）擅长与数据提要相辅相成。这进一步简化了创建 HTML 文件的过程。让我们看一个例子，为什么：
// example taken from Pugjs.org
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
示例代码将从 data 中呈现 3 <li> DOM 个元素，这些元素可以用 JavaScript 生成。这允许您的网站在内容上是动态的。这正是 与 Static Site Generators.
的关键区别
静态站点生成器 (SSG) 还可以使用可重用组件编译 HTML 文件。然而，这些工具（即 Jekyll、Hugo 等）更强调网站的“静态”编译，而不是动态数据补充。为了更详细地说明这一点，Jekyll 使用了 Liquid，它是 HTML 的模板语言。假设 Jekyll 是负责布局、HTML 文件、部署等的引擎。而 Liquid 是一种 模板语言 ，允许您执行类似于 Pug 的循环（模板引擎):
{% for post in site.categories.podcasts %}
<li><a href="{{ post.url }}">{{ post.title}}</a></li>
{% endfor %}
如果您的网站有很多静态内容，例如包含文章、教程、图像甚至撰写文档或基本文本信息的博客，SSG 应该是您的选择。对于更动态的内容，即从服务器通信和数据库中获取，模板引擎肯定更好。
如果您想要更强大的选项，那么您可以使用 Gatsby，它是一个使用 React 的 CMS 框架，也是一个具有更多功能的静态内容生成器。
我正在开发一个简单的静态网站，只有 HTML 和 CSS。例如，在几个 HTML 页面上，我会有相同的页眉和页脚。为了更好的可维护性，我想只写一次并让它们以某种方式包含在每一页上。
我知道可以通过服务器端的 PHP 或客户端的 JS 来实现。但由于它是一个简单的静态网站，因此无需在服务器端或客户端一遍又一遍地创建它。我认为最好以某种方式一次生成完成的 HTML 代码并将其上传到网络服务器。就像编译 C 代码并发布可立即使用的可执行文件一样。
我也可以想象，这样的编译器能够删除 HTML 和 CSS 中的注释，优化（最小化）代码，或实现 CSS 中的变量（例如for colors) etc. 还有很多类似的问题，仅举几例：
- Make header and footer files to be included in multiple html pages
- Need an efficient way to get rid of my duplicate HTML code in multiple HTML files
- How to include header/footer in a static website?
但是都是编译一遍又一遍PHP，JS或者服务端include，这对静态网站来说是浪费资源。
所以我想知道，难道没有“编译网站”这回事吗？现在是怎么做到的？我错过了什么？
不编译。
您需要一个静态站点生成器 (SSG)。顺便说一句，我推荐 11ty，如果你想要简单且不限制模板语言（html，支持 md、nunjucks、liquid、handlebars 等），这是最好的选择
编辑 1：
如果您想快速入门，请在下方评论，我已经准备好使用代码 HTML、CSS、JS 缩小、连接
On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
此用例非常适合 template engines，例如 Handlebars、Mustache 或 Pug，仅举几例。模板引擎让您 re-use 跨多个文件的组件来简化您的开发。
此外，模板引擎（也）擅长与数据提要相辅相成。这进一步简化了创建 HTML 文件的过程。让我们看一个例子，为什么：
// example taken from Pugjs.org
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
示例代码将从 data 中呈现 3 <li> DOM 个元素，这些元素可以用 JavaScript 生成。这允许您的网站在内容上是动态的。这正是 与 Static Site Generators.
静态站点生成器 (SSG) 还可以使用可重用组件编译 HTML 文件。然而，这些工具（即 Jekyll、Hugo 等）更强调网站的“静态”编译，而不是动态数据补充。为了更详细地说明这一点，Jekyll 使用了 Liquid，它是 HTML 的模板语言。假设 Jekyll 是负责布局、HTML 文件、部署等的引擎。而 Liquid 是一种 模板语言 ，允许您执行类似于 Pug 的循环（模板引擎):
{% for post in site.categories.podcasts %}
<li><a href="{{ post.url }}">{{ post.title}}</a></li>
{% endfor %}
如果您的网站有很多静态内容，例如包含文章、教程、图像甚至撰写文档或基本文本信息的博客，SSG 应该是您的选择。对于更动态的内容，即从服务器通信和数据库中获取，模板引擎肯定更好。
如果您想要更强大的选项，那么您可以使用 Gatsby，它是一个使用 React 的 CMS 框架，也是一个具有更多功能的静态内容生成器。