拼图登陆拼图二维码验证

by Rick West

由里克·韦斯特(Rick West)

如何使用拼图快速轻松地构建静态网站 (How to use Jigsaw to quickly and easily build static sites)

让我们深入研究Jigsaw —一个框架，该框架使用与Laravel应用程序相同的现代工具来快速构建静态站点。 (Let’s dive in to Jigsaw — a framework for rapidly building static sites using the same modern tooling that powers Laravel applications.)

Static sites aren’t a new concept. However, fully fledged, dynamic, Content Management System (CMS’s) such as Wordpress, Drupal and Joomla, seemed to have taken over. That is, until fairly recently, where there has been a resurgence in the popularity of Static Site Generators such as Jekyll, Hugo, Pelican and now Jigsaw.

静态网站不是一个新概念。 但是，像Wordpress，Drupal和Joomla之类的成熟，动态的内容管理系统(CMS)似乎已经被接管。 也就是说，直到最近，静态站点生成器(例如，Jekyll，Hugo，Pelican和现在的Jigsaw)的流行才开始复苏。

Whilst CMS’s do provide a powerful and useful tool to serve the user in certain situations, the tendency has become that developers try to shoehorn CMS’s into situations where they simply do not belong, or at least don’t fit the intended use case.

尽管CMS确实提供了功能强大且有用的工具在某些情况下为用户提供服务，但趋势是开发人员试图将CMS塞入根本不属于或至少不适合预期用例的情况下。

As its name suggests, a ‘Content Management System’s’ primary aim is to do just that, manage content. And they are excellent at doing that, especially in situations where bloggers, content marketers, and site owners need to update their website on a regular basis.

顾名思义，“内容管理系统”的主要目的就是做到这一点，即管理内容。 他们非常擅长这样做，尤其是在博客作者，内容营销人员和网站所有者需要定期更新其网站的情况下。

However, as a solution for building a brochure style marketing site for a business or a simple personal blog/portfolio? In my opinion? Not so great.

但是，作为为企业或简单的个人博客/投资组合建立宣传册样式的营销网站的解决方案？ 在我看来？ 不太好。

什么是静态网站生成器？ (What is a Static Site Generator?)

Put simply, a Static Site Generator is an application that takes content (commonly written in Markdown), applies it to templates, and generates a set of purely static HTML files, ready to be delivered to visitors.

简而言之，静态网站生成器是一个应用程序，它接收内容(通常用Markdown编写)，将其应用于模板，并生成一组纯静态HTML文件，准备将其交付给访问者。

Static Site Generators combine the power of modern tooling and templating libraries with the ease of static HTML web pages.

静态站点生成器将现代工具和模板库的功能与静态HTML网页的简便性结合在一起。

The deployable output from a Static Site Generator requires no execution or interpretation by a web server.

静态站点生成器的可部署输出不需要Web服务器执行或解释。

静态站点生成器的优点 (Advantages of a Static Site Generator)

久经考验的技术 (Tried and Tested Technology)

Static Site Generators output static files that comprise only of HTML, CSS, and JavaScript. This means that they require no processing by a server and can be served directly from the web server’s file system exactly as stored. This is fast, uncomplicated, tried and tested technology.

静态站点生成器输出仅包含HTML，CSS和JavaScript的静态文件。 这意味着它们不需要服务器进行处理，并且可以完全按照存储的方式从Web服务器的文件系统直接提供服务。 这是一种快速，简单，经过验证的技术。

最少的廉价主机 (Minimal Inexpensive Hosting)

Static Site Generators most commonly run on your local machine, and then the output can be pushed up to a simple web host — any web host will do, since they’re just going to be serving static files. Therefore, static sites can be hosted totally free on platforms such as Github Pages or Netlify.

静态站点生成器最通常在本地计算机上运行，​​然后将输出推送到一个简单的Web主机上-任何Web主机都可以，因为它们仅用于提供静态文件。 因此，可以在Github Pages或Netlify等平台上完全免费托管静态站点。

安全 (Security)

One of the biggest threats of developing with a dynamic CMS is the lack of security. Their need for bigger server-side infrastructure opens the way for potential breaches.

使用动态CMS开发的最大威胁之一是缺乏安全性。 他们对更大的服务器端基础架构的需求为潜在的漏洞打开了道路。

Because a static site has no database layer, and little to no server side functionality, there is no exposure of additional attack surfaces.

因为静态站点没有数据库层，并且几乎没有服务器端功能，所以不会暴露其他攻击面。

速度与性能 (Speed and Performance)

Because Static Site Generators build already compiled files which are then served to the browser, without having to dynamically pull information from a database there is very little load time resulting in exceptional performance in the majority of cases.

