How to create a blog using Gatsby

Read Time
6 min read
Published On
June 14, 2019

Even in this age of social media, having a website is still essential. But sometimes you want to be able to customize your website beyond the capabilities of  Wordpress, Squarespace or Weebly (the de-facto destinations to create a general website). This is where Gatsby comes in. Gatsby is a static site generator that is popular in the React Javascript Framework community.

The benefits of using a static site instead of a dynamic one like Wordpress are manyfold:

  • Vastly improved page  speed
  • Easier to scale to a large number of users
  • More security since there is no vulnerable admin panel, due to little to no server-side functionality
  • Ability to track changes in your static site through version control management software like Git

It would be unfair not to mention that there are some disadvantages to static site generators:

  • No content management system (CMS) user interface. This is a major drawback depending on how technical you are. Being able to update your website from any device is convenient and it can take some time to get familiar with Gatsby’s Markdown system for writing posts.  
  • Difficult to integrate User-Generated content such as comments. Though it is not an out of the box feature, there are many options available to install it yourself.
  • More difficult to export content from a collection of markdown files than a database.

Now that you are familiar with both the positives and negatives of a Statically Generated Site Generator like Gatsby,we can begin the guide of how to create a blog using Gatsby.

First you will need some Prerequisites:

  • Node and NPM installed
  • Some basic Javascript and React knowledge
  • Some knowledge of GraphQL but you can learn as you go
  • An open terminal window

    1. Install the Gatsby CLI which will let you use ‘gatsby’ as a command  ​​    
    npm install -g gatsby-cli

    2.  Initiate creation of your new blog:
    gatsby new your_blog_name

Note Gatsby provides many starter kits besides the one above if you want to go for a less conventional template for your blog.

  3.  Now you can change into your newly created blog directory that you created and start the gatsby server
   cd your_blog_name
   Gatsby develop

   You should see a similar output as below after running Gatsby Develop:

Terminal after initial Gatsby Setup

You can now see your blog at http://localhost:8000/

4. You now have a functioning Gatsby blog! There are however a few things you need to customize to really make it feel like YOUR very own Gatsby blog. Open up the gatsby-config.js file and change a few items there like the Site Title, Author, a short description of the site, the host URL and any social links you might want to add.

5. Phew! Now you’re settled in and ready to write your first Blog post. Gatsby checks the content/blog folder for blog posts with a .md / .markdown file extension and automatically converts each to its own separate post. You can go ahead and delete those three folders to make room for your posts. Afterwards create a new folder with whichever title you like, I called mine ‘The Great Gatsby’. Inside this folder create a .md file and you can start writing your first blog post.

Gatsby Blog File Structure

Gatsby example blog post in markdown:

title: The Great Gatsby
Date: ‘2019-06-14’


Join mysterious millionaire, Jay Gatsby in the Roaring 20’s…

The parameters between the dashes are special markdown tags that will inform Gatsby about the unique title, description, date published and related image(s) for that post.
As soon as you save this post, you will see the changes reflected on the localhost gatsby site you have up.

6.  You should customize a few more things in order to have a unique Gatsby blog. Navigate to components > bio.js and edit the description about you living and working in San Francisco building useful things. One useful thing to note here is the {author} template tag used instead of a hardcoded name. This is received from the previously changed gatsby-config.js file.
   You can also take this time to edit the profile-pic.jpg file in content > assets to a custom photo.
7.  You should now see something like this:

Sample Gatsby Blog Post

Congratulations! You’ve just created your first Gatsby.js powered blog!