什么叫静态构建版本号码_为什么要使用GatsbyJS构建静态网站

什么叫静态构建版本号码

by Ajay NS

由Ajay NS

为什么要使用GatsbyJS构建静态网站 (Why you should use GatsbyJS to build static sites)

Gatsby has been growing over time, and I’m glad to see it in use by a huge number of sites like marketing sites, blogs, and generated static pages.

Gatsby一直在增长，我很高兴看到大量站点(如营销站点，博客和生成的静态页面)正在使用它。

What attracted me in the first place was the smooth development experience, incredible results, and the warm community. Going a bit in-depth into its workings, the ecosystem and also discussing its potential with more developers made me think about how powerful it is — much more than I had initially presumed.

首先吸引我的是流畅的开发经验，令人难以置信的成果以及热情的社区。 深入研究其生态系统的工作原理，并与更多开发人员讨论其潜力，这让我思考了它的强大功能-比我最初设想的要强大得多。

This article seeks to make you see why it has gained popularity. If you’re already using it, you’ll get a better idea of the features that you could put to use for an even greater development experience.

本文旨在使您了解为什么它如此流行。 如果您已经在使用它，则可以更好地了解可以使用哪些功能以获得更好的开发经验。

Do note that this is what works for me, and I’m sharing just my views. I’m in no way telling you that your current setup that works for you is obsolete, but just trying to share how Gatsby has been great for me.

请注意，这对我有用，我只是分享我的观点。 我绝不是要告诉您当前适合您的设置已经过时，而只是试图分享Gatsby对我来说很棒。

什么是盖茨比？ (What is Gatsby?)

It’s another static site generator like Hugo, Jekyll and so on. So what makes it special? Why are we talking specifically about it?

这是另一个静态网站生成器，例如Hugo，Jekyll等。 那有什么特别之处呢？ 我们为什么要专门谈论它？

Gatsby can be used to build static sites that are Progressive Web Apps, follow the latest web standards, and are optimized to be highly performant. It makes use of the latest and popular technologies including ReactJS, Webpack, GraphQL, modern ES6+ JavaScript and CSS.

Gatsby可以用于构建静态网站，这些网站是渐进式Web应用程序，遵循最新的Web标准，并经过优化以实现高性能。 它利用了最新和流行的技术，包括ReactJS，Webpack，GraphQL，现代的ES6 + JavaScript和CSS。

This means a lot of developers can jump in without much of a learning curve as they already know or have at least used one piece of this tech stack Gatsby is built on.

这意味着许多开发人员可以在没有很多学习曲线的情况下跳入，因为他们已经知道或至少已经使用了Gatsby建立在该技术堆栈上的一部分。

Furthermore, I’d like to add something I noticed working with developers who had no idea about the latest frameworks and libraries and were just used to the traditional HTML, JavaScript, CSS files way of building sites.

此外，我想补充一点，我发现与开发人员合作时，他们对最新的框架和库一无所知，只是习惯了传统HTML，JavaScript，CSS文件构建网站的方式。

发展方针 (Approach to development)

On one side, we have users expecting an app-like smooth experience on the web. The other side is developers, used to sites having pages with each being HTML files or maybe using some templating — at the very base — sites as pages with internal linking.

一方面，我们希望用户能够在网络上获得类似于应用程序的流畅体验。 另一面是开发人员，他们习惯于网站的页面均是HTML文件的网站，或者使用模板将网站作为内部链接的页面 。

If you’re getting started with any of the latest frameworks, let’s take the case of React. You could have an app up and running with minimal configuration with create-react-app. But if you take a look at the project structure it may not make much sense to a newbie or even some developers coming in from other tech stacks. The pattern is pretty different from what you’ve ever seen before.

如果您开始使用任何最新框架，让我们以React为例。 您可以使用create-react-app以最小的配置启动和运行应用程序 。 但是，如果您看一下项目结构，那么对于新手甚至是来自其他技术堆栈的一些开发人员来说，可能就没有多大意义。 该模式与您之前所见的完全不同。