由于静态站点生成器会生成已编译的文件，然后将这些文件提供给浏览器，而无需从数据库中动态提取信息，因此加载时间很少，因此在大多数情况下会产生出色的性能。

灵活性 (Flexibility)

The resurgence in the popularity of Static Site Generators is probably coupled to the gain in popularity of JavaScript.

静态站点生成器的流行重新出现可能与JavaScript的流行有所关联。

JavaScript can now perform many of the same duties as regular server side scripting languages such as PHP or Python.

JavaScript现在可以执行与常规服务器端脚本语言(例如PHP或Python)相同的许多任务。

This has in turn led to much greater flexibility in static sites, such as being able to easily integrate with external web services such as analytics, form submission/mailing list sign-up options and payment gateways.

反过来，这又使静态站点具有更大的灵活性，例如能够轻松地与外部Web服务集成，例如分析，表单提交/邮件列表注册选项和支付网关。

Whilst Static Site Generators may initially ask for more technical skills from a developer, compared to just producing static pages or using a CMS, we are also rewarded with infinitely more freedom.

尽管静态站点生成器最初可能会要求开发人员提供更多的技术技能，而不是仅仅生成静态页面或使用CMS，但我们也将获得无限的自由。

PHP开发人员的静态站点选项 (Static site options for PHP Developers)

There are hundreds of Static Site Generators available but if, like me, PHP is your primary programming language, then that helps to narrow down the options significantly.

可以使用数百种静态站点生成器，但是如果像我一样，PHP是您的主要编程语言，则可以极大地缩小选择范围。

Choosing a tool written in a language that you are familiar with is pretty important when considering the learning curve, extensibility, debugging and development or your project.

考虑学习曲线，可扩展性，调试和开发或您的项目时，选择用您熟悉的语言编写的工具非常重要。

Using https://www.staticgen.com/ I was able to get a nice comparison of the most popular PHP Static Site Generators.

使用https://www.staticgen.com/，我可以对最受欢迎PHP静态站点生成器进行很好的比较。

As you can see from the image, Sculpin and Jigsaw are quite clear favourites.

从图像中可以看到， Sculpin和Jigsaw是非常明显的收藏夹。

Sculpin was first released in 2012 so is a mature, solid choice, built on top of Symfony components.

Sculpin于2012年首次发布，因此是成熟，可靠的选择，它基于Symfony组件构建。

Jigsaw, on the other hand, was released in 2015 by the team at Tighten and leverages several Laravel components, such as Blade and Laravel Mix.

拼图，而另一方面，在2015年发表的队伍拧紧 ，并利用几个Laravel组件，如刀片和Laravel混合。

Being built on top of Laravel, and considering the notable popularity and community surrounding Laravel, this makes Jigsaw a really exciting option ?.

建在Laravel之上，并考虑到Laravel周围的知名度和社区性 ，这使得Jigsaw真的是一个令人兴奋的选择吗？

With that said, let’s dig into Jigsaw a little further…

话虽如此，让我们进一步深入拼图……

拼图-一种框架，可使用为Laravel应用程序提供支持的相同现代工具快速构建静态站点。 (Jigsaw — A framework for rapidly building static sites using the same modern tooling that powers your Laravel application.)

什么是拼图 (What is Jigsaw)

Developed by the team at Tighten, Jigsaw is a Static Site Generator that utilises components from the Laravel framework for building static websites.

由团队开发的拧紧 ， 拼图是一个静态网站生成器，它利用了组件Laravel建设静态网站的框架。

These components include the Blade templating engine, Collections and Laravel Mix for handling assets.

这些组件包括Blade模板引擎，Collections和Laravel Mix，用于处理资产。

“Static sites for Laravel developers.

“ Laravel开发人员的静态站点。

Jigsaw is a framework for rapidly building static sites using the same modern tooling that powers your web application.”

Jigsaw是一个框架，可使用为您的Web应用程序提供支持的相同现代工具快速构建静态站点。”

Considering all this, it was no surprise to me that Jigsaw ‘feels’ a lot like Laravel. Very clean, expressive syntax, easy to set up, infinitely powerful and everything ‘just works’ ?.

考虑到所有这些，拼图对我来说就像Laravel一样，这不足为奇。 非常干净，表达性强的语法，易于设置，功能强大且一切都能正常运行吗？

Let’s face it, the Laravel blueprint is a tried and tested one, it’s the most popular backend framework for a reason. So with Jigsaw utilizing Laravel components and embodying the Laravel ethos, it is definitely off to a great start.

