Gatsby was named the #1 new technology to learn in 2020!
To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.
Over 3,000 web developers have registered for the challenge! Learn more about #100DaysOfGatsby here!
This week’s challenge invites you to add images to your blog and learn about a popular and powerful Gatsby feature,
But what good is a blog without beautiful images? We want you to use the resources section below to add auto-optimized images to your markdown blog posts!
Now it’s time to get direct experience using the
ImgReact component provided by
gatsby-image! Create an about page using JSX, then use the gatsby-image API to transform a normal selfie into a square, black-and-white image.
Bonus: Take note of the build times for your site before and after you add images to your project. Also, record the performance of specific pages with images, using a tool like Lighthouse. As a Gatsby Developer you should be aware of how images affect your site’s production and user experience.
Follow this tutorial that explains how to add images to your markdown-based pages. After you configure your site as outlined, Gatsby will auto-optimize your images for you.
Depending on your experience with Gatsby and React, this may be the hardest challenge we’ve given you. So, if you get stuck, please ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, Spectrum, and Dev.
Have fun! We can’t wait to see what you build!