跳到主要内容

10个最好的静态站点生成器

您在网上访问的大多数网站都可能是动态生成的。也就是说,它们不是将所有内容编码到存储在服务器上的HTML中,而是从数据库中检索内容并构建页面以便即时为您服务。

+$Many also provide user interactivity through logins, forms and so on. Think of Facebook for an example of both of these things. To build this type of functionality yourself, you might look to a CMS such as WordPress.

但是,对于某些用例,这是过度的。简单的页面,例如个人资料,有关企业甚至博客的信息,确实不需要这种开销或复杂性。你当然可以自己构建静态HTML文本编辑器+$. And indeed many years ago this was how all sites were built, but this rapidly becomes cumbersome to maintain when you want to scale up or make changes. Static site generators offer a solution to this, by enabling you to build static HTML pages using templates.

实质上,静态站点生成器是命令行工具,可以将最终HTML页面的创建从用户请求的位置向前移动到您编写内容的点。进行更新时,您将构建新页面,然后可以按原样将其提供给每个请求它的用户。

这提供了几个优点。与动态站点相比,性能将大大提高,因为提供静态HTML和CSS的占用空间非常小。您的服务器端设置将更加简单,这也意味着更少的安全担忧。但是,相反,您将失去提供实时内容或接收用户输入的机会。

静态站点生成器近年来已经普及,因此导航广泛的选择可能很困难。在这里,我们已经看了一些您应该考虑的最佳选择。

01. 杰奇

Jekyll new release page

+$A first alpha for Jekyll 4.0 has just been released

GitHub的联合创始人Tom Preston-Werner于2008年首次发布,Jekyll可以推广静态站点的概念,并且可能仍然是最广泛使用的静态站点生成器。使用Jekyll,您通常会使用Markdown中的内容,这是一种专为文本格式设计的轻量级标记语言。

Liquid模板引擎用于将此Markdown内容放入HTML模板中,并以模块化和可重复使用的方式组合表示页面各部分(例如,页眉,页脚和内容)的模板。

对于那些喜欢CSS预处理的人来说,内置了对Sass的支持,并且它可以与Bootstrap等库一起使用。 Jekyll还包含一个HTTP服务器,可用于在本地轻松部署和测试静态页面。

Jekyll showcase page

Jekyll仍然是最广泛使用的静态站点生成器之一

杰基尔的一个主要卖点是其广泛的“进口商”,使现有的网站能够相对轻松地迁移到杰基尔。例如,如果您有WordPress站点,则可以使用其中一个导入器切换到使用Jekyll。将现有的静态HTML网站转换为Jekyll也很简单,如果您自己编写静态HTML或看到您喜欢的模板,这可能会很棒。

值得注意的是,Jekyll用于支持GitHub页面,这是一个随GitHub一起提供的静态站点托管服务。如果你有一个GitHub存储库,你可以使用Jekyll免费创建一个GitHub页面站点。这可以是为GitHub项目提供精美着陆页的便捷方式。

杰基尔的巨大缺点 - 这适用于大多数发电机 - 首先它看起来很复杂,并且是一种掌握的新技术。您可能无法像使用CMS一样快速启动和运行。然而,它有很好的记录,很快就可以克服学习曲线。

02. HEXO

Hexo homepage

请务必在Markdown For Hexo中编写您的内容

Hexo由。提供动力Node.js的并针对博客。虽然JavaScript实现在理论上不应该与使用它的方式产生太大的区别,因为您将使用标记和模板语言,它可以使JavaScript开发人员更熟悉安装和配置。如果您已经在使用npm和git,那么启动和运行起来非常简单。

像许多其他通用生成器一样,您可能希望在Markdown中编写您的内容。默认的模板引擎是Swig,它再次非常适合JavaScript开发人员。但是,Hexo是可扩展的,以便在需要时使用其他模板引擎。

Hexo网站包含一系列预先构建的主题供您试用,该工具的一个特别受欢迎的功能是它支持单命令部署。

03. 盖茨比

Gatsby homepage

Gatsby可以被开发人员快速接收

与Hexo一样,Gatsby由Node.js提供支持,因此对于经验丰富的JavaScript开发人员来说,这将是更为熟悉的领域。但是,有些事情使它与其他类似工具区别开来。

Gatsby使用React,这意味着一切都是使用组件构建的,并且允许它从React的DOM渲染方法中受益。这意味着可以由使用React的开发人员快速获取,但对于那些不熟悉它的人来说,学习React是必要的。

它还在构建时利用GraphQL从数据源检索数据和内容,从而提供现代,一致的界面,以确保每个页面在构建时都能获得所需的确切数据。

最后,Gatsby将构建页面作为渐进式单页应用程序,这意味着整个站点都会被下载并立即进行后续导航。

04. 雨果

Hugo homepage

使用Hugo在几毫秒内打造您的网站

被广泛认为是“其他”领先的静态站点生成器,将Hugo与Jekyll进行比较是很自然的。雨果是这两者中较新的一个,其关键领域之一是速度,这对于一些人来说是对杰基尔的抱怨。没有人喜欢等待网站建设,而Hugo可以在几毫秒内将标记和模板中的一个简单网站组合在一起,甚至可以在几秒钟内浏览数千页。

使用Hugo,使用Markdown编写内容也很常见,而模板引擎基于Go模板,因为Hugo本身是用Go编程语言实现的。与Jekyll一样,它附带了一个轻量级HTTP服务器,可以在本地快速为您的页面提供服务。这两个工具的构建工作流程总体上非常相似。

