building a blog with gatsby

Create a blog using HTML and JS

In this section, we're going to set up our new Gatsby project as a blog, add a few posts, and get a blog working locally.

Pre-requisites:

• node v8
• npm
• git

You should be familiar with html, javascript, npm, and the command line. I won't go too far into details about using gatsby - here, I just want to get something half-decent looking on a live environment first. Knowing react may help you extend Gatsby, but you could also get by if you poke around. For the purpose of this tutorial, I don't want to include anything else other than JS.

Get started

Start by installing the gatsby cli and creating a new gatsby project

npm install --global gatsby-cli
gatsby new dannyperez-blog https://github.com/gatsbyjs/gatsby-starter-blog
cd dannyperez-blog

Gatsby Starter packs

Check out the full listing of starter packs here

Gatsby gives you a way of setting up your website using open-source templates. And they have a bunch of different options on that page for different use cases. These are the ones focused on blogs

• gatsby-starter-blog
  (demo)
• gatsby-starter-blog-no-styles
  (demo)
• gatsby-blog-starter-kit
  (demo)
• glitch-gatsby-starter-blog (demo)
• gatsby-starter-personal-blog
  (demo)
• gatsby-hampton-theme
  (demo)
• gatsby-starter-minimal-blog
  (demo)
• gatsby-advanced-blog
  (demo)
• gatsby-starter-hero-blog
  (demo)

To get started, we only need the gatsby-cli in this project, and only in development. In this example, I'm going to use gatsby-starter-blog

Make a checkpoint with git

npm install --save-dev gatsby-cli

git init
git add .
git commit -m"Initial commit"

gatsby develop

You should now be able to view your website on localhost:8000

Make some changes

Start personalizing it

• Update components/header.js to update the name of the site as it appears in the header
• Change to YOUR bio
• Add your first blog post by creating a new file with a title
  • The folder name under pages will be the URL that users see in the browser
  • The title: element in index.md is the title that appears in the list of posts, and the header of your blog post page

When you're finally done:

git add .
git commit -m "Personalized the site"

Remember:

• gatsby develop to see the site live on localhost:8000
• gatsby build when you want to prepare your site for publishing, and store it in public/
• gatsby serve when you want to see the prepared site in public/ on localhost:9000

Build the project

gatsby build

This will compile the project since Gatsby uses React. All the code will be generated and dropped into public/ for you. You'll see that public is in your .gitignore since gatsby will be generating all those files for you automatically.

If you run gatsby serve, you can see your built project - which should look identical to your project served by doing gatsby develop

Review

At this point, you have a node project on your computer. You can develop locally and make changes to your website. And you have a way of creating a "built" version of your website that you can then put on whatever host you want.