什么叫靜態構建版本號碼

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