A JOURNEY FROM DRONGO TO DEV

> BACK TO ALL POSTS

GatsbyJS - Static Website Generator: Part2 - Building and Deployment

day

26 September 2018


Last Edited: 30 September 2018

WE HAVE CREATED OUR FIRST GATSBYJS WEBSITE, TIME TO DELPOY!

..Hold on a minute! At the moment we just have a bunch of node modules, plugins and react components scattered around running on a local server. If we try and push this to a server, then it won't do much.

We need to take advantage of the gatsby build process in order to get our hands on those juicy static files.

Step 1:

Open the terminal at our project directory and type:

gatsby build

This will kick off the build process and compile down all of our modules and components into static HTML, CSS and JavaScript files.

gatsby build

When complete, open up the project folder and you will find that gatsby has created a public folder containing all our website assets.

public folder

At this point we could simply use an FTP client or similar to transfer our assets to a server and Shazam! Thats it!

...buuuuuuuuut, to be honest that's pretty boring, and not very dynamic. What happens if we want to make a change? What if for example we were running an awesome web developement blog with regular content?

Each time we updated the site, we would have to build it, and upload it again...yawn! there must be an easier way!

That's where services like Netlify come to the rescue. Each time we push an update to our Source Control System (in this case Github), Netlify will rebuild the site automatically. Woah Awesome! But sound complicated?! Well thankfully for me, it's not.

Step 2:

Head over to github and sign up for an account if you don't already have one.

Then, click the New Repository button, a repository is basically an online folder where we upload our project and track all of our updates to it.

Give your 'repo' a name, and click create repository.

github create repo

Step 3:

If you haven't done it already, you now need to download and install the Git CLI (I know, I know, I promise it's the last).

Find it here: https://git-scm.com/downloads

Step 4:

Open up the terminal at your project directory again and enter the following:

git init

This will tell Git to create a new local repository inside the project folder.

git add README.md

This will add the gatsby README file to the commit list.

git commit -m "initial commit"

Creates a commit with a message "initial commit", basically saying I want to upload the files that I added (README.md) and attach the following message.

git remote add origin http://github.com/your_username/your_project_repository.git

This message tells Git the location of the remote repository (that is, where we are going to upload the files to). Obviously, the above message should contain information relevent to your project.

git push -u origin master

The final command will initiate the transfer from the local repo to the remote repo. In other words it will take all of the local files identified in the add message and upload them to the remote repo (your Github repo).

git init1

git init2

Step 5:

Now for the fun part. Head over to netlify.com and sign up for an account.

Once in your account dashboard, click on the New site from Git button.

Under the continuous deployment heading, click on GitHub and sign in using your Github credentials.

netlify create1

Now you can choose your gatsby project repository from the list of github repos.

netflify create2

Ensure the master branch is selected and under Build Command enter:

gatsby build

And under Project Directory, type:

public/

Press, Deploy Site, and you are done!

netlify create3

Wait!... what?

netlify error

An error? WTF?

Step 6:

Head over to your Github repo and check out the files! Awwwww SNAP! Its just a README file, where are my awesome assets? I did what the Github instructions told me to!

github empty

Well, remember the:

git add README.md

message, well since we already have a folder full of files we should have just uploaded all of them at once using.

git add .

Head back to the terminal and type that in!

Then enter:

git commit -m "any message you want"

And finally:

git push

To send all of your files up to the github repository.

git add1

git add2

Step 7:

Head back to Netlify and hopefully you should see the build process in progress.

netlify progress

Ding! And it's done!

From now on each time you push a commit to your github repo, netlify will rebuild the page automatically with the changes.

netlify success

Click on your project url on the dashboard (usually https://some.nonsense.netlify.com) to view your project live on the web.

final page

Note: If you click on the netlify dashboard for your project and enter Site Details you can change the URL prefix to something a bit more memorable (or add a custom domain if you have one).

In the next part I will delve into the gatsby code and explain some of the simple concepts.

Part 3