Fullstack web developer, creative thinker, businessman and entrepeneur who helps his customers achieve online success

How I hosted my Gatsby and Strapi project for free


I rebuilt my entire portfolio in Gatsby to improve performance with Strapi. This is how I deployed this solution.

Kevin From

The problem

Having built my personal portfolio using React, I realised that the initial loading time was very high. Since the data rarely changes a statically built site would make sense, so I opted to rebuild the entire project in Gatsby.

The solution

Rewriting in Gatsby I also wanted to add specific detail pages for the projects, to get some more content on the site. To do this I queried strappy for all the projects and their slugs, for which I could then create the specific pages.

exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
  query ProjectsList {
    allStrapiProjects {
      edges {
        node {
          slug
        }
      }
    }
  }
  `)

  data.allStrapiProjects.edges.map(edge => {
    actions.createPage({
      path: '/projects/' + edge.node.slug,
      component: path.resolve('./src/templates/project-details.tsx'),
      context: { slug: edge.node.slug }
    })
  })
}

Hosting

My first problem regarding hosting was hos to host Strapi. Luckily Strapi has great documentation for how to host using an nginx proxy (read more), so I ended up self-hosting Strapi on my Ubuntu VPS. Next up was hosting, and more important, building the Gatsby app. Gatsby themselves offers a building and hosting solution, so naturally I wanted to check that out, and it turns out they have a great free tier for my portfolio! The only thing I had to do was log in using Github, select my repo, set up my custom domain and click deploy.

In order to trigger a new build when data is updated, I created a webhook in Strapi which sends a POST request to and endpoint, and that's it!