Gatsby, Sheets, Netlify, and Algolia - That's All You Need To Host Your Website for Free

Hey Hackers! Here's the tech stack I use to serve up The Hive Index without paying a dime. If you're starting out and don't want to commit to paying monthly server/database costs, some of these resources might be of use to you!

Please note that although the website is dynamic in the sense that I update the data source & redeploy frequently, it doesn't have any functionality where the visitors create data. For an application that has user authentication, CRUD resources, or more complex functionality, you might actually need webservers or a "real" database.

Framework - gatsby.js
Gatsby is a frontend framework for creating static frontend applications (like blogs, documentation sites, portfolio pages). It's based on React, but optimized for runtime performance because the bulk of the work (querying from your database) happens once when you deploy it. Spinning up a website with gatsby is super simple, and they have several starter projects that you can clone and modify to make your own.

Data Source - Google Sheets
My data source is google sheets, which gives me the ability to expand my data source easily, and add fields by simply adding a column in the sheet. It's super easy to work with and you can use this plugin to pull data from your private spreadsheet to make the contents of your application. Just note that to update your website, you need to trigger a redeploy of the gatsby application, simply adding a row into the spreadsheet won't update the data on your site.

Hosting - Netlify
Netlify is a hosting service for static websites. To deploy your site is as simple as pushing up to your github repository, or triggering a build from the Netlify UI. They have a generous free tier, but after a certain amount of deploy minutes or bandwidth of serving your site, you need to pay. In my case, I'm usually at <1% of bandwidth capacity for the month, so until you have a ton of traffic (champagne problems) you don't need to even put in your credit card.

Search - Algolia
My site has a search component, so I'm serving up dynamic content based on the user's search query. This is a bit of a shift from the gatsby way of doing things, which is optimized for knowing the content of your site at buildtime, not runtime. Thankfully, Algolia has a gatsby plugin that indexes your site's contents during buildtime, and you can use the algolia frontend client in your react app to serve up the content on your search page.

This has been a nice tech stack that works for me for this particular style of website. For applications that have many more dynamic features I use a different stack (might write a post about that later).

Hope this post is useful for you as you spin up your ventures.