Mahesh's blog
Published on

Beginner guide to start blog using Gatsby

Tagsgatsbynetlifyblog

Today, there are numerous options to setup a blog. We have out of box options like Wordpress and Ghost with thousands of plugins to get started. But nothing beats the satisfaction of building something from scratch for yourself. Advantages include understanding of blog under the hood and flexibility to tailor it to your needs. Bonus is you have a playground to code and test out different ideas, designs and colors.

Prerequisites

Basics first

Gatsby is a static site generator frameworks. It uses React, GraphQL and basic web languages of HTML, JS and CSS. We don't have to understand GraphQL or React completely to get started but working knowledge of HTML, CSS and JS can speed up the progress.

In short, Gatsby takes the code and converts into static site. Once you push code to Github git repository, Netlify will deploy automatically.

Get started

Enough of reading text, lets get started by installing and setting up environment locally. This is one time effort so worthy to get it done initially.

Installation

You can copy paste the following shell script to get started:

npm install -g gatsby-cli
gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-blog
cd gatsby-site
gatsby develop

or you can follow these instructions from Gatsby quick start in step-by-step: https://www.gatsbyjs.org/docs/quick-start

You can hit browser url : http://localhost:8000 to see blog without any changes and push the code to git repository in Github.

Voila! you are one step closer to Gatsby based blog.

Add firsts

Gatsby creates pages for each of the posts and pages in the blog. There should be already bunch of sample pages for functioning site. So, you can add new html page in pages folder and it automatically accessible in the site without any other changes

First page: Contact page

Create new file: contact.js in pages folder with following content:

import React from 'react'
import Layout from '../components/layout'

const ContactPage = ({ data, location }) => {
  return <Layout location={location}>You can contact at dummy@mail.com</Layout>
}

export default ContactPage

You can browse here: http://localhost:8000/contact

First blog post

Create new file: first-post/index.md with following content:

---
title: First blog
date: '2015-05-01T22:12:03.284Z'
description: 'First blog'
---

This is my first post.

You can browse here: http://localhost:8000/ and search for "First blog" for your post link.

Congratulations! now, you got a working blog and push all changes to Github repo.

Deploy online using Netlify

Now lets deploy the blog and make it available online. Lets use Netlify and go ahead with sign up here: https://app.netlify.com/

Once you sign up and login, its a straight forward setup to deploy and here is the summary:

  • Connect Github
  • Pick repository
  • Leave the default options as they are in Netlify

Netlify generates url for your blog and you are all set with auto deployment of blog with any change made to Github repo.

There might be other deployment options for static sites but here are some of the features that I liked in Netlify:

  • Functions
  • Custom domain
  • Free SSL

We can explore on these some other time🙂

Now, you are all set for new working site to add posts and have a blog for yourself.

References