对于许多人来说,Hugo的主要优点是更快,更简单的入门路径,除了核心二进制文件之外,几乎不需要配置和任何依赖。它的文档和教程非常好,它具有保持简单性的精神,这使得学习曲线非常平易近人。

Hugo与Jekyll相比的一个缺点是它缺乏后者可用的广泛插件生态系统。然而,鉴于其广泛的内置功能,对于大多数用户来说,这不太可能成为问题。它在StackOverflow等网站上的支持也可能稍微轻一点,因为它没有那么久;然而,它继续受欢迎,许多人认为它可能在不久的将来成为领先的静态站点生成器。

05. NUXT

NUXT homepage

Nuxt为开发带来了基于组件的方法

+$Vue.js has gained immense popularity as a front end framework in recent years, due to its combination of a gentle learning curve, high performance and powerful feature set.

Nuxt.js实际上是一个用于创建服务器呈现的Vue应用程序的框架 - 即,在以完成的表单传递给客户端进行显示之前由服务器呈现的动态页面。但是,它也可用于构建静态站点,其命令行参数将通过Vue项目为所有路由构建静态HTML页面。

由于Nuxt是一个Vue框架,因此需要熟悉Vue,但之前与Vue合作的开发人员会感到宾至如归。而且,与Vue一样,它也为您的网站开发提供了基于组件的方法。

06. MkDocs

MkDocs homepage

MkDocs专注于项目文档站点

MkDocs比我们迄今为止所看到的工具更专业。它提出了一个非常简单的目标:提供一种快速且易于使用的方法来为项目文档生成HTML站点。它绝对成功地做到了这一点。它是用Python构建的,所以你需要安装Python和pip(Python包管理器)才能获得它。

之后,入门很容易。文档是使用Markdown编写的,并且使用单个YAML文件配置该工具。命令行构建过程尽可能简单。

MkDocs GitHub页面包含许多专为文档设计的主题,或者您可以为自己的主题构建HTML。 MkDocs是最容易开始使用的静态站点生成器之一,如果文档是您的用例,那么查看其他工具的原因并不多。

07.

Pelican page

Pelican允许您从各种博客平台导入您的网站

Pelican支持以多种语言编写的内容,包括无处不在的Markdown。它使用Jinja模板引擎,既易于使用又极其强大,这意味着虽然Pelican主要针对构建博客进行了优化,但它也非常适合构建各种不同类型的其他站点。它也很快,并且可以轻松处理具有数千页的网站,而不会让您等待它们构建。

与许多领先的静态站点生成器一样,Pelican允许您从各种博客平台导入您的站点。这使得转换使用WordPress或许多其他流行的内容管理系统构建的现有站点变得微不足道。如果您熟悉Python,特别是如果您之前使用过Jinja模板,那么Pelican是一个非常安全的选择。

但是,相反,对于熟悉JavaScript或Ruby的开发人员而言,要掌握它可能会有点困难。

08. Metalsmith

Metalsmith homepage

Metalsmith比此列表中的其他工具更具可定制性

Metalsmith对许多其他静态网站生成工具采用了不同的方法,因为它根本不会尝试做很多事情。实质上,静态站点生成器采用一组源文件,对其进行操作,然后生成一组输出文件,这些文件是静态站点本身。

Metalsmith提供了一个执行此操作的框架,但将所有实际操作留给了插件。这些操作通常是与其他静态站点生成器一起开箱即用的东西,例如利用模板,替换变量或解释像Markdown这样的语言。

+$When run through Metalsmith, all source files are converted to JavaScript objects, which means that manipulations by plugins are essentially modifications to properties of these JavaScript objects. There is, for example, a+$markdown()+$plugin which transpires Markdown to HTML.

这种方法的结果是Metalsmith非常可定制,但在安装过程中需要比一些更整体的工具更多的考虑。不喜欢Jekyll使用Liquid模板引擎吗?在这里你可以选择自己的。在Metalsmith页面上,您将找到一个冗长的插件列表,以提供广泛的功能,从编译Sass到CSS再到计算字数。

如果你偏爱不受欢迎的框架,那么Metalsmith就像你能得到的那样毫不吝啬。

09. 中间人

Middleman homepage

Middleman足够灵活,可以构建各种站点

 

Middleman与Jekyll大约同时发布,对于使用Ruby on Rails的开发人员来说,这将是最熟悉的。它的默认模板引擎是ERB(Embedded RuBy),它还包括对Haml,Sass,SCSS和Coff eeScript的内置支持,并且可以进一步扩展以支持更多。

一些领先的静态站点生成器主要面向博客,但是Middleman更加雄心勃勃,旨在为开发任何类型的站点提供灵活性。它非常不受任何影响和可扩展性。这意味着,如果您所做的只是一个博客,那么设置会稍微复杂一些,因为您必须对其进行配置。

10.

Spike homepage

Spike旨在创建非常简单的框架

Spike由与Roots相同的团队建立,Roots在积极维护时非常流行。它为JavaScript开发人员提供了一个熟悉的生态系统,利用webpack,Postcss,Reshape和Babel。与Metalsmith非常相似,Spike旨在提供一个非常简单的框架,并允许插件处理您的转换。

Generate NYC

网页设计活动 生成纽约 +$returns on 24-25 April 2019, offering a packed schedule of industry-leading speakers, a full day of workshops and valuable networking opportunities – don’t miss it. 立即获取您的Generate门票

本文最初发表于创意网页设计杂志网页设计者在此订阅Web Designer

相关文章:



翻译字数超限