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:
It would be unfair not to mention that there are some disadvantages to static site generators:
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:
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 https://github.com/gatsbyjs/gatsby-starter-blog
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:
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 example blog post in markdown:
---
title: The Great Gatsby
Date: ‘2019-06-14’
Image:``
---
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:
Congratulations! You’ve just created your first Gatsby.js powered blog!
