How to build a Markdown plugin for your Gatsby blog (blog.logrocket.com)
Oct 06, 2020
In this article, you’ll learn how to build a Markdown plugin for your Gatsby blog. As an example, we’ll build a text highlighting plugin so that when it finds a specified syntax that you’ve defined around a text, it processes it into a styled HTML that displays the text as highlighted.
Advanced GraphQL Usage In Gatsby Websites (smashingmagazine.com)
Sep 16, 2020
In this article, Aleem Isiaka explains what GraphQL query constructs are, and how they can be used to interact with the data access layer of a Gatsby website. Let’s take a look at some of the advanced use cases of GraphQL within a Gatsby website by using matching data from different sources.
Understanding Plugin Development In Gatsby (smashingmagazine.com)
Jul 06, 2020
Gatsby is a modern static-site generator that has revamped the way static websites are being built. It incorporates React, Node.js, and GraphQL to create stunning and blazing-fast websites. In this post, we will discuss Gatsby plugins and develop our own comment plugin.
Migrating from Gatsby to Next.js (blog.logrocket.com)
Jun 16, 2020
Like a lot of developers, I like to use my blog as a personal playground to try out the latest technologies. My blog was written in Gatsby, but recently I migrated it to Next.js. In this post, I’m going to talk about my experience, what went well, and what didn’t.
How To Use Netlify Forms With Gatsby (dev.to)
Mar 01, 2020
Using Netlify's built-in form handling with Gatsby should be simple and intuitive, but sadly it's not that simple. Well it is, it just requires some extra configuration not detailed in the documentation. So let’s get started!
Handling Images in Gatsby with High Performance (scotch.io)
Feb 19, 2020
Gatsby, an open-source tool for building high-performance JAMstack apps, boasts numerous plugins that extend its capabilities. For example, by leveraging source plugins in Gatsby, you can source data from multiple services, APIs, and even Excel spreadsheets.
Using React Hooks in Gatsby (alligator.io)
Jan 22, 2020
Get Your JAM on With Gatsby, React, and Netlify (scotch.io)
Jan 13, 2020
Gatsby is a tool for creating static websites with React. It allows you to pull your data from virtually anywhere: content management systems (CMSs), Markdown files, APIs, and databases. Gatsby leverages GraphQL and webpack to combine your data and React code to generate static files for your website.
Exploring TinaCMS with Gatsby (alligator.io)
Jan 13, 2020
TinaCMS, when coupled with Gatsby, gives us to ability to manipulate our markdown files directly on our pages, visually. TinaCMS also works with Next.js, but here we’ll explore this powerful new tool with a Gatsby site.
Gatsby and WordPress (css-tricks.com)
Dec 30, 2019
Gatsby and WordPress is an interesting combo to watch. On one hand, it makes perfect sense. Gatsby can suck up data from anywhere, and with WordPress having a native REST API, it makes for a good pairing.
How to Get the Current Page URL in Gatsby (css-tricks.com)
Dec 20, 2019
This seemingly simple task had me scratching my head for a few hours while I was working on my website. As it turns out, getting the current page URL in Gatsby is not as straightforward as you may think, but also not so complicated to understand.
Internationalized Navigation Menu in Gatsby.js (alligator.io)
Dec 09, 2019
In a previous post, Creating a multilingual website with Gatsby, I built kodou.me. Kodou has a Japanese and and English version. The post was a bit long so I didn’t talk about some of the utilities I used and how to build the site’s navigation menu.
Creating a Multilingual Website with Gatsby & Cosmic JS (alligator.io)
Dec 06, 2019
A friend recently asked me to build a website which has a Japanese and an English version. I never wrote an internationalized website but I have strong opinions about how localization should work. So here is one way to approach internationalization in Gatsby using Cosmic JS, a headless CMS.
Quick Guide to Using Gatsby's useStaticQuery Hook (alligator.io)
Dec 04, 2019
The useStaticQuery React Hook was added to Gatsby.js starting with version 2.1.0, and it’s an incredibly convenient way to make (build-time) GraphQL queries from any component within a Gatsby site. In this quick lesson, we’ll go over how to implement useStaticQuery in your project!
Custom Fonts in Gatsby (alligator.io)
Oct 21, 2019
Choosing the right font can add great value to a site and enhance the user experience. The right font-loading strategy, however, can be somewhat of a challenge. That’s why Gatsby provides several developer-friendly solutions for all of our font-loading needs.
MobX and Gatsby (dougwaltman.com)
Oct 17, 2019
I've been moonlighting Gatsby projects in my free time for a couple of years now, while working with Next.js during the day. I've come to love MobX state management with Next, and wanted to bring the goodness to my Gatsby projects. Turns out that it's pretty easy, and I'm going to share the approach I took in a recent project.
Embedding Videos in Your Gatsby.js Sites (scotch.io)
Oct 08, 2019
The process of adding images is more or less the same. However, videos and GIFs are one level up which is rendered/embedded differently in various web applications, and the embedding process may vary from one framework to another.
Gatsby vs Next.JS - What, Why and When? (dev.to)
Sep 25, 2019
Ok firstly, I digress, I am a massive fan of both of these "frameworks". I can usually be seen gushing about them on my Twitter or Instagram, however, without a doubt, the question I get asked the most when talking about these tools is which is better? Should I use Next.JS? But I have heard Gatsby is pretty 🔥, maybe I should use that?
Using Plugins in Gatsby (alligator.io)
Aug 28, 2019
One of the biggest features of Gatsby.js is their incredible official plugin library. This large collection of Node.js packages taps directly into the Gatsby API, and provides easy ways to extend/add custom functionality to Gatsby websites without adding much extra code. In this short article, we’ll cover the basics of finding and implementing these plugins.
Intro to MDX in Gatsby (alligator.io)
Aug 15, 2019
In this article we’ll explore the basics of MDX with Gatsby, including some introductory techniques to help you start using it right away.
Blazing Fast WordPress Sites With Gatsby (scotch.io)
Jul 31, 2019
Gatsby CLI Quick Reference (alligator.io)
Jul 31, 2019
When working with Gatsby.js, we constantly make use of its built-in command line interface (CLI.) This essential tool allows us to do things like creating new projects from starters, launching a dev server with hot-reloading, and generating production builds. Here’s a quick reference guide to help you use it like a pro!
Working with Images in Gatsby (alligator.io)
Jul 30, 2019
Ensuring that users get the best experience with images on the web can be a tedious task. However, with Gatsby, we can leverage the power of Sharp to get the best performance with a little setup and a rich toolset.
Using Airtable With Gatsby (alligator.io)
Jul 22, 2019
Airtable is a cloud-based collaborative database-spreadsheet hybrid application. It offers a flexible and intuitive GUI, reasonable prices, and a full REST API with excellent auto-generated documentation. It also works great as a data source for Gatsby.js, and I’m excited to show you how!
Using styled-components in Gatsby (alligator.io)
Jul 10, 2019
When creating a new Gatsby.js project, there are several available options for styling. styled-components is one of the most popular CSS-in-JSS solutions, and for good reason. It’s powerful, easy to learn, and it works flawlessly with Gatsby. Let’s explore how to add it into your project!
Gatsby.js - A powerful Static Site Generator (robinwieruch.de)
Jul 08, 2019
Not long ago, most people argued against a framework like React, Angular or Vue for your personal website. Since then, tools on top of these frameworks – like Gatsby.js for React.js – emerged to make static website development effortless. So if there is no actual demand, why does a static website generator like Gatsby.js do so well?
How to build a custom GatsbyJS theme (blog.logrocket.com)
May 21, 2019
Gatsby is a static site generator that is built with React.js, Webpack, and GraphQL. It is used for building very fast websites that have relatively static content, for example, blogs, eCommerce websites, and even company websites.
How to create a searchable log with Gatsby (medium.freecodecamp.org)
May 16, 2019
I recently wanted a way to quickly jot down things I learn throughout the day, or lessons I want to keep in mind. But that’s not enough — I also need to be able to search these logs so I can find exactly what I’m looking for right away. That’s exactly what I’m going to show you how to build today.
How to Build a Documentation App With Gatsby and Cosmic JS (hackernoon.com)
Feb 15, 2019
Documentation?… Documentation. Let’s say for a second that you want to create a way to easily publish and read docs, err… documentation. By the end of this read you will be able to do just that, all with the power of Gatsby (a static site generator) and Cosmic JS (an easy to setup and use Content Management System).
Why Themes? (gatsbyjs.org)
Jan 31, 2019
As some of you might have heard (or hoped), we’re working on adding theme support to Gatsby. This blog post is a short intro into how we’re thinking about themes for Gatsby.
Announcing new Gatsby Company (gatsbyjs.org)
May 24, 2018
Together with my co-founder, Sam Bhagwat, I’m thrilled to announce the formation of Gatsby Inc. Based on the open source project Gatsby I founded, Gatsby the company will make feature-rich and blazing-fast websites easier to build and run.