Crusader of Friendship

I’ve long been a proponent of WordPress for blogging, but recently I’ve been hearing a lot of great things about Gatsby. It’s supposed to be a simple and lightweight framework for quickly building sites. It’s also built on React, which has been on my todo list for things to study. So over the past week or so, I decided to give it a shot.

The Finished Product

I won’t go into too much detail about how I built a site with Gatsby as there are already a ton of tutorials covering this, almost all of which are much more thorough than I could ever be. Instead, you can just check out the finished product in this Github repository. Feel free to fork and repurpose as you see fit!

Out of the Box

It’s not entirely straightforward how to go from cloning to posting blog content, so here is a quick rundown of how to got set up. After cloning the repository, installing dependencies, and building, you will see a something like this:

src
 |- components
 |- images
 |- pages
     |- 2019-01-01-blog-post-title
         |- blog-post-title.md
 |- styles
 |- templates
static
gatsby-config.js
package.json
...

Most of these directories and files are fairly common, but it’s important to note that actual blog content is created from any src/pages/*/*.md files, and that the directory name and md file name should match (with date prepended to directory). From the project root, running gatsby build pulls post data from these files and generates a series of HTML, CSS, and Javascript files in a public directory. The gatsby-config.js file is also important to note. You can read all about configuration at the Gatsby site. That’s all for building the blog.

For hosting, I decided to go with Netlify which works great with Github. To get the site up and running, I created a separate Github repository to house the files built in the previous step, by initializing and pushing the public directory to this new repository. Finally, connecting this repo with Netlify takes care of the rest. And that’s pretty much it. 🎂.

To recap, the process of adding new posts looks something like this:

1. Write up a nifty blog post.
2. Create a directory in src/pages/ with the following format: YYYY-MM-DD-some-title
3. Create a md file in this new directory using the same title in step 1 without the date information: some-title.md
4. Add meta information at the top of this new md file and copy paste your nifty blog post over.
5. Run gatby build from the project root.
6. Commit and push changes in the public directory to Github
7. Netlify takes care of updating

What I Learned

Building a blog with Gatsby was in itself a learning experience for me. It was a great way to get more familiar with React while building something practical. It was also my first experience with static site generators. The result was a super fast blog that was very fun to build. I’ve since abandoned the blog and will be sticking to WordPress for my blogging needs, but if you’re looking for something different for your personal blog, I definitely recommend giving Gatsby a shot.