How I Built My Blog Using Gatsby and Netlify

As a web developer, I‘ve built many websites over the years using a variety of different technologies and frameworks. Recently, I decided it was time to create a personal blog to share my thoughts and experiences with web development. After researching the options, I settled on using Gatsby to generate the static site and Netlify to deploy and host it.

In this post, I want to explain what drew me to Gatsby and Netlify for my blog, walk through the process of building the site, and share my thoughts on the overall experience. My goal is to provide a helpful guide and reference for other developers who may be considering using Gatsby and Netlify for their own projects.

What are Gatsby and Netlify?

Before we dive in, let me give a quick overview of what Gatsby and Netlify are all about.

Gatsby is a static site generator built with React and GraphQL. It allows you to pull in data from various sources (APIs, databases, CMSs, Markdown files, etc.), create pages and components with React, and output a fully static website that can be deployed anywhere. What drew me to Gatsby is its excellent performance, rich plugin ecosystem, and smooth developer experience.

Netlify is an all-in-one platform for deploying and hosting static websites. It connects to your Git repository and automatically builds and deploys your site whenever you push changes. Netlify also provides a bunch of other handy features like form handling, serverless functions, split testing, and more. I was attracted to Netlify for the simplicity and power of its continuous deployment pipeline.

Setting Up a New Gatsby Site

The first step in my journey was to set up a fresh Gatsby site to serve as the foundation for my blog. Gatsby has an excellent CLI tool that allows you to quickly bootstrap a new site from one of their official starter templates.

Since I wanted to focus on writing content and not spend a ton of time on design up front, I chose to start with the official Gatsby starter blog template. This gave me a basic homepage, blog post template, and a few other pages to begin with. To create my site, I ran the following command:

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

This command tells Gatsby to create a new site in a directory called my-blog-starter, using the files from the gatsby-starter-blog repository on GitHub as a template.

Once the command finished, I had a fully functional Gatsby site on my local machine. To start the development server and see my site in action, I navigated to the directory and started things up:

cd my-blog-starter
gatsby develop

And with that, I had a hot-reloading local development environment up and running! Gatsby starts a development server at localhost:8000 that I could open in my browser to view the site.

Configuring Gatsby to Read My Blog Posts

Now that I had a basic Gatsby site up and running, it was time to feed in my actual blog post content. I‘m a big fan of writing in Markdown, so I planned to author all my posts as Markdown files.

Gatsby has a plugin called gatsby-transformer-remark that can parse Markdown files into HTML and make them available for querying via GraphQL. To set this up, I first installed the necessary dependencies:

npm install --save gatsby-transformer-remark gatsby-source-filesystem

The gatsby-source-filesystem plugin allows Gatsby to access files on my local filesystem, which is necessary for reading the Markdown files.