It’s because without additional setup they aim at building Single-Page Applications, SPAs. To add routing, pages or optimizing for SEO, it will require more tools and configuration.

这是因为没有其他设置，它们旨在构建单页应用程序SPA。 要添加路由，页面或针对SEO进行优化，将需要更多的工具和配置。

That doesn’t seem very convenient when you want static sites, does it? So here we have Gatsby, optimized for this specific use case. This could be more intuitive for developers, as there are pages created from components that follow the root idea that sites are pages with internal linking.

当您需要静态网站时，这似乎不太方便，是吗？ 因此，这里有针对此特定用例进行了优化的Gatsby。 对于开发人员而言，这可能更直观，因为有些组件是根据组件创建的页面，这些基本概念是网站是具有内部链接的页面。

特征 (Features)

组件 (Components)

Components are a key feature of React, and now they’re a commonly followed web design pattern. With the current level of complexity of user interfaces, it is almost impossible to write maintainable code in long pages of HTML or use templating engines and expect consistency.

组件是React的一项关键功能，现在它们已成为普遍遵循的Web设计模式。 在当前用户界面的复杂性水平下，几乎不可能在HTML的长页面中编写可维护的代码或使用模板引擎并期望一致性。

So instead, we build reusable components and then use them to construct views. This way we have separate modules handling separate things, and it’s easier to manage and maintain. The component just contains all the information it requires, and Gatsby, since it uses React, follows the same pattern.

因此，相反，我们构建了可重用的组件，然后使用它们来构建视图。 这样，我们就有了单独的模块来处理不同的事物，并且更易于管理和维护。 该组件仅包含其所需的所有信息，并且Gatsby(由于使用React)遵循相同的模式。

Atomic design is an approach that’s a good way of handling complex interfaces, and we could put it to use here with React components. Brad Frost has an amazing blog post describing what it is and how it works.

原子设计是一种处理复杂接口的好方法，我们可以将其与React组件一起使用。 布拉德·弗罗斯特(Brad Frost)有一篇很棒的博客文章，描述了它是什么以及它如何工作。

Webpack捆绑和最新工具 (Webpack bundling and latest tooling)

Webpack creates optimized, minified bundles of HTML, JavaScript, and CSS. When it’s pre-configured with Babel and more plugins, it allows you to use the latest ES6+ JavaScript and GraphQL.

Webpack创建优化，最小化HTML，JavaScript和CSS包。 如果预先配置了Babel和更多插件，则可以使用最新的ES6 + JavaScript和GraphQL。

Icing on the cake: we’ve got hot reloading and code splitting built-in, giving a better development experience and better site performance. This is aimed at making the developer write minimal tooling configuration and focus more on the actual site development.

锦上添花：我们内置了热重载和代码拆分功能，可提供更好的开发体验和更好的站点性能。 目的是使开发人员编写最少的工具配置，并更多地关注实际的站点开发。

Gatsby插件，启动器和React软件包 (Gatsby plugins, starters and React packages)

You can use any of the packages you’ve already been using with NPM, particularly the React ones as it’s built on the same thing. But that’s not all: there’s a large number of ever-growing plugins, starters, and transformers by the Gatsby community.

您可以使用已经与NPM一起使用的任何软件包，尤其是React软件包，因为它们是基于同一事物构建的。 但这还不是全部：盖茨比社区有大量不断增长的插件，启动器和转换器。

You almost never come to the point where you actually have to build on your own tool or module, the community already offers a huge number to suit every need.

您几乎从来没有真正需要构建自己的工具或模块的地步，社区已经提供了大量满足各种需求的工具。

Using these, Gatsby can be extended with additional functionality. For instance, a couple of examples include responsive images, offline functionality, source data from CMS and data markup formats, adding third-party services (Google analytics etc), and so on.

使用这些，可以用其他功能扩展Gatsby。 例如，有两个示例，包括响应图像，脱机功能，来自CMS的源数据和数据标记格式，添加第三方服务(Google分析等)等等。