让我们面对现实，Laravel蓝图是一个久经考验的蓝图，出于某种原因，它是最受欢迎的后端框架。 因此，通过使用Laravel组件并体现Laravel精神的Jigsaw，绝对是一个很好的开始。

拼图入门 (Getting started with Jigsaw)

As part of the research I did into Jigsaw (this was originally a uni project that I’ve turned into a series of blog posts!), I reached out to Keith Damiani, a Senior Developer at Tighten, who is also the lead on the Jigsaw project. In his own words, Keith describes Jigsaw:

作为我对Jigsaw所做的研究的一部分(这最初是一个uni项目，后来变成了一系列博客文章！)，我联系了Tighten的高级开发人员Keith Damiani ，他也是该项目的负责人拼图项目。 基思用他自己的话描述了拼图 ：

“It’s definitely targeted at developers who are comfortable in the Laravel ecosystem, as it draws so heavily on Blade; so for someone who writes Laravel (or even PHP) all day, it’s a natural choice that involves a pretty short learning curve to get up and running.”

“它绝对针对熟悉Laravel生态系统的开发人员，因为它在Blade上吸引了很多人； 因此，对于一整天写Laravel(甚至PHP)的人来说，这是很自然的选择，需要很短的学习时间才能启动并运行。”

Awesome.

太棒了

To use Jigsaw, you just need PHP 7, Composer, Node and NPM installed on your machine. All of which are standard tools, as part of a modern PHP development workflow.

要使用Jigsaw，您只需在计算机上安装PHP 7，Composer，Node和NPM。 所有这些都是标准工具，是现代PHP开发工作流程的一部分。

Getting up and running from there is then pretty simple, as the quality of the Jigsaw documentation really is fantastic.

从那里开始安装和运行非常简单，因为Jigsaw文档的质量确实很棒。

Installing Jigsaw all the way to previewing something in your browser can be achieved in as little as 4 simple steps:

只需4个简单步骤，就可以完全安装Jigsaw来预览浏览器中的内容：

1. Install Jigsaw via Composer:

1.通过Composer安装拼图：

composer require tightenco/jigsaw

2. Initialise your Jigsaw project:

2.初始化您的拼图项目：

./vendor/bin/jigsaw init

3. Generate your site by running the build command:

3.通过运行build命令来生成您的站点：

./vendor/bin/jigsaw build

4. Preview your site with PHP using the serve command:

4.使用serve命令，使用PHP预览您的网站：

./vendor/bin/jigsaw serve

Boom! This highlights just how easy it is to get started with Jigsaw. As I mentioned before, it ‘just works’!

繁荣！ 这凸显了Jigsaw入门的简易性。 正如我之前提到的，它“有效”！

Let’s take a further look at some other important aspects of the framework…

让我们进一步看一下框架的其他重要方面……

生态系统与支持 (Ecosystem and Support)

Tighten, the driving force behind Jigsaw, is an integral part of the wider Laravel ecosystem as well as being an official ‘Laravel Partner’.

拧紧 ，拼图背后的驱动力，是更广泛的生态系统Laravel的一个组成部分，以及作为一个官方的“ Laravel合作伙伴 ”。

With Jigsaw being built on top of, and therefore tightly coupled to, some of the Laravel components, this Tighten/Laravel connection bodes very well for Jigsaw and its future development.

由于Jigsaw构建在某些Laravel组件之上并因此与之紧密耦合，因此这种Tighten / Laravel连接对于Jigsaw及其未来发展而言是一个很好的兆头。

Tighten and many members of its staff are also well known within the PHP/Laravel community for several other fantastic open source projects, producing online tutorials and hosting podcasts.

在PHP / Laravel社区中，Tighten的许多工作人员也因其他几个出色的开源项目而闻名，它们制作了在线教程并托管了播客。

Being backed by such a passionate, prominent and successful company is a great sign of encouragement, and already Tighten is building a community around the Jigsaw project. In fact, they have already created Built With Jigsaw, a website to collect and showcase some of the great examples of projects built with Jigsaw, along with community resources and other interesting use cases of Jigsaw.

获得如此热情，杰出和成功的公司的支持，是鼓舞人心的好兆头，而且Tighten已经在围绕Jigsaw项目建立社区。 实际上，他们已经创建了Built With Jigsaw网站，该网站收集并展示了使用Jigsaw构建的项目的一些出色示例，以及社区资源和Jigsaw的其他有趣用例。

It is also worth noting that when I reached out to Keith regarding interviewing him for my project, he was more than happy to take some time out of his day to answer a few of my questions. This willingness to engage directly with someone from the wider community (a random stranger from the UK) really emphasised to me just how committed to the community and enthusiastic the Jigsaw team is. Credit to Keith and the attitude of Tighten as a whole.