Next, I added the following configuration to gatsby-config.js in the root of my site:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/content`,
      },
    },
    `gatsby-transformer-remark`,
  ]
}

This tells Gatsby to look for files in a content directory at the root of the site and to use gatsby-transformer-remark to parse any Markdown files it finds there.

With that set up, I could start dropping my Markdown blog posts into the content directory, and Gatsby would automatically convert them into HTML and make them available at build time.

Creating the Blog Post Template

With my content being pulled in, I now needed to create a template to display each individual blog post. Gatsby uses a query language called GraphQL to fetch data into its components. It allows you to declaratively specify the data a component needs and Gatsby will make sure that data is available when the component renders.

To show a blog post, I created a new file called blog-post.js inside the src/templates directory in my site. Here‘s a simplified version of the GraphQL query and React component I used for this template:

import React from "react"
import { graphql } from "gatsby"

export default function BlogPost({ data }) {
  const post = data.markdownRemark
  return (
    <div>

      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

There are a few key pieces here:

• The query constant contains a GraphQL query that will fetch the data needed for the component. It uses a $slug variable to select the appropriate blog post.
• The BlogPost component destructures the data prop and uses it to render the title and html of the blog post.
• The dangerouslySetInnerHTML attribute is used to render the HTML generated by gatsby-transformer-remark from the Markdown source.

With this template in place, each of my Markdown files in content would now get turned into a page on my site at a URL based on its filename.

Customizing the Site Layout and Styles

At this point, I had a fully functional Gatsby blog, pulling in my Markdown posts and displaying them on the site. However, I wasn‘t thrilled with the visual design of the default starter template. Luckily, like most things in Gatsby, it was easy to customize!

Since Gatsby is built on React, I was able to use standard React components to create a reusable layout for my site. I made a new Layout component that contained a header, footer, and space for the main page content.

import React from "react"

export default function Layout({ children }) {
  return (
    <div>
      <header>

        <nav>
          <a href="/">Home</a>
          <a href="/about">About</a>
        </nav>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} My Blog. All rights reserved.</p>
      </footer>
    </div>
  )
}

I also used CSS modules to scope my styles to individual components and avoid global style conflicts. Here‘s an abbreviated example of how I styled my Layout component:

.container {
  margin: 0 auto;
  max-width: 700px;
  padding: 1rem;
}

.header {
  margin-bottom: 2rem;
}

.nav {
  display: flex;
  justify-content: flex-end;
}

.navItem {
  margin-left: 1rem;
}

And the corresponding component code:

import React from "react"
import styles from "./layout.module.css"

export default function Layout({ children }) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>

        <nav className={styles.nav}>
          <a className={styles.navItem} href="/">
            Home
          </a>
          <a className={styles.navItem} href="/about">
            About
          </a>
        </nav>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} My Blog. All rights reserved.</p>
      </footer>
    </div>
  )
}

After applying my custom Layout component throughout the site and tweaking the styles to my liking, I had a blog design that felt like my own.

Useful Plugins

One of the great things about Gatsby is its extensive plugin library. There are plugins for everything from transforming data to optimizing images to adding sitemaps and RSS feeds. While working on my blog, I found a few particularly useful plugins worth mentioning.

In addition to gatsby-transformer-remark for Markdown support, I also used gatsby-plugin-typography to set up web fonts and establish a base typographic style for the site. It has a great set of preset styles to choose from, or you can create your own custom typography theme.

For code syntax highlighting, I used gatsby-remark-prismjs along with the Prism.js library. It automatically detects code blocks in my Markdown files and applies the appropriate syntax highlighting based on the language.

To optimize the images used in my blog posts for performance, I used gatsby-remark-images, which processes images referenced in Markdown so they can be resized and lazy loaded.

And for adding a sitemap and RSS feed, I used the gatsby-plugin-sitemap and gatsby-plugin-feed plugins respectively. They automatically generate these essential files based on the content of the site.

Deploying with Netlify

The final piece of the puzzle was deploying and hosting my finished Gatsby blog. This is where Netlify really shines!

Netlify makes it incredibly easy to connect a Git repository and set up continuous deployment. I pushed my local Gatsby code up to a new repository on GitHub, then logged into Netlify and connected it to that repository.

Netlify automatically detected that I was using Gatsby and set the appropriate build command and publish directory. It even offers several helpful plugins, like one that automatically generates a sitemap.xml file.

Now, whenever I push changes to the main branch of my GitHub repository, Netlify automatically runs the gatsby build command and publishes the updated version of my site. It even keeps a deploy log, so I have a full history of my deploys over time.

Netlify also lets me roll back to a previous deploy with one click, set up preview builds for pull requests, password protect the site before launch, and many other useful features that streamline the deployment workflow.

With my site deployed, the final step was to set up a custom domain. Netlify makes this a breeze, too. I was able to purchase my domain through them and configure the DNS settings right in the Netlify admin panel. They even automatically provision an SSL certificate for the site, so I get that nice secure padlock icon in the browser.

Final Thoughts

Looking back on the experience of building my blog with Gatsby and Netlify, I can confidently say it was a delight. The Gatsby development experience is top-notch, with excellent documentation, a wide variety of plugins, and helpful starter templates to build from. The ability to use React components and GraphQL to construct pages is incredibly powerful.

Netlify is the perfect complement to Gatsby, providing a simple but robust platform for deploying and hosting static sites. The continuous deployment setup couldn‘t be easier, and I love the peace of mind of knowing my site will stay up to date every time I push a change.

That said, Gatsby does have a learning curve, especially if you‘re not already familiar with React and GraphQL. It‘s also very opinionated about how data should be pulled into the site, which can take some getting used to.

And while Netlify is great for hosting static sites, it might not be the right solution if your site has complex dynamic functionality that requires a traditional server.

Overall though, I would highly recommend the Gatsby and Netlify stack for developers looking to build a personal blog or any other content-heavy static site. It‘s modern, performant, and just plain fun to work with.

I hope this walkthrough of how I built my blog with Gatsby and Netlify has been helpful and informative. Let me know in the comments if you have any other questions! And if you‘re interested in checking out the full source code for my site, you can find it on my GitHub repo.

Happy coding!