..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.
Open the terminal at our project directory and type:
When complete, open up the project folder and you will find that gatsby has created a public folder containing all our website assets.
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.
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.
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
Open up the terminal at your project directory again and enter the following:
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).
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.
Now you can choose your gatsby project repository from the list of github repos.
Ensure the master branch is selected and under Build Command enter:
And under Project Directory, type:
Press, Deploy Site, and you are done!
An error? WTF?
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!
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!
git commit -m "any message you want"
To send all of your files up to the github repository.
Head back to Netlify and hopefully you should see the build process in 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.
Click on your project url on the dashboard (usually https://some.nonsense.netlify.com) to view your project live on the web.
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.