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:
- Installing the Gatsby command line tool
- Creating the Gatsby folder in local environment using the default starter. I used the following command:
$ gatsby new sitename
gatsby developto start the hot-reloading development environment, accessible at
I then edited the files according to how I want it.
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.