PART 1 - How I built my first blog site with Gatsby + Netlify in less than 30 minutes

Hello World, it’s my first blog post, ever. It’s been around my mind to write an article / regular blog, but can’t find the best time or topic until last night, after I deployed this static blog site to the web.

Gatsby + Netlify = Free Website

Gatsby + Netlify is a good combination to build & deploy your static site. I lied, I spent 3 hours on this, but if you know what to do, it will take less than 30 minutes.

This is only part one, I’ll only cover gatsby & gatsby starter blog template, I’ll put a link right below this line if next parts are available.

Requirements for non developers

1. nodejs installed
2. a terminal / command prompt
3. code editor, I recommend vscode.
4. high curiosity 😄

Domain (Optional)

I bought this domain from godaddy for around $8.9 (IDR 125.000).

Gatsby + Gatsby Starter Blog Template

This site is built using Gatsby and uses Gatsby Starter Blog as a starter template.

Setting up your gatsby

# install Gatsby Cli
npm install -g gatsby-cli
# or
yarn global add gatsby-cli

Start a new project using the Gatsby Starter Blog template

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

Fire up the local env

cd my-blog-starter/gatsby develop

Now open up localhost:8000 in your browser, your browser window will looks like this

Getting hands dirty.

You want your own profile-pic, title, siteName, description, etc.
To do that, follow these steps.

1. Open gatsby-config.js on the project root folder, find & change this section to what suits your need.

siteMetadata: {
  title: `Jaco Ahmad`, // The Title of your site
  author: `Jaco Ahmad`, // Author name of all the blog posts
  description: `a blog by Jaco Ahmad, related to front-end development, javascript, react, gatsby, netlify, and other web development related articles`, // Seo Description | og description, you want to fill this, when you share your website to your friends, the description will appear
  siteUrl: `https://jacoahmad.com`,
  social: {
    twitter: `jacoahmad`,
  },
}

2. Then, open content/assets/ and replace profile-pic.jpg to your desired picture.

3. Then, open src/components/bio.js, find this code.

   • Changing Description
     Edit inside <p> tag, and to display your name, use {author}

 <div
  style={{
    display: `flex`,
    marginBottom: rhythm(2.5),
  }}
>
  <Image
    fixed={data.avatar.childImageSharp.fixed}
    alt={author}
    style={{
      marginRight: rhythm(1 / 2),
      marginBottom: 0,
      minWidth: 50,
      borderRadius: `100%`,
    }}
    imgStyle={{
      borderRadius: `50%`,
    }}
  />
  <p>
    Written by <strong>{author}</strong> who lives and works in San
    Francisco building useful things.
    <a href={`https://twitter.com/${social.twitter}`}>
      You should follow him on Twitter
    </a>
  </p>
</div>

Start writing your blogs

To start writing your blogs, you can do it under content/blog, however, it uses markdown files (.md) and you need a bit understanding about how it works, or you can use a markdown editor like dillinger.

Don’t forget to add formatter

---
title: New Beginnings
date: "2015-05-28T22:40:32.169Z"
description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.
---

You can delete anything inside blog folder.

To preview your markdown files, restart your development (stop & re-run gatsby develop)

What’s next?

In the upcoming article, I’ll share how to:

1. Use WYSIWYG editor for posting/editing articles (with netlifycms)
2. Deploy your website with netlify & github

Useful Links:

1. Gatsby
2. Grammarly

Thanks for reading, have a good day!