GatsbyJS Series — Setup project and deploy site automatically (Part 1)

Published in

mr-leo

5 min readJun 26, 2019

About this series

As a programmer, we always have interesting ideas that we want to share or write them in our blog (beside Medium). We have so many framework options in order to build and go live our blog. Maybe the most popular framework is Wordpress. However, take your time to learn Wordpress framework with PHP language is not a great idea at the moment. Especially for programmers who get familiar with Javascript world like me.

So that in this series, I hope that can help you a little bit about how to build a personal blog for yourself with the power from GatsbyJS. Moreover, you will see how easily we can manage content/backend/cms headless thank for Contentful service, then we can totally focus on the frontend side.

This series includes:

Setup project and deploy site automatically.
Configure useful plugins and organize project.
Layout with mocked data.
Integrate CMS headless easy for everyone.
Create blog details page dynamically.
Seo basic and add custom domain (namecheap).

A quick introduction about GatsbyJS

Gatsby is Blazing-fast static site generator for React. Everything in Gatsby is Javascript so you don’t need to learn a new templating language. You get code and data splitting out-of-the-box. In this series, you can see how quickly I can build a blog for programmers who love writing a blog like me.

Now let’s start to the first part of this series: Setup GatsbyJS project.

Installation

First, we need to install Gatsby CLI (current version is 2.7.0) to our local machine by running this command:

npm install -g gatsby-cli

Create your first gatsby project:

gatsby new mr-leo-dev https://github.com/gatsbyjs/gatsby-starter-hello-world

Note that https://github.com/gatsbyjs/gatsby-starter-hello-world is a starter project with some default configuration to help you get moving faster on creating a blog.

It will take some time to fetch starter project and install dependency libraries. After that process finish, we can move to project folder:

cd mr-leo-dev

Run project:

gatsby develop

yarn develop

Now check our site at localhost:8000

Don’t forget first commit

We’re using github for git repository this project.

git remote add origin git@github.com:leo-le-07/mr-leo-dev.git
git push -u origin master

Note: Source code of this project will be published at this repository git@github.com:leo-le-07/mr-leo-dev.git

Project structure in the beginning

We’ll use VS Code as editor for this project. Let’s take a look at project structure in the beginning. We have 3 main folders:

.cache an hidden folder that contains only in Gatsby internal (listed in .gitignore). It caches some configurations when we build project. Nothing we should change right now.
public which contains the resulting website after we build it.
src contains all our source code for blog.
static which will contain the static resources.

In case you want to investigate more about Gatsby project structure, we strongly recommend to their official document here.

Go live our blog

I know that someone will have a question: What? We don’t even write a line of code. Why do we need to publish blog so soon?

As my experience, go live our project: website, blog, etc. as soon as possible is one of the best practice I’ve learned. We don’t build a blog that only works on our local machine, we build the real thing can be used by the internet. You can consider it as ending user testing for our blog.

We’ll use one of the popular services can help us deploy our site automatically in this field: https://www.netlify.com/.

Access netlify dashboard https://app.netlify.com/ to create new site from git

We have several options to connect with Netlify service, here, we’ll connect to our Github Repository. At the first time using Netlify, we have to authorize netlify app with our github account to access our repository later.

After authorize successfully we can select our project repository:

In last step, netlify allow us to adjust build options. We’ll keep it as default and start deploy site.

Now we are able to see our deployment request in Netlify queue.

After deploy successfully, we can access our site at address https://vibrant-mcclintock-5a849d.netlify.com/. It’s a random address by Netlify. We don’t need to worry too much about it now because we’ll buy nicer custom domain later in this series for our blog.

Awesome. Great start for our blog. In the next part in this series, we’ll dive into Gatsby configurations in order to work with typescript, styled-component, image handling, typography, etc.