Why we built Software.com with the Gatsby.js React Framework
We recently revamped our website www.software.com. We decided to rebuild everything from scratch using Gatsby, one of the most popular static site generators.
We’d like to share a few thoughts about why we chose Gatsby in the hope that we can help other developers who might be considering building a new website.
What is Gatsby?
Gatsby is a React framework for building static websites. Unlike dynamic sites, static sites are rendered client-side and don’t require a server-side application. They are often referred to as part of the JAMstack, a web development architecture built from JavaScript, APIs, and Markup that was first coined by Netlify CEO Mathias Biilmann.
Static sites offer many benefits over dynamic sites, such as faster performance, cheaper hosting, and ease of development. Static sites are also ideal for mobile-first indexing and page speed--two top ranking criteria for search engine optimization and top of mind for any UX designer.
Recently, Gatsby expanded into the hosting market with the introduction of Gatsby Cloud, making it a competitor to Netlify’s hosting platform. Instead of building and deploying with Netlify, you can now develop, build, and deploy your static web app all using Gatsby.
Our new stack for Software.com
We code with React and leverage the Material-UI framework to design and style our website pages.
Developed at Facebook, React is a popular open source JavaScript library for building user interfaces. Material-UI extends React by providing a set of popular React components for consistent styling across our website that implements Google’s Material Design.
Gatsby generates all of the static pages that make up our website. To do so, Gatsby takes our React-based templates, populates them with data and content from Markdown files and elsewhere, and generates HTML/CSS that we can then share with our website visitors.
Our source code is stored in a GitHub repository. New commits to that repository trigger builds on Netlify, which then deploys our website across its CDN.
Once deployed to Netlify’s CDN, software.com can be visited from users across the web.
All put together, our new stack looks like this:
Why we chose Gatsby
Before switching to Gatsby, we used a simple drag and drop site builder called Webflow. While great for quickly deploying a new site with frequently-changing designs, we felt it was often too constraining. We wanted the freedom to build our website any way that we wanted without limiting our creativity.
We took the opportunity to rebuild our website from scratch.
After researching a few different options, we settled on building our new website with Gatsby.
Why did we ultimately choose Gatsby? Here are a few reasons we made the switch:
- Reusable code, frameworks, and services
- Powerful site configuration options
- Fast and easy data querying with GraphQL
- Robust plugin ecosystem that makes it easy add site functionality
- Supported by a large community with tons of resources
- Open source and community-driven
- Strong performance, reliability, and security
Reusable code, frameworks, and services
We build our core products with React, Material-UI, and Netlify, so our team is comfortable with these development frameworks. We didn’t want to spend too much time or too many resources trying to learn new frameworks that would burden our team.
As a React-based static site generator that integrates well with Netlify, Gatsby overlaps with many of the tools and workflows that we use today.
By using a technology we already knew well, we were able to quickly and easily get started with Gatsby. We could even reuse code from our existing products by sharing styles, components, and more.
If you’re already deep in the world of JavaScript and React, or even Netlify and static sites, building with Gatsby is a natural next step.
Powerful site configuration options
Software.com is a complex site, and will only get more complex over time. It includes a landing page, blog, product pages, and more.
In designing our new stack, we wanted to avoid picking a tool that assumes too much about our website structure or would be too rigid to grow with us as we scale.
Gatsby gives us granular control over the structure and layout of our website.
Through gatsby-node.js, one of Gatsby’s configuration files, we are able to use JavaScript to specify what pages should be built and what templates to use. That means our website builds itself according to the explicit instructions we give to Gatsby.
For example, we create pages for every code editor that lists plugins from Software that are available for that editor. If you visit www.software.com/code-editors/visual-studio-code, you can view our Visual Studio Code plugins, Code Time and Music Time.
To build these pages, we import a file containing information about each code editor—like name, slug, and marketplace link—and pass that data into a template. Gatsby generates ~20 custom pages that highlight each editor from the code below:
const editorsData = require("./src/data/editors.json");
const editorsTemplate = path.resolve("./src/templates/EditorTemplate.js");
editorsData.forEach(page => {
createPage({
path: page.slug,
component: editorsTemplate,
context: {
slug: page.slug,
},
});
});
Programmatically building our website makes for a positive developer experience that gives us complete control over the final layout and structure of our website.
Fast and easy data querying with GraphQL
In addition to being able to build pages with JavaScript, we can access any of our website’s data on any page through GraphQL.
GraphQL is a query language that lets you easily find data in your codebase that can be used on any webpage. For example, GraphQL can dig through markdown files to return the titles of all of our blog posts within a specific data range in descending order.
In our blog post template, we call the following query to programmatically add content from Markdown files to each created article:
query ArticleTemplate($slug: String!) {
markdownRemark(frontmatter: { slug: { eq: $slug } }) {
id
frontmatter {
title
publishDate
slug
description
}
html
}
}
As you can see from the query above GraphQL query syntax is surprisingly elegant.
GraphQL will also return requested data with exactly the same structure as the query. That makes it easy to request and parse through your website content. Getting the article title from the query results in the example above is as simple as data.markdownRemark.frontmatter.title.
In addition to pulling data from Markdown files, GraphQL lets you query for static assets. If you have a folder for your website’s images, you can query for and use those images on any page.
You can also use GraphQL anywhere in your Gatsby project. That makes your code more flexible and modular.
GraphQL can be intimidating at first, but Gatsby includes a built in IDE called GraphiQL that we use extensively to test our queries.
After practicing our GraphQL skills with GraphiQL, we quickly learned how powerful GraphQL can be and how pleasant it is to use.
Robust plugin ecosystem that makes it easy add site functionality
Gatsby is backed by an incredibly rich community-driven plugin ecosystem that makes it easy to add new functionality to any website.
With open source plugins, we can manage SEO, responsive images, sitemap generation, RSS feeds, and more.
Adding a plugin to a Gatsby project is incredibly simple, too. You can browse thousands of plugins directly on the Gatsby website. You can then install plugins with npm as you would any other module for a JavaScript project.
Most plugins include tons of configuration options, which can be adjusted in gatsby-config.js, a structured file to edit plugin settings.
A few key plugins that we use:
- gatsby-transformer-sharp: Helps you process images in GraphQL queries, including resizing, cropping, and creating responsive images.
- gatsby-transformer-remark: Parses markdown files to make content and frontmatter available on web pages.
- gatsby-remark-images: Processes images in markdown. Most of our blog posts contain images interspersed with text, so this plugin handles it all.
- gatsby-plugin-react-helmet: Lets you build your document head using a React component. Adding title, meta attributes, and open graph to your site helps with SEO and sharing.
- gatsby-plugin-material-ui: Simple plugin that makes it easy to use Material-UI on any web page.
- gatsby-plugin-sitemap: Automatically builds a sitemap for your website, which is necessary for SEO.
- gatsby-plugin-robots-txt: Lets you specify how to build your robots.txt file from gatsby-config.js.
Gatsby also works with dozens of third-party CMS services, like Contentful, Strapi, and GraphCMS. With a headless content management system, we can store assets like images and blog content in a separate service. Whenever we want to use that content, Gatsby’s plugins make it easy to access that data with APIs through its GraphQL queries.
Supported by a large community with tons of resources
Gatsby has a large community of developers that use it in a wide variety of projects.
Whenever we had questions about how to implement a feature in Gatsby, we were usually able to find answers in the Gatsby repository, Gatsby documentation, or Stack Overflow.
Gatsby also has hundreds of starters with different configurations to demonstrate how to make the most of Gatsby. Nearly 300 Gatsby starters demonstrate how to add new features to a Gatsby website, like a CMS, authentication service, or pagination.
When documentation couldn’t answer our questions, we frequently turned to open source examples of other websites.
On the Gatsby website, we also found a showcase of sites from around the web that use Gatsby. We enjoyed browsing through these to see how other developers had built their own websites, from personal blogs to startups and everything in between.
We recently added our site to the showcase and recommend others do the same!
Open source and community-driven
We like open source software because it gives us more control over our content and code. Even our own code editor plugins are open source so that anyone can look through our code.
We like that Gatsby is open source software under the MIT License. If we ever wanted to switch hosting providers or change any part of our development stack, we have full control over doing so.
Similar to other open source projects, Gatsby considers input and feedback from the community. With 2,500+ contributors, we’re excited to support Gatsby’s community-driven growth.
Moreover, when using Gatsby, we can store much of our content as Markdown files. Markdown is a widely-accepted content format, so we always have the option to switch frameworks (like another site generator) or tools if we need to at some point in the future.
Strong performance, reliability, and security
When implemented correctly, Gatsby websites can boost site performance and reliability while eliminating security issues.
Static pages generated by Gatsby are deployed to a CDN that distributes web pages to website visitors. CDNs can deliver content very quickly and don’t depend on your ability to set up a properly configured server to ensure uptime and sufficient bandwidth. That’s not to say that traditional server-based websites can’t be fast—but Gatsby and Netlify make it easy to build blazing-fast websites with minimal overhead.
A fast loading site creates a better user experience and is great for SEO.
Moreover, server-based apps—like WordPress or Drupal—can be vulnerable to security bugs and often need to be upgraded with the latest security patches. That leads to more overhead for developers. Take, for example, a recent plan by WordPress to forcibly upgrade websites running older versions of its software—totaling about 3% of the internet.
Sites built with Gatsby simply serve static pages—mostly HTML, CSS, and JavaScript—that does not depend on potentially vulnerable server software. Worrying less about security issues gives us more time to build what matters most to us.
Speed bumps we encountered
Gatsby is a powerful tool. With any powerful too, you’re likely to encounter a few hiccups along the way.
A few things to consider on your Gatsby journey:
Climbing the learning curve
When we first started building with Gatsby, we were a bit overwhelmed trying to parse through configuration files, plugins, and queries.
If you’re building a basic blog or webpage, you can usually survive without completely understanding the finer details of how Gatsby works. Gatsby’s documentation and starter sites cover a lot of different use cases, so you don’t necessarily need to learn how to build everything from scratch.
If you want to build something more complex, we recommend taking some time to get familiar with Gatsby’s inner workings. That means becoming proficient with GraphQL, mastering Gatsby’s configuration files, and learning more about Gatsby’s APIs.
Fortunately, Gatsby comes with a number of great starters to look through if you get lost. Some resources we found helpful:
- Gatsby Tutorial
- Gatsby Theme Tutorial
- Gatsby Image Tutorial
- Gatsby Comparisons to Next, Jekyll, Hugo, and Nuxt
- Awesome Gatsby Resources
- Gatsby Advanced Starter
- Gatsby Universal Starter
Fixing build bugs
We’ve encountered a few quirks with Gatsby’s build process that can be challenging for beginners.
Gatsby includes hot-reloading, where edits you make to your website can be previewed instantaneously in a local development environment. That speeds up development quite dramatically, but we sometimes found ourselves needing to kill the environment and restart to clear odd behavior.
In addition, to speed up local builds, Gatsby creates a cache that stores data and content that can be reused. On a few occasions, we found we needed to delete Gatsby’s cache to “fix” an elusive bug. That can be frustrating for new users who might not know how Gatsby’s build process works or how to delete its cache.
We recommend getting familiar with Gatsby’s clean command to wipe out the cache and public directories.
What’s next
After building the first version of our website, we’re excited to see what we can do with Gatsby next.
We’re planning on expanding our website with new product launches over the next year. If you’d like to try out our current developer tools, you can check them out here:
- Code Time: open source plugin for automatic programming metrics, including time tracking, right in your editor
- Music Time: use data and AI to discover the most productive music to listen to as you code
- Source: weekly newsletter that provides a strategic summary of the developer world in ten minutes or less
