A modern website with zero fees?

Is it possible to create a modern website capable of anything with zero hosting fees? And can it be turned into a boilerplate for easy duplication?

I've had this idea for some time now. I spent a week to make it a reality.

This page is it in action!

These were the requirements:

Storyblok

Drag and drop headless CMS

I did my research on latest headless CMSs and landed on Storyblok. It has a very generous free plan and it does have some drag and drop behavior.

But what sold it for me was its commitment to Atomic Design. Storyblok is not only a CMS, it's a scaffolding for a design system. Its component schema pattern and content writing feature set uses Atomic Design methodologies.

“The design system holy grail involves creating an environment where the pattern library and live applications are perfectly in sync.” - Atomic Design by Brad Frost

Beyond its holy grail potential, it has a rich set of features that a full fledge CMS requires.

  • Custom components

    gives endless possibilities. Any design or behavior can be turned into a component and that component can be added to the CMS.

  • Live preview

    editor in Storyblok is pulling in your live site and updating it on the fly. It doesn't publish those changes until you actually publish, its using hooks they provide in the SDK to manipulate the DOM. So what you see is what you actually get. This is the genius of Storyblok.

  • Webhooks

    are the key to publish the static website when content changes. More on that later.

  • Admin

    panel has everything you could ever need. The free plan supports one user but you can add more users a la carte for €9 a month.

  • Security

    is well integrated. Access tokens for as many different preview environments that you need and custom tokens for webhooks. This allows you to lock down your preview environment so it can only be viewed in Storyblok. If you want to see the preview env outside Storyblok that can be done with Firebase authentication.

Storyblok is the CMS I've been looking for

I'm a design system and CMS nerd. I'm blown away that it ticks all the boxes and has a generous free plan. Also, with its rich text editor it should be familiar for non techies as well.

Serverless

Firebase infrastructure

My go to serverless and hosting infrastructure is Google Firebase and it can handle everything I throw at it.

Firebase dashboard

An important factor is Firebase's free quota is very generous. For Ready Planner I pay about $0.03 a month. Yes, you heard right, 3 cents a month. And that's only because I have a lot in Cloud Storage! So most websites will be free. You only pay when you have a lot of traffic or you use a lot of resources. So it scales nicely for small businesses.

Firebase has all the bells and whistles you could every need in a website. Here is a short list of my go to features:

  • Global CDN

    ensures the static pages are served instantly. No waiting around for a server to respond, or worse, a cloud function to cold start and then respond.

  • Cloud Functions

    are really easy to setup and they provide a ton of capabilities. They are like having a traditional server except they only run when there is a request, meaning you don't pay for uptime.

  • NoSQL database

    in Firestore. A very easy to use and manage database.

  • Authentication

    is plug and play. User management is easy, and Firebase provides a signup/login component which allows you to create a new account on your website using all of the popular sign in methods.

  • Cloud Storage

    uses state of the art object storage with granular levels of authorization.

  • Many

    more features to list.

Firebase sets you up for success

Firebase is an all in one solution that makes creating simple websites and powerful web apps easy. If its out of the box solution doesn't support your needs then it can easily integrate with the DIY Google Cloud Platform.

Next.js

Next.js, Remix, or something else?

I wanted to go with a React ecosystem first and foremost. It's what I know best and there are so many open source third party packages.

Next.js home page.

For the preview environment to support draft changes the site needs to render on the server. So the React framework needs to support static generation and server rendering. Remix does server rendering really well but it doesn't do static generation. Not only does it not support it, their ethos is it surpasses static generation. But when you have a free global CDN at your disposal and static sites are blazing fast, don't fix won't ain't broke IMHO.

With the new app router in Next.js a page can support static generation and server rendering. Next.js is also something I know well.

  • Tooling

    is supported by Vercel and getting better and better. Back when I started using Next.js v9 the tooling for monorepos was not very good. Vercel created Turbo which is a build tool with monorepo support at its core. Not only did they fix the monorepo issues with Next.js, they created a standalone tool which is excellent in its own right.

  • Documentation

    is a key requirement when it comes to choosing software and Next.js does this really well. And since they will continue to support the pages router their documentation now allows you to switch between the two when viewing key concepts and APIs.

  • Trusted

    by 1000s of developers. 108K stars on Github.

Next.js has been around and is still going strong

There's a lot to be said about a framework that has been in production for 1000s of websites. New frameworks will continue to pop up, but I've been around the block long enough to know not to jump on the bandwagon until there is a need to. Next.js continues to innovate and get better. As long as that continues to happen there isn't a reason for me to change.

Github

CI/CD pipelines and environments

I've been using Github for quite some time and now their free plan supports private repositories and continuous deployment (CD) pipelines.

Github home page.

Firebase makes it really easy to setup CD pipelines via their command line tool. During merge requests it will run all your tests, build your site, then deploy it to a staging environment. On merge it will do the same thing but deploy it production. CD is a beautiful thing. If it fails for some reason it'll send you an email.

  • GraphQL API

    supports every command I'll ever need. I'm using this API when I intercept the Storyblok webhook and commit the publish details to the repo, which in turn kicks off the CD and publishes the site.

  • Reusable template

    with forking. When a client needs a website I fork the template and I'm off to the races.

Github is the leader

What would the world be like today without Github? Github has changed the way people work and continues to make open source software a possibility.

The infrastructure is done, now what?

Continue to update the CMS with more and more components. The goal is every design pattern a client needs will be turned into a reusable component for the CMS. When the infrastructure supports the holy grail then one must be a design system templar.