还值得注意的是，当我联系Keith采访他的项目时，他很高兴抽出一些时间来回答我的一些问题。 这种直接与更广泛的社区中的人(来自英国的随机陌生人)互动的意愿向我真正强调了对社区的承诺和对拼图团队的热情。 归功于Keith和整个Tighten的态度。

性能和可伸缩性 (Performance and Scalability)

During my interview with Keith, he revealed that they know several developers who have built some very large sites (with 6,000+ pages) using Jigsaw.

在我对Keith的采访中 ，他透露他们认识几个开发人员，他们使用Jigsaw构建了一些非常大的站点(包含6,000多个页面)。

The Jigsaw team have also been working on optimising the build times of Jigsaw, which will be especially of interest to those who maintain, or plan to build, large Jigsaw sites as it cuts build times down by about 75%.

拼图团队还一直在优化拼图的构建时间，这对于那些维护或计划建造大型拼图站点的人特别感兴趣，因为它可以将构建时间减少约75％。

功能，灵活性和可扩展性 (Features, flexibility and extensibility)

Jigsaw ships complete with many features that aid the rapid development of static websites.

拼图船具有许多功能，可帮助静态网站的快速发展。

Referring to the brilliant documentation, I have summarised some of these primary features below:

参考出色的文档 ，我在下面总结了其中的一些主要功能：

刀 (Blade)

The backbone of Jigsaw is the Blade templating engine. One of the biggest benefits of a templating language is template inheritance, the ability to create reusable layouts and partials. This dramatically reduces code duplication and lowers development time.

拼图的骨干是Blade模板引擎。 模板语言的最大好处之一是模板继承，即创建可重用的布局和部分的能力。 这大大减少了代码重复并缩短了开发时间。

降价促销 (Markdown)

As with many Static Site Generators, Jigsaw supports content written in Markdown. Markdown is a fantastic writing format for things like articles, blog posts, and documentation pages.

与许多静态网站生成器一样，Jigsaw支持以Markdown编写的内容。 Markdown是一种出色的写作格式，适用于诸如文章，博客文章和文档页面等内容。

Jigsaw makes it painless to create a layout in Blade, and fill it with content written in Markdown.

拼图使您可以轻松地在Blade中创建布局，并用Markdown编写的内容填充布局。

Laravel混合 (Laravel Mix)

Out of the box, Jigsaw comes with Laravel Mix configured and ready to use. Laravel Mix provides a fluent API for defining Webpack build steps for your application using several common CSS and JavaScript preprocessors.

开箱即用，Jigsaw配备了Laravel Mix，可以立即使用。 Laravel Mix提供了一种流畅的API，可使用几种常见CSS和JavaScript预处理器为您的应用程序定义Webpack构建步骤。

As a Junior Developer, and someone with limited exposure to Webpack and modern front-end tooling, Laravel mix takes all the stress away and makes getting started with Webpack and asset compilation a breeze.

作为初级开发人员，并且对Webpack和现代前端工具的了解有限，Laravel的混合消除了所有压力，使Webpack和资产编译的入门变得轻而易举。

大事记 (Events)

This pull request https://github.com/tightenco/jigsaw/pull/189 added 3 events to Jigsaw that you can hook into, in order to run custom code before and after the application build is processed.

这个拉取请求https://github.com/tightenco/jigsaw/pull/189向Jigsaw添加了3个事件，您可以将它们挂接到其中，以便在处理应用程序构建之前和之后运行自定义代码。

The three events are ‘beforeBuild’, ‘afterCollections’ and ‘afterBuild’.

这三个事件是“ beforeBuild”，“ afterCollections”和“ afterBuild”。

Registering an event listener is very simple, and these events offer a great opportunity to add custom code. This would be particularly useful, for example, in the event of wanting to pull in content from an external API-based CMS like Contentful or in generating an automated sitemap after the site is built.

注册事件侦听器非常简单，这些事件为添加自定义代码提供了绝佳的机会。 例如，在想要从诸如Contentful之类的基于外部API的CMS提取内容的情况下，或者在构建网站后生成自动站点地图时 ，这将特别有用。

馆藏 (Collections)

Jigsaw provides powerful features for working with groups of related pages, or collections. Collections give you the ability to access your content at an aggregate level, enabling you to easily add near-dynamic features like menus, pagination, categories, and tags to your static site.

拼图提供了用于处理相关页面或集合组的强大功能。 集合使您能够以汇总级别访问内容，使您可以轻松地向菜单项，分页，类别和标签等近动态功能添加到静态站点。

