Welcome to the fifth — and final — phase of #100DaysOfGatsby, Gatsby’s guided coding challenge for 2021!
In the BRIEFING story below, you are “Dev”, the newest hire at AudioC0RE, a fictional headphone sharing startup. You have just completed your fourth sprint in your Gatsby website building project: launching a company merch/swag shop on the website, powered by Shopify.
Ready for your next assignment? You have three weeks to fulfill the requirements given to you in Briefing 5 and bring the project to a close. Along the way, the Gatsby team and community will assist you in the following ways:
HELP — April 2nd. Visit Gatsby’s GitHub Discussion forum to share your in-progress work, ask questions, and share resources.
SOLUTION — April 8th. Join our coding livestream on YouTube to learn Gatsby best practices and discover ways you could have completed the challenge!
SUCCESS — April 12th, Day 100! When you complete Challenge 5, you have finished the #100DaysOfGatsby 2021 initiative 🎉🎉🎉 Congratulations on a job well done and new skills unlocked! Proceed to the #100DaysOfGatsby Finish Line post on the Gatsby blog for next steps.
Briefing 5: Create a Gatsby Theme
Good work on launching the AudioCORE Swag Store on the website during the last sprint, Dev! We are making almost as much on t-shirt sales as we are on AudioCORE products. Maybe more. But no worries, being profitable isn’t necessary for every startup!
Dev, your work on our new site has been outstanding. We want the site to continue to grow along with the company. What this means for you: for this final sprint, I want you to create a Gatsby Theme to make scaling the AudioCORE website a consistent, rapid process.
Gatsby Themes are pre-built, installable packages for setting up a site’s default styling, components, plugins, and overall configuration that can be reused across multiple Gatsby sites. They’re a great way to simplify the early steps of configuring a new site. When it’s time to update each individual site’s styling or functionality, you only have to edit your single theme — or even swap it out entirely with another compatible theme. Not that we would, we love the work you have done so much!
Gatsby themes allow Gatsby site functionality to be packaged as a standalone product for others (and yourself!) to easily reuse. Using a traditional starter, all of your default configuration lives directly in your site. Using a theme, all of your default configuration lives in an npm package.
Dev, here are more details on your requirements:
- Read the background information on your brief on our What Are Gatsby Themes? page and this blog post by Gatsby contributor Eric Howey describing how he built his first Theme.
- Follow the step by step instructions in the “Building Themes” section of Gatsby Documentation.
- When complete, publish your Theme to the npm (node package manager) library so others can use it!
(To simplify things, you can choose to start with an existing Gatsby theme — e.g. the blog theme or notes theme — by updating the styling or adding functionality. Or you can abstract the functionality you built in an earlier challenge — such as the store, the blog, or the contact page — into a theme. If you would like to see some other Gatsby Themes that devs just like you have created, visit our Themes showcase).
Here are some resources with detailed instructions on how to build a Gatsby theme:
- Video tutorial, Laurie Barth on Learn With Jason: “Creating a Theme from a Gatsby Site”
- Accompanying blog post with code samples: “How to Turn Your Existing Gatsby Site into a Theme” by Laurie Barth
- Free course on Egghead.io: “Gatsby Theme Authoring”
Congratulations on completing your onboarding at AudioCORE, Dev! Wondering if maybe you can help me update my MySpace page now…?
Wanna keep climbing the learning curve? We are giving away free one-year subscriptions to egghead.io! Head over to Gatsby’s egghead giveaway page to find out more. Entries must be received by April 2nd.