How I Host My Buzzword-Powered Blog For Free

My blog is what I like to call "buzzword-powered" since it's my testing ground for new technology I want to try out. In its current form, it's a single-page React app, generated by Gatsby. The entire site is pre-rendered static pages so even if a user doesn't have JavaScript enabled they'll get the regular experience of loading each page over HTTP requests. But if a user does have JavaScript enabled, the site will turn into a single-page progressive web app which will continue to work even if they have a spotty internet connection, or lose access all together.

In short, it's a mobile first, offline capable, pre-rendered static single-page progressive web app using React, generated by Gatsby.

All of these buzzwords make for a fantastic user-experience, I hope. On the first visit, the site loads in about one second and only downloads about 500KB of data (that's only half a megabyte, while the average site these days are several megabytes). Now that the app is loaded, subsequent page loads are, for all intents and purposes, instant. Only a few bytes of data need to be transferred to ensure the page is up to date. Even if the user leaves the site and comes back in the future, the entire site loads even faster. Less than a second to render the site and only a few hundred bytes per page viewed to make sure everything is up to date.

Not only is using my site easy for my readers, but it's easy for me as well. Running a static site is significantly easier and far more secure than other traditional blogging platforms like Wordpress. The biggest road-block to using a static site is that having a CMS is objectively more user-friendly than committing new files to a git repository or uploading new files to a server. That's why I decided to just use a CMS to handle the content for my blog. If you check out the code for my site (over on GitHub) you'll notice that none of my posts are there. That's because when building the site's static pages, it can pull data from Contentful and uses that information to generate the pages. This has allowed me to open-source my blog's framework without giving up my copyright on all the content I write for it.

That brings me to the first part of how I host my content for free...

Free Content Management

Contentful allows you to create different content types with various fields. This works out perfectly for something like a blog. Any time I want to write a new blog post, I just log in to Contentful, create a new post and fill in all the fields, and as soon as I publish the post it starts to go live. Because Gatsby only pulls data from the API when it builds the site, and because it only builds the site when something has changed (either the code or the content) I never have to worry about hitting any sort of rate limits. I'm the only one who writes for my blog, and I certainly don't have dozens of content types or thousands of posts, which allows me to easily stay within the restrictions of their free plan.

Normally, editing content on an external service like Contentful wouldn't cause a site hosted on a different server to update. But because of the power of webhooks, any time I save an update on Contentful it sends a message to my hosting platform to rebuild the site.

Which brings me to the final part of how I actually host my whole site for free...

Free Static Site Hosting

Netlify is a fantastic service if you're looking to host static sites. The biggest restriction is that the free plan only allows for one account, but that's fine if you're a lone-wolf developer (or the kind of person who shares Netflix accounts). If that restriction isn't a problem for you, and none of the extra features are must-haves, then you won't hit any resistance to using Netlify. A site can be pulled directly from your git repository and their server will run whatever build commands you need to run in order to build the site. After the site is built they'll deploy the static files to their CDN.

Any time you make a new commit to your git repository's master branch (or whatever branch you deploy from), Netlify will rebuild your site automatically and deploy it.

More importantly is updating when new content is published in Contentful. As I mentioned, any time I save new content a webhook will be called. More specifically, a Netlify webhook is called with a secret key which triggers a site rebuild. Gatsby grabs the new content and builds a page for it, and updates whatever else needs to be updated when a page is added.

All Together

So that's how my buzzword-powered blog is hosted. I hope this has encouraged you to come up with creative ways you can provide your users with a blazing fast experience that doesn't sacrifice cool features and buzzwords, all without giving up your CMS or paying anything to host it.

Disclaimer: This post was not sponsored. I encourage you to use these services (for free) if you are interested because they are fantastic services that I enjoy using.