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:
npm install -g gatsby-cli
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:
git remote add origin firstname.lastname@example.org:gatsby-on-divio-cloud.git(make sure to use your git remote)
git push origin master --force
Your local setup should now be in sync with Divio Cloud. Let’s configure your project to deploy it.
Dockerfile with the following content:
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
# 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
CMD ["npm", "run", "deploy"]
Next, create a
.dockerignore file with the following content:
To finalise the setup, add the deploy script to the
"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!