GatsbyJS Plugins I'm Hyped About
After I heard practically everyone I know rave about GatsbyJS, I decided to give it a try. And you know what? It did not disappoint.
I wanted to give my personal website a facelift since it's been a few years since I did any major work on it. This time around, I wanted a sleeker design and to also move my personal blog over from GitHub pages so that all my professional work was in one centralized location.
This post will be a little bit about my process, but will mostly focus on some Gatsby plugins that helped me a lot.
Process
So, first, I decided to mock up a design. As it turns out, my design skills are not great, so I used a tool called Mockflow just to stub out some basic elements and provide some structure for my work. It's free to start, but they'll charge you if you have more than a few pages to mock up.
Codepen
Next, I stubbed out some CSS on Codepen. Mostly I do this because it's a little easier to fiddle with one single page when I'm also designing at the same time. Here is the snippet. I still play with it to tweak some things in isolation. I'm really indecisive when it comes to fonts and colors, so this is helpful for me. Also, I use Coolors.co for color scheme ideas and FontPair to look at font pairings. Fontjoy was also helpful.
Gatsby
Once I had those two elements in place, I dug into Gatsby. I read through the docs, which are really well-written, and since I didn't really know what to do at first glance, I went through the tutorial and used the starter set. I highly recommend doing the tutorial because it was really easy to follow and also informative. It gave me everything I needed to get started. I made a new repo and started hacking away at creating components, and adding CSS and JavaScript. Oh, btw, the major draw of Gatsby is that you get to write React components for your pages and templates. So if you know React, you're basically all set.
Migrating from Jekyll to Gatsby
There were a few steps to migrating my blog from Jekyll to Gatsby. Content
wise, I just copied over the blog directory from my Jekyll site's repo to my
new
Gatsby site's repo inside of a new directory called blog
. Then, I used the Gatsby
Source Filesystem Plugin to
make my Markdown files queryable by GraphQL for use in templates. Mostly, I just
followed the tutorial for this part. You'll also need the Gatsby
Transformer
Remark to read Markdown content. I did also have to check the datetime
format of my timestamps because the format in my Jekyll blog was not
supported. (This PR was
helpful in identifying the issue.) As the tutorial suggested, I made a new blog-post.js
template
and modified the gatsby-node.js
file to create nodes and slugs and use the
blog-post.js
template.
Once the posts were in place, it was a matter of getting them to render correctly. A few other plugins were helpful here.
First, since my blog sometimes uses GitHub gists, you'll need the
gatsby-remark-embed-gist
plugin to help you display gists correctly. Without this plugin, gists will
be displayed as code snippets.
Another plugin that was helpful for syntax highlighting was
gatsby-remark-prism-js
.
If you want your syntax highlighting to look real dope, I suggest using
that. Turns out, these two plugins need to be included in this order because
gatsby-remark-embed-gist
transforms inline code snippets.
The next plugin I suggest is gatsby-plugin-google-analytics
which made is
super easy to include Google Analytics on the page.
And that was about all I needed to get a good MVP of my new site out the door.
Deployment
I signed up for Netlify and set up a deployment pipeline between my new repo and this service. After some initial hiccups (because my GitHub account has admin privileges on way too many repos), I successfully connected my repo through the CLI and was able to start deploying on merges to my master branch. It was really quite exciting.
Domain
Once the site was up, I changed the CNAME
record on a domain I purchased
through Namecheap. (That's a story for another day, but I actually initially
purchased it through another host provider and then ended up initiating a
domain transfer process early last year. Long story short, I now manage my
domains through Namecheap.) That successfully pointed my domain to my new
site.
Redirects from the GitHub pages site
However, my blog was living over on GitHub pages at https://talum.github.io.
To redirect my blog posts, I used a gem called
jekyll-redirect-from,
which uses an HTTP-REFRESH
meta tag to perform a redirect. This is the
boring part: I went through
all my old posts and specified a new redirect URL. And then I pushed my blog
changes up to GitHub.
And now, miraculously, everything is working pretty seamlessly. In a matter of days, I was able to create and deploy a new static site to Netlify using GatsbyJS, and it was awesome. I like to think it's a testament to my skill as a developer, and that is probably true to some extent, but largely it's a testament to the power of well-designed dev tools.