43
31 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. 4

    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

      Very cool. I'm using 11ty too
      Did not know that you can use Airtable for the data source. Thanks for sharing

      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.

      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

    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.

  3. 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!

  4. 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!

  5. 1

    Super nice! Thanks for that, Fed!

  6. 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 :)

  7. 1

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

  8. 1

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

  9. 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)
  10. 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.

  11. 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.

  12. 1

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

  13. 1

    I am using:

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

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

  15. 1

    Thanks. Nicely explained.

  16. 1

    Awesome resource, dude. Thanks!!

  17. 1

    Thank you for putting this together

Trending on Indie Hackers
I redesigned my landing page to something completely unconventional/unprofessional 14 comments Breaking down one of the most successful ecommerce SEO strategies (IKEA) 10 comments 44 products by bootstrapped startup founders you can use 9 comments What is the #1 problem why aspiring entrepreneurs won't start their dream business? 8 comments How we automatically provision SSL for SaaS customers with custom domains 6 comments On productized services, a crappy logo, and a shift in perspective that changed everything: Jaclyn Schiff's story 5 comments