Collections can be used to generate pages of related content — for example, blog posts or articles that are sorted by date, with an index page displaying summaries of the five most recent posts — or for embedding related blocks of content within a page, for content like staff bios, product descriptions, or a portfolio of projects.

集合可用于生成相关内容的页面(例如，按日期排序的博客帖子或文章，而索引页面则显示最新发布的五个帖子的摘要)，或用于将相关内容块嵌入页面中的内容例如员工简介，产品说明或项目组合。

配套 (Packages)

Although not officially released yet, the Jigsaw/Tighten team are working on a couple of starter template for Jigsaw. One for a blog and one for documentation style website.

尽管尚未正式发布，但Jigsaw / Tighten团队正在研究Jigsaw的几个入门模板。 一个用于博客，另一个用于文档风格的网站。

Working with designer Steve Schoger, there is no doubt that these templates will look pretty awesome, but this is also a great indicator that the team is taking the first steps in making Jigsaw extensible with the addition of an external plugin ecosystem.

与设计师Steve Schoger一起工作时，毫无疑问，这些模板看起来会很棒，但这也很好地表明了该团队正在采取第一步，通过添加外部插件生态系统使Jigsaw可扩展。

No doubt that once the integration of plugins is possible, the Jigsaw and Laravel communities will start finding ways to extend Jigsaw in many innovative ways!

毫无疑问，一旦插件集成成为可能，Jigsaw和Laravel社区将开始寻找以许多创新方式扩展Jigsaw的方法！

摘要 (Summary)

Jigsaw is a stable, performant and inherently secure framework packed full of powerful and easy to implement features that make our lives as developers easier and therefore happier ?.

Jigsaw是一个稳定，高性能和内在安全的框架，其中包含强大而易于实施的功能，这些功能使我们作为开发人员的生活更加轻松，因此更加幸福。

It’s so easy to get started with, having such a low barrier to entry for someone familiar with modern PHP development, that you can take a project from ‘jigsaw init’ to being hosted for FREE on Netlify or Github Pages in no time at all.

它非常容易上手，对熟悉现代PHP开发的人来说入门门槛低，您可以立即将项目从“ jigsaw init”迁移到免费在Netlify或Github Pages上托管。

In my opinion, two of the most important factors when considering any framework or library are the quality of the documentation and also the ecosystem and support surrounding it.

我认为，在考虑任何框架或库时，两个最重要的因素是文档的质量以及围绕其的生态系统和支持。

In these cases, Jigsaw excels, above and beyond expectations. I found the documentation to be clear, concise and well presented and the community and support surrounding Jigsaw is second to none (other than perhaps Laravel itself!).

在这些情况下，拼图将超越预期而出类拔萃。 我发现文档清晰，简明并且呈现得很好，并且围绕拼图的社区和支持是首屈一指的(也许不是Laravel本身！)。

Make sure to give Jigsaw a try in your next project, or when you finally get around to building that blog you keep talking about.

确保在下一个项目中尝试Jigsaw，或者当您最终开始构建该博客时，请继续讨论。

No more excuses. Jigsaw is awesome.

别再找借口。 拼图很棒。

*As part of my research for this article, I reached out to Keith Damiani, a Senior Developer at Tighten, who is also the lead on the Jigsaw project.

*作为本文研究的一部分，我与Tighten的高级开发人员Keith Damiani取得了联系，他也是Jigsaw项目的负责人。

Keith was kind enough to answer a few of my question regarding the development of Jigsaw and the plans for the future.

Keith很友善地回答了我有关拼图的发展和未来计划的一些问题。

You can read that full interview here…https://medium.com/@rickwest8/jigsaw-my-interview-with-keith-damiani-senior-developer-at-tighten-and-lead-developer-on-the-55ead103514d

您可以在此处阅读完整的采访... https://medium.com/@rickwest8/jigsaw-my-interview-with-keith-damiani-senior-developer-at-tighten-and-lead-developer-on-the-55ead103514d

Thank you for reading! ? If you enjoyed it, hit that clap button below. I really appreciate your support and it helps other people see the story.

感谢您的阅读！ ？ 如果您喜欢它，请点击下面的拍手按钮。 非常感谢您的支持，它可以帮助其他人了解这个故事。

I am always happy to hear from like minded people, so feel free to shoot me an email or say hello on Twitter.

我总是很高兴收到志同道合的人的来信，因此随时向我发送电子邮件或在Twitter上打个招呼。

翻译自: https://www.freecodecamp.org/news/how-to-use-jigsaw-to-quickly-and-easily-build-static-sites-8a3304c3ad7e/

拼图登陆拼图二维码验证