Host a Gatsby project on Divio Cloud

28. November, 2020 • 3 min read • Work

How I setup my website on Divio Cloud

Preparing a Gatsby project to be hosted on Divio Cloud is relatively simple. I'll guide you through the process of creating a Gatsby starter project, adding the Divio Cloud remote repository and deploying the project.

There have been a lot of improvements on Divio Cloud since I launched my website. These changes made the hosting setup even more straightforward. I decided to record my steps while upgrading my website. Start by heading over to control.divio.com and create an account.

First, add a new project and enter an appropriate name. Choose ”Build your own” from the options, as we want to configure everything by ourselves. Hit ”Continue” to proceed.

Select the developer subscription to get started. Make sure to upgrade your subscription as soon as you go live; otherwise, you may lack resources to handle the incoming traffic. Also, consider getting in touch with Divio’s excellent support team to assist in choosing the right subscription to your needs.

Next, create a project folder somewhere on your system and create a simple Gatsby project:

  1. run mkdir my-gatsby
  2. run cd my-gatsby
  3. run npm install -g gatsby-cli
  4. run gatsby new . https://github.com/gatsbyjs/gatsby-starter-hello-world

You can also use any other Gatsby starter with Divio Cloud, just make sure to set up the project in the root of the folder.

Next, connect the project to Divio Cloud:

  1. run git init
  2. run git remote add origin git@git.divio.com:gatsby-on-divio-cloud.git (make sure to use your git remote)
  3. run git push origin master --force

Your local setup should now be in sync with Divio Cloud. Let’s configure your project to deploy it.

Create a Dockerfile with the following content:

FROM node:14.15.1-alpine

RUN apk add --no-cache \
  make g++ && \
  apk add vips-dev fftw-dev --update-cache \
  && rm -fR /var/cache/apk/*

# the cli is required to build the site
RUN npm install -g gatsby-cli

# switch to app dir to install node_packages into app/node_packages
# this allows them to be available on your host system through docker-compose
WORKDIR /app

# copy the package files first for them to get cached
COPY package*.json /app/
RUN npm install

COPY . /app

# build the project and serve it
RUN npm run build

EXPOSE 80

CMD ["npm", "run", "deploy"]

Next, create a .dockerignore file with the following content:

.cache/
node_modules/
public/

To finalise the setup, add the deploy script to the package.json file:

"scripts": {
  ...
  "deploy": "gatsby serve --port 80 --host 0.0.0.0"
},

Commit all your changes and push them to Divio Cloud. Go back to the web interface and hit the ”Deploy” button on the test server. Wait a bit, and you are ready to go! Open up the test server by clicking on the “env url”. Make sure to check out the “Logs” section if you are experiencing any errors along the way.

Enjoy your new Gatsby playground.

‘Till next time!