造型 (Styling)

Again, complex user interfaces mean complex styling patterns, and it’s only a matter of time before style-sheets get bloated. You get specificity issues, scroll through hundreds of lines of code trying to figure out things, and end up using !important to actually see the styling you added.

再次，复杂的用户界面意味着复杂的样式模式，样式表变得肿只是时间问题。 您会遇到专一性问题，滚动浏览数百行代码以试图找出问题，最后使用!important实际查看添加的样式。

Gatsby has support for SCSS, CSS-in-JavaScript libraries, allowing you to manage styles better and with ease. Even the setup for this is fairly easy to handle with the installation of a plugin or package.

Gatsby支持SCSS和CSS-in-JavaScript库，使您可以更好，更轻松地管理样式。 即使使用插件或软件包安装，也很容易处理。

响应式图像 (Responsive Images)

Resizing images for responsiveness on different devices, lazy-loading, using srcsets and picture…Already sounds tedious when it is to be done manually.

调整图像大小以在不同设备上进行响应，延迟加载，使用srcsets和picture …在手动完成时听起来已经很乏味。

Although it is a requirement for performance and app-like optimized interfaces these days, we don’t see many tools that we can directly jump into and use.

尽管如今对性能和类似于应用程序的优化接口是必不可少的，但我们看不到很多可以直接投入使用的工具。

Meanwhile, in Gatsby with just a plugin, particularly the gatsby-plugin-sharp, you can directly generate fluid images, add filters, change formats, blur up on load and a lot more. This saves a lot of work and time manually resizing images and writing explicit boilerplate code for responsive images. It also gives you way better performance along with a smoother user experience.

同时，在仅带有插件的Gatsby中，尤其是gatsby-plugin-sharp ，您可以直接生成流畅的图像，添加滤镜，更改格式，加载时模糊等等。 这节省了手动调整图像大小和为响应图像编写显式样板代码的大量工作和时间。 它还为您提供更好的性能以及更流畅的用户体验。

类似应用的体验 (App-like experience)

With the performance boost and features to add to the smoothness of the user experience, Gatsby aims at a full app-like experience borrowing from full PWAs. There are no reloads between pages when using gatsby-link instead of hyperlinks, and the app still appears smooth and performant thanks to lazy-loading images and code-splitting.

通过提高性能和功能来增加用户体验的流畅度，Gatsby的目标是从完整的PWA中汲取与应用程序类似的体验。 使用gatsby-link而不是超链接时，页面之间没有重新加载，并且由于延迟加载图像和代码拆分，该应用程序仍显得流畅且性能良好。

For sites following standards that you also want to be performant, we’ve got tons of things to do and guides to follow: minification and bundling, browser caching and async loading scripts or files, and so on. When working with a framework like React, you have more things to worry about even though it solves a couple of problems: code-splitting, SEO, routing if required, responsive images, and the list goes on.

对于遵循您也希望表现出色的标准的网站，我们要做很多事情，并遵循以下指南：缩小和捆绑，浏览器缓存以及异步加载脚本或文件，等等。 当使用像React这样的框架时，即使它解决了两个问题，您也需要担心很多事情：代码拆分，SEO，必要时进行路由，响应图像以及列表继续。

Gatsby aims to solve all these problems, with less time spent on tooling, configuration, and the environment and more time to actually design and develop the site.

Gatsby旨在解决所有这些问题，从而减少了在工具，配置和环境上的时间，并将更多的时间实际用于设计和开发站点。

盖茨比生态系统 (The Gatsby Ecosystem)

外挂程式 (Plugins)

Gatsby was built to be extensible and flexible — using plugins is one way to make it so. They can be directly installed and be used for a variety of functionality including making the site offline, adding Google analytics, adding support for inline SVGs, you name it — the list is almost endless.

Gatsby的构建具有可扩展性和灵活性-使用插件是实现这一目标的一种方法。 它们可以直接安装并用于多种功能，包括使网站脱机，添加Google Analytics(分析)，添加对内嵌SVG的支持(您将其命名)-列表几乎是无止境的。

