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 inindex.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:8000gatsby build
when you want to prepare your site for publishing, and store it inpublic/
gatsby serve
when you want to see the prepared site inpublic/
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.