Ever since I left my old job, I knew that I had to be careful about my spending habits, so my first action was to lower my expenses (not that I had much to begin with compared to the average person in the U.S.). Because I no longer had the time nor effort to continue pursuing blogging on my photography blog, I decided to put it out of service as it was costing me $73 annually with no ROI.

So I started wondering, is there a way to have a self-hosted blog website with a CMS for free? Other than the cost of a domain name, I began to do more research on this topic.

The requirements are the following:

Finding a Great and Reliable Free Web Hosting Plan

Google Cloud Platform and Amazon Web Services Free Tier

With these requirements in mind, this automatically ruled out GCP and AWS Free Tier plans. Sure, they can get the job done, but what if I wanted to sell my site someday? I don't want to waste extra time on just training my potential customer how to use the site and all that. Plus, their obscure pricing model and vocabulary will most likely make it confusing for a non-technical person to maintain.

Github Pages

Although GitHub Pages would've satisfied most of the requirements, it falls short when it comes to meeting the CMS requirement. Not only that, recalling that the goal is to lower expenses, I didn't want to commit myself into a subscription with GitHub just to create a private repository to host my website's files. GitHub Pages, you're out.

Heroku Free Tier

So I took this opportunity to fiddle around with Heroku's free tier to host my side projects which requires a backend. Heroku did the job fairly quickly and easily. The main con about Heroku's Free Plan is they put the site to sleep after a certain time of inactivity. This automatically ruled out Heroku.

Netlify

As I did some more planning, thinking, and researching, I eventually recalled stumbling upon the concept of hosting a static website for free on sites like Netlify. However, I quickly remembered that a blog needed a backend, and even if I were to somehow find a free backend hosting service and just do a REST API communication, I just can't afford to risk any security compensations just for the sake of lowering my expenses. Plus, I would much prefer both ends to be hosted on one platform.

It wasn't until the last 2 weeks of my #100DaysOfCode challenge when I finally stumbled upon a potential solution to my problem, and that was Netlify CMS.

What is Netlify CMS?

Netlify CMS is a free CMS made by the developers at Netlify which allows users to have a fully functioning, yet simple CMS for their static website so the owner doesn't have to go into the HTML files and type in code to create a new blog post every single time.

netlify-cms-dashboard

This was important to me because I wanted to simply login to my site remotely and blog at my own leisure without having to touch a single line of code. Not only that, it also solves my issue of not having a backend since a CMS usually requires a backend, but because Netlify CMS was made by the guys at Netlify, they solved that issue with the Netlify Identity service.

Because they're the ones who created it, chances are, they will most likely keep it up-to-date which will take care of any technical maintenance and security issues that may come up on the CMS side of things. That's less time wasted on my part maintaining and fixing technical issues, and more time spent on building an online presence in the digital space.

Not only that, Netlify also provided the ability to assign a custom domain name for FREE without having to upgrade to a paid hosting plan. Perfect.

The Website

With the hosting selected, and the CMS problem solved, I now had one more challenge left, and that is what framework or library should I use for my frontend website?

I didn't want to resort to the good old fashion HTML and CSS static website, because as a web developer, that would just be plain boring! This is when I stumbled upon the concept of the "JAMstack".

What is a JAMstack website?

A JAMstack website is a website powered by client-side JavaScript, APIs, and Markdown.

Image screenshot from the official Jamstack website.

What this meant is I get to avoid creating a boring classic static website while being able to make use of using a SPA along with the power of a REST API to extend upon the features of a normal website. Not only that, I get to update the contents of the website without having to touch a single line of code through Markdown.

Now, I know Markdown is still new in the game of content creation, and most people who are non-technical will most likely not know about the Markdown syntax, but because of its low learning curve, I concluded that it would be a good exception and a risk that is well worth taking.

Choosing a Frontend Framework

I had several options pre-configured and ready to go courtesy of the developers over at Netlify with just a click of a button which are the following:

The one that caught my eye was GatsbyJS since it was based off of the React.js library, but because I have limited experience working with React.js, and was concerned about the potential issues I might face in the near future, I decided to look elsewhere.

The next best option which I had the most experience with is Vue.js, specifically Nuxt.js, another SPA competitor to React.js.

Fortunately, someone made a GatsbyJS equivalent in the Vue.js ecosystem: Vuepress. Perfect.

With that in mind, I started installing the dependencies needed to run Vuepress, I read through the Netlify CMS documentation, and I was on my way.

Fast forward a few days later, I managed to figure out how to connect Netlify CMS with Vuepress so that they properly work well with one another. I did face some hiccups and inconsistencies when it comes to having the proper file structure setup so that the contents displayed properly, but I managed to figure them out eventually.

My first ever JAMstack website is live and running without a problem.

What's Next?

With the challenge of making a blog website for free with a free CMS solved, the next thing I would like to explore or sometime later on in the future start looking into is how to give my JAMStack website the ability to sell products online and safely collect payments for free.

Conclusion

So, is it possible to make a 100% self-hosted website for free? Yes. There is still the factor of the domain name, but let's face it. Domain names will never be free unless you bought it as a free add on from some hosting company because you bought into their hosting plan (e.g. Bluehost). Even then, you'll eventually have to start paying the yearly renewal fee.

With that in mind, if you want a 100% free self-hosted website with a free CMS that is not Wordpress, take a look at JAMstack websites along with the Netlify CMS. They'll get the job done.

Sure, there are better headless CMS alternatives out there that provide way more value than the Netlify CMS, but that will start introducing costs and an extra account to keep track of. Yes, there are some that do offer a free plan, but if you don't mind managing an extra account, go for it.

If you found this post helpful in anyway, be sure to share it. Make sure to also leave a comment below if you have any other ideas as to how to approach this 100% free self-hosted problem. What have you done before to tackle this challenge? Maybe you know of a better way? Feel free to share it. I'm all ears!