Of the different types of Gatsby plugins, the gatsby-source plugins in particular fetch data from a local or remote source and allow it to be usable via GraphQL. These sources could be CMSs such as Wordpress, Drupal, Plone, local markdown, XML or such files, databases, APIs and data formats as JSON, CSV.

在不同类型的Gatsby插件中，尤其是gatsby-source插件从本地或远程源获取数据，并允许它们通过GraphQL使用。 这些来源可以是CMS，例如Wordpress，Drupal，Plone，本地markdown，XML或诸如JSON，CSV的文件，数据库，API和数据格式。

This implies that almost anything at all can be used as a source to work with Gatsby and generate static sites.

这意味着几乎所有东西都可以用作与盖茨比合作并生成静态网站的来源。

Note: GraphQL is a query language for APIs that works on the philosophy of just asking for exactly what you require. Unlike REST APIs, you don’t look for endpoints to provide your data and process them from the structure that’s given from it, but rather ask for what you want and directly use this data. Read more about how it works and how to use it in their docs.

注意：GraphQL是一种用于API的查询语言，其工作原理是仅询问您的确切要求。 与REST API不同，您不需要寻找端点来提供数据并根据其提供的结构来处理它们，而是询问您想要什么并直接使用此数据。 在他们的文档中阅读有关它如何工作以及如何使用它的更多信息。

After installation, some plugins can be used straight away by just listing them in gatsby-config.js and the others configured with an options object.

安装后，只需在gatsby-config.js列出某些插件即可直接使用某些插件，而其他插件则使用options对象配置。

Go check out the Gatsby plugin library, it’s already got quite a large number of plugins and more are being added still by the active community.

去看看Gatsby插件库 ，它已经有很多插件，并且活动社区还在添加更多插件。

初学者 (Starters)

These are basically boilerplate Gatsby sites which help you kick-start development quickly depending on what kind of site it is. They help you directly get onto working on the development of a site, configuration and basic features you need already taken care of. Which means, less time on the tooling, more time for development.

这些基本上是样板的盖茨比网站，可根据您所在的网站类型来帮助您快速启动开发。 它们可以帮助您直接着手进行站点开发，配置和基本功能，而这些功能您已经需要处理。 这意味着更少的工具时间，更多的开发时间。

Gatsby plugins often have their corresponding starters which show or serve a quick way to get started with using it. They also act as a reference covering all the features and showcase configurations of the plugin in use.

Gatsby插件通常具有其相应的启动器，这些启动器显示或提供快速使用它的入门方法。 它们还充当参考，涵盖了使用中的插件的所有功能和展示配置。

Gatsby themes is a feature still in development which allows you to package and reuse these functionalities and patterns similar to what’s seen in starters. Read more about what’s brewing in the Gatsby blog.

Gatsby主题是一项仍在开发中的功能，可让您打包和重用这些功能和模式，类似于初学者中看到的功能和模式。 在Gatsby博客中了解有关酿造啤酒的更多信息。

静态网站 (Static Sites)

Firstly, let’s take a look at how Gatsby works internally. Unlike the SPAs that make API requests as you run the app, Gatsby does all the data fetching, including data sourcing from local files, during build time. All this data is then used to generate static HTML, JavaScript, and CSS files. This static rendering is what makes things work faster.

首先，让我们看一下盖茨比在内部的运作方式。 与在运行应用程序时发出API请求的SPA不同，Gatsby在构建期间会执行所有数据提取，包括从本地文件中获取数据。 然后，所有这些数据都用于生成静态HTML，JavaScript和CSS文件。 这种静态渲染可以使工作更快。

That was a lot about Gatsby, its ecosystem and how it helps you create amazing static sites. But why would we want static sites? Doesn’t it sound like a step back from dynamic ones?

关于盖茨比(Gatsby)，其生态系统以及它如何帮助您创建令人惊叹的静态网站的内容很多。 但是为什么我们要静态站点呢？ 听起来不像是动态的退步吗？

