Gatsby is a static site generator. This means, for instance, that you can write some parts of your website using Markdown. Gatsby then transforms it, using some fancy magic, into a single HTML file and some static assets. The benefit is that almost every hosting platform supports plain HTML and more importantly, that Gatsby sites are usually really fast and secure.
When I first used Gatsby to build this website, I was amazed about how easy the deployment with Netlify was. After the development process, I got this whole blog online within a few minutes.
However, I was forced to use cPanel as hosting platform for a new project. While it is certainly possible to deploy your Gatsby project on cPanel within a few minutes, I struggled very much with it, having never done it before. This article covers a simple step-by-step explanation on what exactly to do.
- Publish a Gatsby site using cPanel
- Integrate a GitHub repo
- Setup for continuous deployment
- Setup of a domain with cPanel
I tried to set up continuos deployment system which should be possible. I tried it for a few hours and gave up after running into too many problems (please conact me if you have a simple step-by-step guide and wanna help me out in that regard).
If you're totally new to using Git and you don't want to spend some time learning the basics yet, this way works perfectly fine for you.
The first thing to do is to get Gatsby to create the HTML and CSS files.
Go into your project directory and run
It should look similar to this:
This should create a new
public directory in your project directory. In there is all the code you need to deploy your website.
gatsby serve to check whether everything is alright with the website.
$ gatsby serve ⠀ You can now view ericjanto.com in the browser. ⠀ http://localhost:9000/
On macOS, you can terminate the serve process by typing
^C (control + c).
If everything looks alright, go to cPanel and log in.
Go to the file manager and look for the
public_html directory. Usually, it has the web icon (🌐) in front of the name.
Delete everything in there (if you don't need it for the new website) and click on
Upload. Upload the entire content of the
public directory (the one created with the
gatsby build command). Make sure that the files are directly in the
public_html directory, not in a new subdirectory.
That's it. If you've already linked a domain to your cPanel profile, the website should now be online.
While the way described above works perfectly fine, it gets a bit tedious to download and upload the entire
public folder every time you change some detail on your website. An easy workaround is to use a GitHub repository.
The first thing to do is to include a
.cpanel.yml file in your project directory. This file is basically an instruction manual for cPanel on how and where to deploy the changes you make or respectively, which files to ignore.
You want your
.cpanel.yml file to look like this for Gatsby projects:
--- deployment: tasks: - export DEPLOYPATH=/home/userName/public_html/ - /bin/cp -R public/* $DEPLOYPATH
Make sure to replace
userName in the deploypath with your cPanel username.
But what's going on here?
- We specify the path to the directory where cPanel where should put the GitHub repository files. We want this to be
- We specify which files to deploy. In our case, we only want the build files, i.e. files in the
publicfolder, to be deployed. This is what
-R public/*is for. It says "take all folders and files in
gatsby build to create the
public folder and push it to your repo. You can use
gatsby serve to check the build files.
Once you've set up your repository and everything is on GitHub, go to the cPanel menu and click on
Git Version Control. Click on
Create to create a new repo and paste the clone url of your GitHub repo.
Then choose a path where your repository should be stored. It doesn't really matter, you can choose any path.
/home/userName/repositories as it makes it easier to find it should I ever need to.
Choose a repo name and click on
Create. Make sure that your
public_html folder is empty, go back to the Git control panel in cPanel and click on the
Manage button next to your repository name. Then go to
Pull or Deploy, click on
Update from Remote and then
Deploy HEAD Commit.
That should be it! Enjoy your website, generated with Gatsby, deployed to and hosted by cPanel.