Alona Varshal

Exploring possibilities in Python and JavaScript programming

Adapting Gatsby

August 06, 2018


This is my first post using Gatsby. I had been doing my blog (which is still here) using Jekyll but I caught the React bug. So here I am trying to figure out how to get started using Gatsby.

For this site, I used the default starter instead of using other starters because I wanted learn how to really use it.

Before getting to this point, I went through the official Gatsby tutorial and learned the basic steps in setting up a site. I already had Node.js installed in my computer so all I had to do is:

  1. Installing the Gatsby command line tool
  2. Creating the Gatsby folder in local environment using the default starter. I used the following command:
                      $ gatsby new sitename
  1. Running gatsby develop to start the hot-reloading development environment, accessible at localhost:8000

I then edited the files according to how I want it.

I wanted to use Markdown for creating posts (I like this feature in Jekyll). So I followed the instructions from the docs. I then also followed the instructions for adding a list of markdown posts.

Next was installing Typography.js so I can modify my fonts. I used the Funston Theme.

As I continued to make changes, I found out that I cannot simply add images in Markdown. To fix this, I installed a plugin called 'gatsby-remark-images'. To be able to successfully use the plugins in Gatsby, the config.js file needed to be modified accordingly. The instructions clearly tell how to do the config file.

Next, I learned how to add an excerpt to the blog posts in the index page. By adding the "excerpt" property to the markdown frontmatter, I was able to do just this. I found a blog on how to build a blog using Gatsby and understood more about the blogTemplate.js file.

It would not be good without the links to the "next" and "previous" posts. So I went ahead and created another post just to test how this works. I added a "context" object in "gatsby-node.js" file. This object defines variables "prev" and "next". Adding these were straightforward. But I learned that the module "gatsby-link" exports 'Link' as is. It's not deconstructed as when you are importing it from 'react-router-dom'. This threw me off for a while--I was deconstructing 'Link' from "gatsby-link" and giving me errors. I finally realized, I need not deconstruct it.

Deploying the site with GitHub Pages is a little bit weird during redeployment. I had a problem with the images displaying properly. I decided to try Netlify, which was the easiest thing I have ever done. I also went ahead and used my own domain name.

I then added a footer with social media icons. I created a Footer component that uses svg paths to corresponding social media icons.

I have been enjoying this so far and I'm learning a lot. It's cool to be able to learn React, Gatsby, and blog at the same time.

Created with Gatsby.js