• They do not require complex server setup with databases, maintenance, and don’t have any scaling issues.
  他们不需要使用数据库进行复杂的服务器设置，维护，也没有任何扩展问题。
• Data is fully secure. CMSs and APIs have private features but the data is still present in the server which can be exploited. Gatsby only takes the required data to display from the source and the private or secured data is not even present in the final build. Which is the safest it can possibly get.
  数据是完全安全的。 CMS和API具有私有功能，但是服务器中仍然存在数据，可以利用这些数据。 Gatsby仅从源中获取所需的数据以进行显示，而私有或受保护的数据甚至不在最终版本中。 这可能是最安全的。
• Rather than relying on servers to generate pages dynamically, pre-render all of them on build and use CDNs for a blazing fast and smooth experience for users all around the globe.
  与其依靠服务器动态生成页面，不如将它们全部预先渲染在构建和使用CDN上，从而为全球用户提供快速，流畅的体验。
• Gatsby does static rendering. Which makes content available as HTML, and search engine optimized, no long initial load time.
  Gatsby执行静态渲染。 这使得内容可以HTML格式提供，并且搜索引擎得到了优化，而无需花费很长的初始加载时间。

试试看！ (Try it out!)

That should have shed some light on what’s all the hype around it and why some major companies are choosing to use it on their sites. The Gatsby site showcase just seems to be growing with many amazing additions lately.

这本来应该揭示出围绕它的所有炒作以及为什么一些大型公司选择在其站点上使用它。 最近， 盖茨比(Gatsby)网站展示的内容似乎正在不断增加，并且添加了许多令人惊讶的内容。

Maybe it’s time you dipped your hands and took a look around!

也许是时候浸入双手环顾四周了！

Thanks to CodeSandbox, we can do this right away, in the browser itself.

感谢CodeSandbox ，我们可以在浏览器本身中立即执行此操作。

If you’d like to run it locally, you should check out the gatsby-cli. It is the quickest and easiest way to get started. They’ve also got amazing documentation and tutorials for you to dive into developing sites on gatsbyjs.org.

如果您想在本地运行，请查看gatsby-cli 。 这是上手最快，最简单的方法。 他们还提供了惊人的文档和教程，可让您深入gatsbyjs.org上的开发站点。

Hope you enjoyed this article and found it to be worthwhile. You can check out all my projects on Github or Dribbble and don’t hesitate to reach out to me on Twitter!

希望您喜欢这篇文章，并认为它值得。 您可以在Github或Dribbble上查看我的所有项目，并且可以在Twitte r上与我联系 ！

You also might like to take a look at my other articles:

您可能还想看看我的其他文章：

Progressive Web Apps: Bridging the gap between web and mobile appsUnless you’ve been living under a rock, you’ve probably heard of PWAs or Progressive Web Apps. It’s a hot topic right…medium.freecodecamp.orgHackathon Report: What can you code in 30 hours? Quite a lot!What can you build in 30 hours straight? As a group of second year college students with a growing portfolio of work…medium.freecodecamp.orgACM Month Of Code 2k17: Building MoodifyMarch was a pretty productive month, all thanks to this major event hosted by Association for Computing Machinery, NIT…hackernoon.com

渐进式Web应用程序：弥合Web和移动应用程序之间的鸿沟 除非您一直处于困境，否则您可能听说过PWA或渐进式Web应用程序。 没错，这是一个热门话题…… medium.freecodecamp.org Hackathon报告：30小时内您可以编写什么代码？ 非常多！ 您连续30小时可以建立什么？ 作为一组二年级大学生，他们的工作量正在不断增加…… medium.freecodecamp.org ACM代码月2k17：Build Moodify 3月是一个非常富有成效的月份，这要归功于由NIT计算机器协会主办的这一重大活动… hackernoon.com

翻译自: https://www.freecodecamp.org/news/why-you-should-use-gatsbyjs-to-build-static-sites-4f90eb6d1a7b/

什么叫静态构建版本号码