是否有这样的东西“编译网站”？

Question

我正在开发一个仅使用HTML和CSS的简单静态网站。例如，在几个HTML页面上，我将拥有相同的标头和页脚。为了更好地可维护性，我只想写一次，并将它们以某种方式包含在每个页面上。

我知道通过服务器端或客户端的JS通过PHP进行操作。但是，由于它是一个简单的静态网站，因此无需在服务器端或客户端一遍又一遍地创建它。我认为最好以某种方式生成完成的HTML代码并将其上传到Web服务器。就像编译C代码并运送准备使用的可执行文件一样。

我还可以想象，这样的编译器能够从HTML和CSS中删除注释，优化（最小化）代码或实现CSS中的变量（例如，颜色）等。有很多类似的问题，只是为了命名一些：

• 将标题和页脚文件包含在多个html页面中
• Q/38922498/11942268“>需要一种有效的方法来摆脱多个html文件中的重复html代码
• 静态网站中的标题/页脚？，

但它们都是关于PHP，JS或服务器端一遍又一遍地进行编译的，这是静态网站的浪费资源。

所以我想知道，是否没有“编译网站”之类的东西？如今如何完成？我想念什么？

Answer 1

在几个HTML页面上，例如，我将拥有相同的标头和页脚。为了更好地可维护性，我只想写一次，并将它们以某种方式包含在每个页面上。

此用例非常适合 template引擎 ，胡子或哈巴狗，只是提到一些。模板引擎通过让您跨多个文件重复使用组件来简化开发。

此外，模板引擎（也）擅长与数据提要相辅相成。这简化了创建HTML文件的过程。让我们看一个示例原因：

// example taken from Pugjs.org 

ul
each val, index in ['zero', 'one', 'two']
   li= index + ': ' + val

示例代码将渲染3 ＆lt; li＆gt; dom elements data 可以使用JavaScript生成。这允许您的网站在内容上充满活力。这正是键差 。

静态站点生成器（SSG）还可以使用可重复使用的组件编译HTML文件。但是，这些工具（即Jekyll，Hugo等）更多地强调了网站的“静态”汇编，而不是动态数据补充。只是为了详细说明，Jekyll使用Liquid，这是HTML的模板语言。假设Jekyll是负责布局，HTML文件，部署等的引擎，而Liquid A 模板语言则使您可以进行类似于Pug的循环（ template Engine ）：

{% for post in site.categories.podcasts %}
  <li><a href="{{ post.url }}">{{ post.title}}</a></li>
{% endfor %}

如果您的网站有很多静态内容，例如带有文章，教程，图像甚至编写文档或基本文本信息的博客，则SSG应该是您的选择。对于更多动态的内容，即从服务器通信和数据库中获取，模板引擎绝对更好。

---

如果您想要更强大的选项，那么您就有Gatsby，它是使用CMS React的框架，并且再次是具有更多功能的静态内容生成器。

Answer 2

无需编译。

您需要一个静态站点生成器 (SSG)。顺便说一句，我推荐 11ty，如果你想要简单和简单，这是最好的。模板语言没有限制（支持 html、md、nunjucks、liquid、handlebars 等）

编辑 1：

如果您想快速入门，请在下面评论，我已准备好使用 HTML 代码、CSS、JS 缩小、连接