--- title: "#gatsbyjs articles | Hashnode" description: "Explore 53 articles tagged #gatsbyjs on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/gatsbyjs" --- Tag # #gatsbyjs 53 posts · 0 followers [Stella Josephine](https://hashnode.com/@stellajosephine) · [Jun 14, 2025](https://hashnode.com/posts/building-a-high-performance-contractor-website-with-react-gatsby-and-ssr/684dbcacfd5570874557c286) ### [Building a High-Performance Contractor Website with React, Gatsby, and SSR](https://mccancegroup.hashnode.dev/building-a-high-performance-contractor-website-with-react-gatsby-and-ssr?utm_source=hashnode&utm_medium=feed) Developing and Building a High-Performance Contractor Website with React, Gatsby, and SSR 5 min read · [mccancegroup.hashnode.dev](https://mccancegroup.hashnode.dev/building-a-high-performance-contractor-website-with-react-gatsby-and-ssr?utm_source=hashnode&utm_medium=feed) [Emeruche Cole](https://hashnode.com/@Cole_ruche) · [May 25, 2025](https://hashnode.com/posts/automating-the-generation-of-markdown-articles-wit-e34855dd/6833989289709149cdc88736) ### [Automating the generation of Markdown articles with Crosspost](https://coleruche.hashnode.dev/automating-the-generation-of-markdown-articles-wit-e34855dd?utm_source=hashnode&utm_medium=feed) Photo by Alexa Williams on Unsplash Today, it is not a new practice to use Markdown files as a data source for (statically generated) blogs. I use it to write on my blog, powered by Next.js and Vercel. It comes with a number of advantages: 1. Simplic... 6 min read · [coleruche.hashnode.dev](https://coleruche.hashnode.dev/automating-the-generation-of-markdown-articles-wit-e34855dd?utm_source=hashnode&utm_medium=feed) [Colby Fayock](https://hashnode.com/@colbyfayock) · [Jun 23, 2020](https://hashnode.com/posts/how-to-create-a-travel-bucket-list-map-with-gatsby-react-leaflet-graphcms/66b8e3580cedc1f2a4f7069b) ### [How to Create a Travel Bucket List Map with Gatsby, React Leaflet, & Hygraph](https://freecodecamp.org/news/how-to-create-a-travel-bucket-list-map-with-gatsby-react-leaflet-graphcms?utm_source=hashnode&utm_medium=feed) Traveling is fun and we all have a lot of places we want to visit, but rarely do we have time to do it all at once. That’s what bucket lists are for! How can we create a custom mapping app that we can show all of our the destinations on our bucket li... 13 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-create-a-travel-bucket-list-map-with-gatsby-react-leaflet-graphcms?utm_source=hashnode&utm_medium=feed) [Colby Fayock](https://hashnode.com/@colbyfayock) · [Apr 28, 2020](https://hashnode.com/posts/what-are-environment-variables-and-how-can-i-use-them-with-gatsby-and-netlify/66b8e38ec9bc6d235bb126b2) ### [What Are Environment Variables and How Can I Use Them with Gatsby and Netlify?](https://freecodecamp.org/news/what-are-environment-variables-and-how-can-i-use-them-with-gatsby-and-netlify?utm_source=hashnode&utm_medium=feed) When starting to integrate 3rd party services into your application or website, you'll start to find it useful to have different environments, such as a development and production environment. How can we configure this so we don't have to directly e... 8 min read · [freecodecamp.org](https://freecodecamp.org/news/what-are-environment-variables-and-how-can-i-use-them-with-gatsby-and-netlify?utm_source=hashnode&utm_medium=feed) [Colby Fayock](https://hashnode.com/@colbyfayock) · [Apr 22, 2020](https://hashnode.com/posts/how-to-add-coronavirus-covid-19-case-statistics-to-your-map-dashboard-in-gatsby-and-react-leaflet/66bee8e6bc07dbcebef938dc) ### [How to add Coronavirus (COVID-19) case statistics to your React map dashboard with Gatsby](https://freecodecamp.org/news/how-to-add-coronavirus-covid-19-case-statistics-to-your-map-dashboard-in-gatsby-and-react-leaflet?utm_source=hashnode&utm_medium=feed) Previously, we walked through creating a map that shows an interactive look at Coronavirus (COVID-19) cases per country. How can we extend this with some case statistics to show recent data about the impacts on our world? Author's note: Similar to be... 14 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-add-coronavirus-covid-19-case-statistics-to-your-map-dashboard-in-gatsby-and-react-leaflet?utm_source=hashnode&utm_medium=feed) [Colby Fayock](https://hashnode.com/@colbyfayock) · [Apr 8, 2020](https://hashnode.com/posts/how-to-set-up-a-custom-mapbox-basemap-with-gatsby-and-react-leaflet/66b8e36647c23b7ae1ad0bdb) ### [How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter](https://freecodecamp.org/news/how-to-set-up-a-custom-mapbox-basemap-with-gatsby-and-react-leaflet?utm_source=hashnode&utm_medium=feed) Building maps can be pretty powerful, but often you’re stuck with open source options for the map imagery that might not help the readability of your data. How can we leverage Mapbox’s tile APIs to add a custom basemap to our React Leaflet app? What... 9 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-set-up-a-custom-mapbox-basemap-with-gatsby-and-react-leaflet?utm_source=hashnode&utm_medium=feed) [Colby Fayock](https://hashnode.com/@colbyfayock) · [Mar 31, 2020](https://hashnode.com/posts/how-to-create-a-coronavirus-covid-19-dashboard-map-app-in-react-with-gatsby-and-leaflet/66bee92588139a9746c0c5cc) ### [How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet](https://freecodecamp.org/news/how-to-create-a-coronavirus-covid-19-dashboard-map-app-in-react-with-gatsby-and-leaflet?utm_source=hashnode&utm_medium=feed) The Coronavirus (COVID-19) pandemic has swiftly changed how all of us interact day to day. How can we use available APIs to build a mapping app that shows the impact it has had on the world? Update: The original NovelCOVID API v1 endpoint has been de... 12 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-create-a-coronavirus-covid-19-dashboard-map-app-in-react-with-gatsby-and-leaflet?utm_source=hashnode&utm_medium=feed) [Colby Fayock](https://hashnode.com/@colbyfayock) · [Mar 24, 2020](https://hashnode.com/posts/how-to-create-a-summer-road-trip-mapping-app-with-gatsby-and-leaflet/66b8e3556a98b2a27ee1f34a) ### [How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet](https://freecodecamp.org/news/how-to-create-a-summer-road-trip-mapping-app-with-gatsby-and-leaflet?utm_source=hashnode&utm_medium=feed) Get ready for the summer by building your own road trip mapping app with this step-by-step guide! What are we going to build? What do we need before we get started? Step 1: Cleaning up some unneeded code Step 2: Create our road trip locations Step 3... 14 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-create-a-summer-road-trip-mapping-app-with-gatsby-and-leaflet?utm_source=hashnode&utm_medium=feed) [Colby Fayock](https://hashnode.com/@colbyfayock) · [Dec 11, 2019](https://hashnode.com/posts/create-your-own-santa-tracker-with-gatsby-and-react-leaflet/66b8e32047e3b55b9fb6ee41) ### [How to Create your own Santa Tracker with Gatsby and React Leaflet](https://freecodecamp.org/news/create-your-own-santa-tracker-with-gatsby-and-react-leaflet?utm_source=hashnode&utm_medium=feed) The Christmas season is a magical time of year. We have Santa flying around spreading cheer and Elf roaming around New York during our yearly rewatch with family and friends. Buddy the Elf waving To get in the spirit, we’re going to spin up a web ap... 12 min read · [freecodecamp.org](https://freecodecamp.org/news/create-your-own-santa-tracker-with-gatsby-and-react-leaflet?utm_source=hashnode&utm_medium=feed) [freeCodeCamp](https://hashnode.com/@freeCodeCamp) · [Oct 31, 2019](https://hashnode.com/posts/build-a-developer-blog-from-scratch-with-gatsby-and-mdx/66d85219afbaabf7a144af04) ### [How to Build Your Coding Blog From Scratch Using Gatsby and MDX](https://freecodecamp.org/news/build-a-developer-blog-from-scratch-with-gatsby-and-mdx?utm_source=hashnode&utm_medium=feed) By Scott Spence I have been a Gatsby user since around version 0 back in May 2017. Back then, I was using a template called Lumen. It was just what I needed at the time. Since then I have gone from using a template to creating my blog. Over the year... 41 min read · [freecodecamp.org](https://freecodecamp.org/news/build-a-developer-blog-from-scratch-with-gatsby-and-mdx?utm_source=hashnode&utm_medium=feed)