Preparing a Site to Go Live

    • create new Gatsby sites
    • create pages and components
    • style components
    • add plugins to a site
    • source & transform data
    • use GraphQL to query data for pages
    • programmatically create pages from your data

    In this final section, you’re going to walk through some common steps for preparing a site to go live by introducing a powerful site diagnostic tool called Lighthouse. Along the way, we’ll introduce a few more plugins you’ll often want to use in your Gatsby sites.

    Quoting from the :

    Lighthouse is included in Chrome DevTools. Running its audit — and then addressing the errors it finds and implementing the improvements it suggests — is a great way to prepare your site to go live. It helps give you confidence that your site is as fast and accessible as possible.

    Try it out!

    First, you need to create a production build of your Gatsby site. The Gatsby development server is optimized for making development fast; But the site that it generates, while closely resembling a production version of the site, isn’t as optimized.

    • Stop the development server (if it’s still running) and run the following command:
    • View the production site locally. Run: Once this starts, you can view your site at http://localhost:9000.

    Run a Lighthouse audit

    Now you’re going to run your first Lighthouse test.

    • If you haven’t already done so, open the site in Chrome Incognito Mode so no extensions interfere with the test. Then, open up the Chrome DevTools.

    • Click on the “Audits” tab where you’ll see a screen that looks like:

    • Click “Perform an audit…” (All available audit types should be selected by default). Then click “Run audit”. (It’ll then take a minute or so to run the audit). Once the audit is complete, you should see results that look like this:

    As you can see, Gatsby’s performance is excellent out of the box but you’re missing some things for PWA, Accessibility, Best Practices, and SEO that will improve your scores (and in the process make your site much more friendly to visitors and search engines).

    Add a manifest file

    But first, what exactly are PWAs?

    They are regular websites that take advantage of modern browser functionality to augment the web experience with app-like features and benefits. Check out of what defines a PWA experience.

    Inclusion of a web app manifest is one of the three generally accepted baseline requirements for a PWA.

    Quoting :

    Gatsby’s manifest plugin configures Gatsby to create a manifest.webmanifest file on every site build.

    • Install the plugin:

    • Add a favicon for your app under src/images/icon.png. For the purposes of this tutorial you can use , should you not have one available. The icon is necessary to build all images for the manifest. For more information, look at the docs for gatsby-plugin-manifest.

    That’s all you need to get started with adding a web manifest to a Gatsby site. The example given reflects a base configuration — Check out the for more options.

    Another requirement for a website to qualify as a PWA is the use of a service worker. A service worker runs in the background, deciding to serve network or cached content based on connectivity, allowing for a seamless, managed offline experience.

    makes a Gatsby site work offline and more resistant to bad network conditions by creating a service worker for your site.

    ✋ Using gatsby-plugin-offline

    • Install the plugin:
    • Add the plugin to the plugins array in your file. That’s all you need to get started with service workers with Gatsby.

    Add page metadata

    React Helmet is a package that provides a React component interface for you to manage your .

    Gatsby’s react helmet plugin provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds.

    • Install both packages:
    • Make sure you have a description and an author configured inside your siteMetadata object. Also, add the gatsby-plugin-react-helmet plugin to the plugins array in your gatsby-config.js file.

    • In the directory, create a file called seo.js and add the following: The above code sets up defaults for your most common metadata tags and provides you an <SEO> component to work with in the rest of your project. Pretty cool, right?

    • Now, you can use the <SEO> component in your templates and pages and pass props to it. For example, add it to your blog-post.js template like so: The above example is based off the . By passing props to the <SEO> component, you can dynamically change the metadata for a post. In this case, the blog post title and excerpt (if it exists in the blog post markdown file) will be used instead of the default properties in your gatsby-config.js file.

    Now, if you run the Lighthouse audit again as laid out above, you should get close to—if not a perfect— 100 score!

    In this section, we’ve shown you a few Gatsby-specific tools to improve your site’s performance and prepare to go live.

    Lighthouse is a great tool for site improvements and learning — Continue looking through the detailed feedback it provides and keep making your site better!

    Next Steps

    Official Documentation

    • Official Plugins: The complete list of all the Official Plugins maintained by Gatsby.

    Official Starters

    Well, not quite; just for this tutorial. There are Additional Tutorials to check out for more guided use cases.

    This is just the beginning. Keep going!

    • Did you build something cool? Share it on Twitter, tag , and @mention us!
    • Did you write a cool blog post about what you learned? Share that, too!
    • Contribute! Take a stroll through on the gatsby repo and become a contributor.

    Check out the docs for even more ideas.

    We can’t wait to see what you do 😄.