How To Deploy a Gatsby Website in 2020

Gatsby.js is an awesome static website generator built on javascript. It helps you to make a powerful website with React.js and generate static content files that you can serve on almost any hosting service.

In this article, we will show you how to build a Gatsby.js website from scratch, and deploy it onto the cloud. For advanced users, we will also show you an easy way to update your changes to the cloud as well.

Getting Start With Gatsby.js

Before starting, make sure you have a working Gatsby.js repository.

Or simply use the template here:

https://github.com/kintohub-examples/gatsby-site/generate

By doing this you will create a working repository of Gatsby.js on Github, under your account or organization.

Deploy Gatsby.js Website To The Cloud

After you set up your own repository for Gatsby.js, the next step is to deploy it onto the cloud. With Kintohub, you can do it with just simple clicks.

1. Navigate to https://app.kintohub.com/ and login/sign-up your account.
2. Create a new service of type Static Website — Grant the permission needed for accessing the repo that we created in the previous step. Or if you prefer not to connect your GitHub account, you may select Import URL
3. Grant the permission needed for accessing the repo that we created in the previous step. Or if you prefer not to connect your GitHub account, you may select Import URL and paste your

This is waht it should look like after importing your URL.

4. Configure the service. Add the build command yarn && yarn build This command is actually doing the following:

• Install the dependencies
• Run the gatsby build
• Generate the contents to ./public which is the default value of “Build Output Path”

5. Everything is set up, now press the deploy button and wait.

6. Once the deployment is finished you can close the release logs, check the Access tab and copy the url there. Paste it to the browser and will see your website is live!

Test Locally

After you have successfully deployed your website, now it is time to customize your website. Before doing that, make sure you have already cloned the repo created from the previous step.

git clone [your_repository}

Now head into the directory of your Gatsby project, and run the following commands

cd  [your_project]
# Install the dependencies
yarn install
# Run the develop server
yarn develop

And after that you will see your website is live on http://localhost:8 and you can now develop your own features!

Update

To update your website, just simply go back to https://app.kintohub.com/ and navigate to the service you created in the previous steps. And now just click the Trigger Deploy button on the top right of your screen.

This will build your latest source code from the repository and deploy it. So just wait several minutes and once the deployment is completed, your changes will become live on the same URL!

What’s Next?

Deploying the Gatsby website on Kintohub is easy! But there are some more advanced features that may suit your website as well. Check them out!

Back your Gatsby website with an API service

https://docs.kintohub.com/service-types/backend-api

Add a custom domain to your website (e.g. www.yourdomain.com pointing to your website)

https://docs.kintohub.com/anatomy/domains

Conclusion

Congratulations! You have successfully deployed a Gatsby.js website onto the cloud within 10 minutes! And now you also have the idea of how to deploy/update a cloud application on Kintohub, which can greatly improve your development speed!

There is not only Gatsby.js but many other frameworks are supported on Kintohub. Please join us on Discord. There are also more advanced guides that can be found here.