Jan Gabriel

Mar 17, 2023

3 min read

How I host this blog for free

In my previous post, I explained how I stopped my previous blog ("cppengineer.com") and open-sourced it on GitHub. In this post, I'll elaborate on the architectural difference between the CppEngineer blog and this one, and how the change enabled me to host this one for free*.

The CppEngineer website back end used NodeJS with MongoDB to enable its own custom Content Management System (CMS). It also used server-side rendering with EJS templates to render the front-end static files. The rendering required a machine to host the NodeJS application.

I used a DigitalOcean droplet to host the NodeJS application. A DigitalOcean droplet is a virtual machine with a static IP address. You need a static IP address to enable the linking of a DNS Entry. Thus, when you navigate to your domain name in a browser, it forwards you to a port (e.g. 443 when using SSL) on the virtual machine. The virtual machine then serves your website pages to the user. The cost for the droplet at the time was $6 p/m and it worked great.

In searching for a new modern approach for this blog, I stumbled upon the JAMStack. The JAMStack focuses on using Javascript, APIs, and Markup (JAM) as a web development architecture pattern. This is usually produced by a static site generator or if you write your website in Vanilla HTML, JS & CSS (Thus, not using any front-end library).

The approach of hosting only static files opens quite a few free options. A popular one is for example using GitHub pages. I wanted to use a framework that makes rapid development possible and uses a modern approach to web development.

After some research, I decided on using the NextJS framework. This framework is used by some of the world's largest companies, it uses best practices and it can generate static files for my blog.

I then needed to decide If I was going to create my own CMS again or use a headless CMS. I decided on the latter and chose HyGraph (GraphCMS).

In terms of hosting, Vercel makes it possible to link a GitHub account and they will build and host a hobby website for free. Vercel also provides serverless functions which allow back-end code to run on demand.

Therefore, as a summary:

Front end: Server-side rendered static files using EJS Templates vs. Static files generated by NextJS.

Back end: NodeJS, MongoDB & Custom CMS (Thus, running an application in the backend) vs. NextJS & GraphCMS (Which generate static files once)

Hosting: Virtual Machine at DigitalOcean for $6 p.m. vs. Static generated files by NextJS at Vercel for free.

Feel free to comment on this post or get in touch with me through the contact form.

* At the time of writing this post, I could still host this website for free.