Jamstack(JavaScript、API和Markup)正逐渐成为网络上的首选开发栈。Jamstack网站的标题表明,Jamstack是 "构建网站和应用程序的现代方式",它 "提供更好的性能"。
性能当然是Jamstack带来的好处之一,还有更好的安全性、可扩展性和开发者体验。建立在这种架构上的网站利用通过CDN提供的预渲染静态页面,可以从多个来源获得数据,并以微型服务API取代传统服务器及其数据库。
静态网站生成器(SSG)使快速和相对无痛地创建静态网站成为可能。
有大量的静态网站生成器,包括一系列的编程语言,如JavaScript、Ruby、Go等。你可以在staticsitegenerators.net 上找到一个详尽的、未经过滤的列表,但如果你想要一些更容易管理的东西,可以查看Jamstack 网站的列表,在那里你可以按名称或按 GitHub 星的数量过滤静态网站生成器。
在这篇文章中,我将列出七个流行的静态网站生成器和它们的主要功能,以便你能更好地了解哪一个适合你的项目。
什么是静态网站生成器?
一个普通的CMS(内容管理系统)--例如WordPress--在客户要求时动态地建立网页:它从数据库中收集所有数据,并通过一个模板引擎处理内容。
另一方面,静态网站生成器--将数据和内容应用于模板。
将数据和内容应用于模板,并生成一个可以提供给网站访问者的页面视图。
静态网站生成器和传统的网络应用程序栈之间最大的区别是,静态网站生成器不是等到一个页面被请求,然后每次都按要求生成其视图,而是提前完成这一工作,以便视图提前准备好提供。而且,它在建站时对网站的每一个可能的视图都会这样做。- "什么是静态网站生成器?以及寻找最佳生成器的3种方法"
如果你很好奇并想了解更多,Brian Rinaldi的这篇伟大的文章仔细研究了静态网站生成器的内部工作原理。
但是,CMS所带来的所有好处呢,比如非开发人员的内容创建和更新,围绕内容的团队协作等等? 进入无头CMS。
无头CMS --
是一种内容管理系统,它提供了一种编写内容的方法,但它不是将你的内容与特定的输出(如网页渲染)相联系,而是通过API将你的内容作为数据提供。- "2分钟内解释无头CMS"
这样一来,比如说,编辑团队可以继续在他们熟悉的、用户友好的管理界面上工作,他们制作或更新的内容只是静态网站生成器可以通过暴露的API访问的其他数据源中的一个。流行的无头CMS软件包括Strapi、Sanity和Contentful。另外,WordPress有一个REST API,允许开发者将其作为无头CMS使用。
因此,现代的Jamstack工具使得建立一个静态服务的网站成为可能,并且仍然可以得到内容管理系统的好处。
现在,让我们来看看一些静态网站生成器的选择。
1.Gatsby

Gatsby是一个完整的框架,用于构建静态网站和应用程序。它建立在React中,利用GraphQL来操作数据。如果你很好奇,想深入了解,请查看《Gatsby入门。建立你的第一个静态网站",以及Gatsby网站上的文档。
以下是Gatsby的一些强项。
-
使用Gatsby,你可以使用最新的网络技术--React、webpack、现代JS、CSS等都可以让你直接开始编码你的网站。
-
Gatsby丰富的插件生态系统允许你从一个或多个来源使用你喜欢的任何类型的数据。
-
易于部署和可扩展性,这主要是由于Gatsby构建的静态页面不需要复杂的设置。
-
Gatsby是一个渐进式网络应用程序(PWA)生成器:
你可以得到开箱即用的代码和数据分割。Gatsby只加载关键的HTML、CSS、数据和JavaScript,所以你的网站加载速度越快越好。一旦加载,Gatsby会预先为其他页面获取资源,因此点击网站的速度快得令人难以置信。-盖茨比网站
-
gatsby-image结合了Gatsby的本地图像处理能力和先进的图像加载技术,为您的网站轻松和完全优化图像加载。
-
大量的启动器网站可供你自由抓取和定制。
2.2.Next.js

Next是一个多功能的框架,用于创建服务器渲染或静态输出的JavaScript应用程序。它建立在React之上,由Vercel创建。
要创建一个Next应用程序,请在终端运行以下命令。
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cd 进入 ,你新创建的目录,然后键入命令,打开你的Next JS应用程序的开发服务器,端口为3000。nextjs-blog
npm run dev
要检查一切是否按预期运行,请在浏览器中打开http://localhost:3000。
Next.js有很好的文档,你可以在那里了解更多关于构建和定制基于Next的应用程序的信息。
以下是Next的一些最佳功能。
- Next默认在服务器上进行渲染,这对性能有很大好处。关于服务器端渲染的优点和缺点的讨论,请看Alex Grigoryan在Medium上的这篇文章。
- 无需设置:自动代码拆分、路由和热重载开箱即用。
- 图像优化、国际化和分析。
- 优秀的文档、教程、测验和例子,让你从初学者到高级用户都能正常运行。
- 内置的CSS支持。
- 大量的示例应用程序让你开始使用。
3.雨果

Hugo是一个非常流行的静态网站生成器,目前在GitHub上有超过49000颗星。它是用Go编写的,并宣传自己是最快的网站建设框架。事实上,Hugo有一个快速的构建过程,这使得构建静态网站变得轻而易举,对于有大量文章的博客来说非常有效。
Hugo的文档非常好,在该平台的网站上,你会发现一个很棒的快速入门指南,可以让你在短时间内使用该软件并运行。
下面是雨果最受欢迎的一些功能。
- 为速度而设计和优化:作为经验法则,每件内容的渲染时间大约为一毫秒。
- 不需要为诸如分页、重定向、多种内容类型等安装额外的插件。
- 丰富的主题设计系统。
- 短代码可作为使用Markdown的替代方案。
- 自2020年12月起,Hugo提供Dart Sass支持,以及一个新的过滤器,可以在另一张图片上叠加 -Hugo 0.80。2020年的最后一个版本!