Building a real SPA blog

This blog is a real single-page application with no server code or database. It's refreshingly easy to work with.

Published: Tue, August 8, 2017, 08:00
Category:
Software development
Tags:
JavaScript
SPA

tl;dr 🔗

This blog is created with Knockout and Materialize, and have all blog posts in a single JavaScript array. All static.

Medium 🔗

I wanted a blog. A plain and simple blog. More often than not I read blog posts hosted by medium.com. It seems like they are really dominating these days (at least for tech blogs). And I understand why; the layout is so simple yet attractive and easy to read.

I expected to settle with a medium.com blog. However, it isn't possible to have ads in the blog posts. And I wanted that.

Wordpress 🔗

Wordpress has ruled the world for quite a long time. wordpress.com of course costs money if you want to make any money using ads. I don't expect many dollars in income, so I'd like to avoid any fixed costs. Then there is wordpress.org, but I don't really want to host it myself and stay up to date with security issues and all.

Blogger 🔗

I looked at Google's blogger.com. Customizing the layout and templates I thought I was getting there. They have some really nice features. But I couldn't make it look and feel exactly right. And it felt cumbersome to do all the adjustments to get where I wanted.

Good old days 🔗

I knew I didn't want to reinvent the wheel. If this had been somewhere from 2000 to 2007 I probably would have mashed something together using PHP and MySQL. But the thought of doing that in 2017 repelled me. I didn't want any database setup, SQL or stuff that takes time from creating the actual product.

Cloud hosting 🔗

Further on I didn't want some hosting at one of the big companies offering "free" (they tend to end up costing a few bucks) backend hosting with all the hassle of setting up a new environment and installing some SDKs that needs to be constantly updated or suddenly removes support for some version of whatever you use.

Requirements 🔗

Basically I had the following requirements.

  • - High readability and ok design
  • - Ad support
  • - Simple hosting
  • - Easy, but advanced customization
  • - Quick to set up with no hassle (no database setup, easy development, no unecessary heavy build systems)
  • - SEO friendly

Solution 🔗

I was wondering about using just static HTML files. That would indeed answer most of my requirements. But then I thought about having a simple JavaScript SPA.

JavaScript framework 🔗

I suppose Angular 2 or React would be among the most logical choices of JavaScript frameworks in 2017. But I wanted productivity and not use a lot of time to learn yet another framework when all I want is a quick and simple blog, so I went for good old Knockout which I have used quite a lot as earlier on as an IT consultant.

Is Knockout JS dead?

While one might argue that Knockout is beyond its prime time, it sure works great and it is mature. And no matter which newer JavaScript framework I would go for it would soon be considered "old". If you haven't read the article How it feels to learn JavaScript in 2016 by Jose Aguinaga, you really should. It's painful to read, but so true.

Design 🔗

I'm no designer. So I like to use UI frameworks that ensures that I can't get it completely wrong. I really like Google's Material Design and is used to using it on Android. I quickly found Materialize and haven't looked back. It has great features and is a joy to use. I just wish it didn't depend on jQuery.

GitHub project 🔗

If you're interested you can have a look at the source code for this blog at https://github.com/roys/js-web-blog. The project itself is licenced under the MIT License, but for the contents (posts and images) I reserve all rights.

Get notified when there are new posts! :-)