Redesigning with Gatsby

Gatsby.js logo

I recently redesigned this site with Gatsby. Here's few things to consider if you're considering doing the same:

  • SSL: Gatsby makes heavy and use of the Service Worker API to provide offline support, but don't forget that SSL is a requirement for using Service Workers. Once I got SSL set up I added this rewrite rule to my .htaccess file to automatically forward requests from HTTP to HTTPS.

    RewriteEngine On
    RewriteBase /
    
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^craigshoemaker\.net$ [OR]
    RewriteCond %{HTTP_HOST} ^www\.craigshoemaker\.net$
    RewriteRule .* https://craigshoemaker.net%{REQUEST_URI} [R=301,L]
    
    RewriteCond %{HTTPS} =on
    RewriteCond %{HTTP_HOST} ^www\.craigshoemaker\.net$
    RewriteRule .* https://craigshoemaker.net%{REQUEST_URI} [R=301,L]
  • React: While you can certainly build a site without ever touching a React component by using a Gatsby starter, chances are you'll want to make some customizations. Knowing a bit of React allows you to bend Gatsby to your will.

  • GraphQL: There are a lot of technologies and APIs that go into a Gatsby site, but GraphQL is one that may not be used by many on a regular basis. Leveraging GraphQL queries to expose content to different parts of the site really make it a pleasure to work with Gatsby.

Foundations

This site began with Ruben Harutyunyan's advanced starter as a foundation. I liked this starter because Reuben included many features which I wanted out-of-the-box.

To keep things simple, I wanted to have a site powered by Markdown. A benefit of using Markdown is that you can place content metadata directly in each file. Gatsby refers to this metadata as "front matter".

One of the changes I made to the starter was to add some metadata to the front matter. The query that lists blog posts now only returns "published" blog posts by looking for file with the metadata of published: true. With this change, I am now able to keep drafts of blog posts around but not expose them publicly until they are marked as published.

What's next?

To keep it simple, I removed the commenting component and a few other features. I'll likely soon add comments back in, but for now what this site needs is just more content!