A Gatsby Blog Adventure

GatsbyJS

If you’re not familiar with GatsbyJS, I’d highly recommend checking it out. It’s a static site generator that can build static web pages from just about any data source and allows you to develop using ReactJS.

First Goals

One of the goals of rebuilding my blog is to actually start blogging again, so I wanted to get something out there as quickly as possible with the intention of improving it along the way. A minimal first pass would ideally include the following:

  • Minimal Logo
  • Landing page
  • A blog post or 2
  • Google Analytics so I can track things from the start
  • Publicy hosted with SSL
  • CI build / deploy on GIT commit

Getting Started

There’s a number of good resources for how to get started with GatsbyJS. I just installed the CLI and created a new site.

npm install -g gatsby-cli
gatsby new emeraldwalk-site

I was able to configure some global site settings in gatsby-config.js such as my site name and icon.

TypeScript

I love TypeScript and try to use it whenever I can. In order to use TypeScript with Gatsby, I first installed the gatsby-plugin-typescript plugin and then installed some typings for a few things.

npm install gatsby-plugin-typescript
npm install --save-dev @types/react @types/react-dom @types/react-helmet

I then configured the plugin in gatsby-config.js by adding an entry to the plugins array.

module.exports = {
  ...
  plugins: [
    ...
    `gatsby-plugin-typescript`,
    ...
  ]
}

Lastly I renamed some .js files under the src folder to .tsx files.

Scss

The default site created by the CLI uses .css, but it was easy to add support for .scss. I just installed a couple of packages.

npm install node-sass gatsby-plugin-sass

And renamed .css files to .scss. I also had to update import statements consuming the stylesheets.

For my logo, I wanted to create a simple SVG of some sort. My goto for SVG editing has typically been Inkscape, but I recently got a new MacBook and found the Inkscape experience in OSX to be subpar, so I searched for a replacement. I tried a few different things but ultimately used a trial of Affinity Designer. I completely forgot until I had already created it that I have Parallels and could have run Inkscape in Windows. This will likely be my approach the next time I need to edit an SVG.

Here’s the result: Emeraldwalk Logo

Pages and Posts

Out of the box Gatsby will serve components out of the src/pages folder as pages. I basically got my landing page for free with a few cosmetic tweaks to src/pages/index.tsx. I plan to write a separate blog post about the specifics of configuring blog posts, but for now I’ll just mention I’m using src/pages/blog.tsx to surface my list of posts. The router is already pre-configured to serve these at / and /blog respectively.

Google Analytics and Sitemap.xml

Since I’m interested in having visitors actually find my site, good SEO will be a consideration throughout. As a baseline, setting up Google Analytics and making sure my site can be indexed by Google seemed like a good idea.

The general setup I used:

  • Google Analytics - configured for my www.emeraldwalk.com domain.
  • Google Search Console - configured for https://www.emeraldwalk.com
  • Linkage between the 2 accounts (probably easiest once site is up with Google Analytics configured)
  • A sitemap.xml route to submit to Google Search Console.

There’s a couple of options for installing Google Analytics, but I went with the gatsby-plugin-gtag plugin. My gatsby-config.js configuration is super simple:

{
  // NOTE: Only enabled in prod
  resolve: 'gatsby-plugin-gtag',
  options: {
    // my google analytics tracking id
    trackingId: 'XXXXXXXXX',
    // Puts tracking script in the head instead of the body
    head: true,
    // enable ip anonymization
    anonymize: true,
  },
}

For my sitemap.xml I used gatsby-plugin-sitemap with the default configuration. This auto generates a sitemap containing all of my pages and blog posts whenever I rebuild my site.

Hosting and CI / CD Pipeline

One of my favorite things about using Gatsby as my static site generator, is the available options for easy deployment. I used Netlify for hosting my blog. It has a free tier that includes SSL for free and easily integrates with Github to automatically build and deploy my site whenever I commit changes. There are also some Gatsby / Netlify plugins that allow editing of Markdown from an admin UI, but for now I’m just going with editing my files directly and pushing changes to Github.

Till Next Time

I think that’s a pretty good overview of what was involved with my initial site setup. I hope to blog more in depth with some specifics of my blog post implementation. Until then. Peace.