This month Gatsby turned 5-years-old. 🎉
And what a way to mark a birthday – during the same period Gatsby hit the special milestone of having over 2000 plugins. And 500 of them are source plugins (thanks for noticing Chris Ellis). So for whatever your use case, for whatever your data source, there’s a Gatsby plugin that can get you up-and-running quickly. And if you need inspiration for your project, GitHub lists over 200 thousand sites that use Gatsby as a dependency!
In May we also announced our series B round of funding round. This investment will help us double down on changing the way the web is built. We’ve already made Gatsby work better for large and media rich sites. You can keep tabs on Gatsby’s progress at Will It Build, a new benchmarking site that showcases sub-10-second builds for projects of different sizes and data sources.
🚀 New in Gatsby & Gatsby Cloud
Strapi Instant Preview
Your content editors can now enjoy “instant preview” with Strapi and Gatsby Cloud! If you’re new to Strapi, it’s a JavaScript-based, open source CMS. and a great pair for Gatsby projects. The Gatsby starter the Strapi team made for this project is gorgeous 😍.
Give Strapi a try with this step-by-step tutorial.
Faster, and Faster Builds
The nice thing about running your project on Gatsby Cloud is that you can go to sleep, wake up, and your site builds have gotten faster without you having to do anything. We’re like a CI/CD tooth fairy.
For example, Agility CMS is seeing 5 second builds for their own 500-page website! How can this be? Some say it’s unicorn magic.
Again, you can take a peek at our build time benchmarks at Will It Build.
Faster, and Faster Websites
Fast builds are a great experience for your website’s editor, but what about your end-users? The only speed they care about is loading times.
Thanks to a collaboration with the Chrome team, we’ve made Gatsby sites more performant – again, without you having to make any changes.
How? By bundling a dependency that is used in at least 2 pages, Gatsby can chunk them together so you don’t have to download duplicate libraries over and over again.
This won’t benefit first-page load, but it improves page navigation as your site needs less JavaScript for the next route. Gatsby projects like Ghost’s website saw a 35% reduction in the overall JavaScript they shipped to browsers.
Faster, and Faster Configuration
When we launched the alpha of Gatsby Recipes in April, it caused a stir in the Web Development community. Immediately many of you understood the potential of Recipes and our vision to make configuring a website as fast and painless as possible.
If you missed the initial launch, Paul Scanlon can bring you up-to-speed with “Gatsby Recipes – What’s All the Fuss About?”. Also, since the launch there’s been an avalanche of official and community made Recipes, including scripts for configuring:
- React libraries like React Helmet and Preact
- Themes and Starters, like gatsby-theme-blog and gatsby-theme-notes-starter
- Advanced configs, like headless WordPress and Progressive WebApps
Learn how to develop your own Gatsby Recipes from the Gatsby Recipes README. And if you’re looking for ideas, I could really use a Recipe that spins up placeholder sites for all of the unused domains I purchased last year. And for all of the domains I’m going to purchase – and not use – this year.
TypeScript Support
Gatsby loves the TypeScript community. When you pass one of them, you know exactly what type of person you’re dealing with.
This month we made the Gatsby TypeScript plugin part of core Gatsby, so you no longer need to install it to enable TypeScript support in your project. Read our updated TypeScript docs and the Pull Request that enacted this change (https://github.com/gatsbyjs/gatsby/pull/23547). Also join the Twitter conversation.
GraphQL Tracing
In may we continued to improve our error messaging (see example here and here). But what about slow GraphQL queries? Well, Gatsby now supports performance tracing using the OpenTracing standard. You can to enable tracing for GraphQL queries. This is useful because it allows you to debug why querying may be slow in your Gatsby project.
👩🏽🚀 New in the Gatsby Community
Gatsby Days is June 2 – 3
Register to attend our first ever Virtual Gatsby Days!
We have a superb lineup of speakers from the Gatsby community. And you’ll hear from Gatsby co-founder Kyle Mathews about what’s coming next.
Speaking of Kyle…
Changelog Podcast: Gatsby’s Road to Incremental Builds
Jerod Santo interviewed Kyle for the Changelog podcast. Kyle took a deep dive on how Gatsby decides which features should be in open source, and which features can be enabled by Gatsby Cloud.
Gatsby Web Creators
Over on YouTube and Twitch, Gatsby engineers Aisha Blake and Marcy Sutton continued the Web Creator series with episodes on JavaScript fundamentals and building an interactive UI.
If you know someone who is new to Web Development, point them to Gatsby Web Creators for a fun introduction to the basics!
Building an Accessible Gatsby Site
For current web professionals, Marcy livestreamed a session on making websites that everyone can access and use. In her tutorial, you’ll learn the fundamentals of building a Gatsby site with web accessibility in mind, from the basics to more advanced techniques and requirements. You’ll get a tour of how to build and test inclusively with HTML, CSS, and JavaScript as applied in a Gatsby site.
Gatsby Community Kudos
Thank you Sethu Sathyan for rapidly building Startups vs COVID-19 and for teaching others with your article, “How to build a website using Gatsby & Airtable in 30 mins”.
Thank you Andres Alvarez for choosing Gatsby for your first open source PR! Your table of contents for the API reference pages will benefit thousands of readers. And thank you Adam Millerchip for making your first Gatsby PR and fixing a common hiccup developers were having with our documentation.
Thank you Brian Han for noticing and using our built-in a11y linting. Your shout out is appreciated by the Gatsby team, and increases awareness for a11y in Web Development.
Thank you Akuoko Daniel Jnr for helpful your article, “Increasing Website Performance With Gatsby Plugins”. The recommendations in your article would make a great Gatsby Recipe! ?
And special thanks to our long time community member, Horacio Herrera for making a site to teach Gatsby to Web Developers in Spanish. We appreciate you!
🪐 New in the Gatsby Ecosystem
Gatsby Themes & Plugins
Many exciting Gatsby Themes and Plugins premiered in May. There was Gatsby Theme Catalyst, Eric Howey exciting exploration in theme architecture. Aravind Balla launched gatsby-theme-andy, an ambitious theme for power note-taking. And Trevor Harmon dropped gatsby-theme-shopify-manager, a living demonstration of the talk he delivered at Gatsby Days LA, “Sell Things Fast With Gatsby and Shopify”.
All of the Gatsby Themes above are worth using and studying to accelerate your own work!
Azure Static Web Apps
Microsoft debuted Azure Static Web Apps at the Build Conference, and we’re excited to see provide first-class support for Gatsby projects. Follow along our new doc so you can deploy your Gatsby site to Azure.
GraphQL for WordPress is growing!
WPGraphQL, a WordPress plugin Gatsby proudly supports, recently passed 40,000 downloads, and the Slack community now tops 1,000. We love the enterprise use cases we’re seeing from developers who’ve adopted WPGraphQL for their projects!
MDX v2 is coming
Another open source project Gatsby supports, MDX has announced the changes you can look forward to in version 2. You can follow the progress of v2 with this umbrella issue at the MDX repo.
New Gatsby Starter and Podcast from Contentful
Our friends at Contentful developed an official Gatsby starter that you can use for blogging. The team over there also produce a new podcast on Web Development, and they recently had an episode about Gatsby.
🙂 What a month!
May was an incredible month for Gatsby, our community, and the entire ecosystem! But June will be even more exciting! Register for Gatsby Days and you’ll hear about all of the new products and features we have coming this year.