48
33 Comments

The CheapStack: How I host my website for free

Hey Indie 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.

  1. 5

    I use similar setup for my MVP, all free

    • 11ty - static page generator
    • Gitlab - git repository
    • Netlify - hosting
    • Airtable - data
    • GoatCounter - analytics
    1. 1

      I never left Github, it's free to have private repos.

    2. 1

      This comment was deleted 2 years ago.

      1. 1

        Yes, you can use it and I prefer it to Google Sheets. Most people use front-end framework like React to connect with Airtable and then, when a visitor loads a page, data is pulled from Airtable.
        I took a different path though, people have to fill a form on my website and that data goes to Airtable, then, I download this data in a JSON file which 11ty uses as a database so all the pages are completely generated on build time.

        1. 1

          Do you find that you go over the free tier if you are constantly querying the database though?

          1. 1

            So, I was doing this on one of my old projects... no, I wasn't querying the database all the time, that's the thing... I was using 11ty static generator and every time the website was being rebuild it pulled the data from Airtable and static pages were created. That means the data wasn't queried for every user who visited the site but only on every site build.

      2. 1

        Also using 11ty. Didn't know about GoatCounter. Thanks for sharing!

        1. 1

          GoatCounter is not so nice looking as some other analytics apps out there, but it has all the basic functionality and it's free (donation based) so I think it's great for new projects.

  2. 2

    Instead of gatsby.js, I use Next.JS with React. The other tools/sites are the same.

  3. 2

    This is an awesome playbook.

    One thing to add: for custom emails (send & receive), I use https://improvmx.com/, which makes it simple to set up and free!

    Great job on Hive index btw. I have a megalist of communities that might be cool to add to Hive if they are not already there. Here's the link: https://docs.google.com/spreadsheets/d/1O97qjuCc6erLIcJiedPrsq3G9E2ECio_iltuF-YADtI/edit#gid=0

    1. 2

      ImprovMX is a great tip for email, thanks!

      That's a great list of communities, really appreciate you sharing. I'll add some of the ones that I'm missing.

  4. 2

    Well,

    This is almost same stack that i use for heygamer.co :)

    Gatsby + Airtable +Netlify + Algolia

    Why Airtable? Because actually it gives you lots of superpowers that spreadsheets can't offer. For example I am doing all of my database filtering there with ease and no need to code some complex logic in my app.

    Btw also add marketing stack here :) Mailerlite for cheap email marketing mailgun for transactional emails.

    1. 1

      Nice stack :) Since Gatsby has graphql built-in, that makes it such that no complex in-app filtering is necessary, just graphql queries. I'll check out airtable though for a future project, I've heard great things.

      1. 1

        Yes you are right, but airtable gives you this extra data types + easy image hosting and power of views. And making a relational databases are hella easier :)

        1. 1

          Sounds dope, I'll give it a try!

  5. 2

    Man, I love your website. Such a cool resource!

    I have a small community with my project, learningin.tech . Can I still submit it? 🙂

    1. 2

      Cool website! I put it up here.

      1. 1

        Awesome. Thank you!

  6. 1

    Super nice! Thanks for that, Fed!

  7. 1

    Thanks for the writeup, this is incredible. I was checking out your site and wondering if you created the themes - card styles , Rotating Word Containers and the Search functionality all by yourself ?

    Or is it like there are templates available for these as well?

    1. 1

      Hey, thanks! The styles for the site are mostly custom, and Algolia powers the search backend. For the rotating word container, I found an existing one on jsfiddle and modified it to suit my needs. You know what they say, good design isn't created, it's stolen.

      1. 1

        Ah, I see. Thanks :)

  8. 1

    Nice! I'm a fan of these kinds of setups. I also do similar stuff with GitHub Pages + AWS Lambda.

  9. 1

    Nice one. I used Stackbit for a side hustle of mine to circumware the need for code writing :-)

  10. 1

    My free stack consiste of:

    • Vercel with nextjs (for the frontend part and sometimes apis)
    • Heroku (if websocket involved as vercel dont support it)
    • Mongodb cloud's 500mb (it's far enough for small projects)
  11. 1

    I don't recommend using google sheets at ALLLLLLL, it was using google sheets just today for uicoach.io and out of nowhere it stopped working i started receiving a quota has been exceeded error, I contacted google and increased the quota but still i got the same error, So if your app has high traffic i don't recommend it

    1. 1

      You're right, google does have quotas for hitting their API as a service account. Thankfully, since this setup only hits their API only when the updates are being deployed, I don't get close to their limit of 100 read requests per second.

      Depending on your application and how it's structured, it's possible to hit their limit. If you have high traffic on your app, and it is possible to make such a change, I would recommend restructuring so that you don't need to make an API call per page view.

  12. 1

    An alternative:

    Heroku is free up to a certain amount of traffic.

    Rails comes with your database of choice so you don’t need to do a whole lot of thinking or gluing together there.

  13. 1

    Great post! IndieData also uses Gatsby for frontend and Netlify for hosting the website. We are using Airtable embeds for displaying the databases.

  14. 1

    I am using:

    • google sheets (free)
    • heroku (free)
    • howsthowk ( cheep )
      lipy.cc
  15. 1

    Nice! I am using similar: 11ty, BitBucket, Netlify, ImprovMX

  16. 1

    Thanks. Nicely explained.

  17. 1

    Awesome resource, dude. Thanks!!

  18. 1

    Thank you for putting this together

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments