What you need to know to start a static web site with GatsbyJS and Netlify!

Creating a static blog using GatsbyJS

Today I will talk about statics web sites using Gatsby, an open-source framework written in JavaScript and based on React and GraphQL. It generates a static site that allows you to write in Markdown, that easy and simple text format that you write your Readme.md file of repositories.

Do you see where we are going?

Markdown’s simple and productive way to write our documentation… combine it with all plugins[I will talk more futter], starters templates and React packages that Gatsby gives, the result its a cool static web site made in minutes.

Setting up the Environment

If you alread have Homebrew, Node.js and NPM installed you can skip this part. All on your terminal:

Install Homebrew

Homebrew its package manager for macOS and Linux

1. See if Homebrew its installed brew - v

2. Install homebrew with the command:

   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

   You can check the entire documentation here: https://brew.sh/

Install Node.js and npm

Node.js its required to run JavaScript outside web browser, as Gatsby was built on it.

1. Run brew update to make sure the latest version of Homebrew its intalled

2. Now intall node with it:

   brew install node

3. Check node instalation node --version then npm --version

   Install Gatsby CLI

   We will use Gatsby cli to make the web site creation faster and easy with the Gatsby powered sites and commands to generate them Open terminal:

   npm install -g gatsby-cli

   Create your Gatsby site

   So let’s go to the good part: generate your gatsby site!

Choose the right one for you

For the first site, I think the best way to start it’s using one of the templates available on starter libary, this will make life easier by running a simple command.

So choose the right template for you, and let’s get this done!

Let’s build!

Now that you have chosen the perfect template copy the following git hub page and execute the command:

gatsby new SITE_NAME https://github.com/gatsbyjs/gatsby-starter-hello-world

• new creates the new gatsby project
• SITE_NAME title of the new site
• Github page: repository from template

Now all site files have been generated. Go to the project folder:

cd SITE_NAME

What we have left to start coding and blogging it’s to start the site server, that ables to interact and see all that’s going on with our web site:

gatsby develop

Now acess http://localhost:8000/SITE_NAME to see the working site

Creating and editing the posts

All posts from your blog will be located at content/blog. Every folder corresponds to one post, so create a .md file to write down your stories… to get to now how markdown files work check this documentation.

It’s an easy and productive way to write.

Deploy gatsby site

Its showtime, let’s make the site visible to everyone!

Push to Github

Go to your Github page and create a new repo, public or private. Be sure the README file will not be generated.

Netlify

You can deploy your site on Github pages as well, but I preferer Netlify for some reasons:

1. Hosts private repositories for free
2. Custom SSL
3. Forms Submissions without beck-end(100)

And the paid features - if I need them.

All done

Now you have your static site and you can blog, or do whatever you want quickly and easily. I will talk more about gatsby soon, about features, blocks, react and cool stuff about this amazing technology.