SSG vs Headless or Serverless - Which CMS to choose ?

The Evolution of CMS - My Experiences

“CMS” stands for Content Management System, Its the tool or software that one uses for management of a website like a Blog or any thing that got a lot of content like Ecommerce Stores. And I have always been interested in CMS’s evolution. Recently, I realized that most of the people don’t know about this evolution. So, This article is a guide for all of them !! :D

Today I am going to tell you my story or views and experience on the most popular one’s.I have used the following third party blog hosting platforms - Blogger, Hubspot, Shopify, Tumblr, Wordpress.com, Wordpress.org, Medium, Ghost, Jekyll, Lesspod, Gatsby. Because, It’s important to understand the differences between your choices !

It was the time when I was in school in 9th grade around 2008 that I got excited about blogging. It was not that writing excited me, but the fact that blogging can make you money through ads or other marketing methods. That time Blogger.com and Wordpress.com were the most popular platforms for that I knew. So i started with a blog with Blogger at first. Created a blog named https://sujaykundu.blogspot.com for personal blogging.

Pros of Blogger -

Template Designer

blogspot Subdomain

Https support ( came a lot later )

Custom domain support

Different styles design for the blog like Flipboard, Magazine, News etc.

Support for Blogger Templates in xml formats

SEO and analytics support

Adsense Support

Cons that I felt - Blogger.com

Building Templates was not that easy

You will want to get rid of “Powered by Blogger”

You can’t be satisfied with your design. You will likely be tinkering it all the time to make yourself feel better.

No support for Backend Functionalities like Authentication or user based interactions.

Jumping to Wordpress.com

I realized the blogger was limiting me many features like Ads, Email Campaigns, Themes, so I jumped to wordpress.com. This time I thought to use a different name and niche for my blog. So i created https://computerix.wordpress.com

Pros - Wordpress.com

Easy to use interface for managing blogs and blog posts

wordpress.com subdomain

free SSL included

Secured and fast with SEO optimized

Great admin interface

Large number of themes to choose from

Cons - Wordpress.com

Can’t use custom domain without upgrading to pro

Limited functionality, Cant change anything at core.

You will want to remove “Powered by Wordpress”

Upload or Storage Limits

So this made me think, what better. So i got a chance to try Hubspot through one of my friend. I guess it was the time around 2011

Medium

Medium is a great platform ! I agree, but it’s paid to get a self hosted Medium blog. Ditched ! I used to write on medium earlier. I still have one article, good for writing and gaining followers, because of large user base.

Tumblr

I would say when it comes to microblogging, Tumblr I have used a lot earlier. But now ! Time has changed. I stopped using it. Rather I would use Twitter !

Hubspot

Pros -

Great tools like CRM, Salesforce integration and Marketing Automation

Powerful CMS features

Optimization and Analytics support

Great tools for social media marketing

Custom Domain, SSL and SEO

Cons -

Its Paid. I couldn’t afford that anyway. Though a great tool.

Available Open Source CMS - https://github.com/postlight/awesome-cms

WordPress.org ( Self Hosted )

When i got to know that, i can buy a wordpress hosting using Hostgator or Godaddy. I got thrilled. Soon I bought one, to fuel my curiosity. First time i came across CPanel and all that DNS stuff that i thought was useless at first. I only wanted a blog.

But this time, unlike wordpress.com, It was a different experience all together. I was working with things like phpmyadmin and MySQL. Only to start the blog with a theme Twenty Seven. But it made me realise that its got more functionalities than a traditional blog like blogger or others that i have used previously did.

I gave time to learn and understand the core of WordPress, How it works, understanding the architecture of the CMS. How plugins and themes in WordPress works.

There was almost every plugin available out there for your use case. Like if you want to build a online store -woocommerce plugin was there, want to start a social community website - Buddypress is there..

A huge community of developers is behind wordpress and its growth. And almost 67% of the websites in the internet used wordpress.Yeah that was popular !

So i built and shifted my blog sujaykundu.com to wordpress.

There were many options that you can deploy wordpress to , some of them which I tried :

Wordpress Hosting by Hostgator + Cpanel

VPS server (Linux) + LAMP Stack + Wordpress

Digitalocean Droplet (Ubuntu) + LAMP Stack + Wordpress

I used to get bored soon with the design or theme that i used. So i used to search online for themes, I realized that there is a serious dedicated marketplace for wordpress themes and plugins where the developers are earning alot for their developed themes or plugins for wordpress to enhance wordpress core capabilities like if you want a chat system in WordPress. Go check the market - you might find one. Most popular themes are still available in Themeforest.com.

This made me start learning and developing my own custom wordpress theme around 2012 mid i started building sky a wordpress theme. But its the issue of wordpress that it gets a update faster than than expected.. everytime you change or upgrade to the latest version.. your dependencies or plugins might break the theme or other systems.

Pros -

Self Hosted using Cpanel or VPS

You can build what you want

Easy to setup and customize with various available plugins and themes.

custom domain or sub domain support

ssl and seo support

Cons -

since 67% of internet already uses it. There will be lot of vulnerabilities or hackers that you need to worry about.

Uses PHP at its core,

Faster or unexpected ugrades could lesd to breaks.

Very slow. Because of serverside php rendering speed.

Jekyll - Enter the world of Static Site Generator

Jekyll is static site generator built in ruby, uses liquid and markdown as base to build static templates. This was a bit complicated at first to understand, but after when i understood its power - its easier and too geeky for me as a developer.

Pros - Jekyll

No headache of depending on a backend

Secured and Fast

Uses Rubygems dependencies ( You can improve your functionality)

Liquid Templates

Highly Customizable

Easy Deployment using Github Pages or Netlify

Integrating third party plugins is easy

Works like a CMS, but its not. Only focuses on what you want to reciprocate.

Custom Domain Support

CDN and SSL support

Very Cost Efficient. All you pay is the cost of the domain.

CONs

Not for normal users, there’s a lot of technical things involved that one needs to understand.

You need to know Markup, Ruby and Liquid.

Not as functional as wordpress - You cant depend on Jekyll for building heavy duty apps.

For a full list of Static Site Generators - https://staticgen.com

JAMstack

JAMstack is a new way to build content-heavy websites and web apps. Using JAMstack delivers better performance, higher scalability with less cost, and overall a better developer experience as well as user experience. Your website architecture is JAMstack if it meets following three criteria: client-side JavaScript, reusable APIs powered by microservices, and prebuilt Markup. In many ways, JAMstack is obvious next evolution of SSG as it requires templated markup to be pre-built at deploy time usually using a site generator. However, it is important to note that JAMstack can serve both static as well as dynamic content. Using JAMstack you can add dynamic functionality such as user identity, HTML forms, and personalisation.

Going Serverless

Everyone wants to deploy a blog but worries about how to save money building one. The architecture behind Serverless CMS is that you use a Backend as service Infrastructure and only worry about the code + You can customise the looks according to your needs. Until your requirement is more than the limit, these Cloud Based services won’t charge you !

What is Serverless?

According to Wikipedia, Serverless is a cloud-computing execution model in which the cloud provider dynamically manages the allocation of machine resources. Pricing is based on the actual amount of resources consumed by an application, rather than on pre-purchased units of capacity. The server management and capacity planning decisions are completely hidden from the developer.

How does Serverless blog compare with Static blogs?

Serverless blog have some of the niceties of static blogs and overcome some of their shortcomings.

Static blogs hosting can be inexpensive and static blog tools like pelican or jekyll make it very configurable. But for every update, the blog would need to be compiled and the updates need to be pushed to deployment.

Serverless blog hosting is also inexpensive because you only get charged for each visit. The per visit charges are also fairly minimal. Adding a new blog post or updating a post happens instantly like any other online blog platform Four reasons why you should go Serverles :

Most frontend Developers write Business Logic in the app. Prying eyes may try to reverse engineer and modify your app’s code.

Instead of having a logic that is susceptible to change periodically when an app needs to be developed in another platform(web/mobile), a business logic can easily be abstracted into a piece of function and inserted into the server thereby exposing that function universally.

You’d always need to publish a new version of your app whenever you change your app’s codebase (mobile app) and behavior.

Scalability will no longer be an issue. You will only be charged for the execution times, which means no amount will be charged for unused space.

There are many providers that support Cloud Serverless CMS infra. Some of them that I know :

Firebase Cloud Functions + Firebase Hosting https://firebase.com

Amazon AWS Lambda + EC2 https://aws.amazon.com

Serverless CMS :

So, In order to acheive serverless, these providers have given the ability for developers to acheive this, via using their services.There are many options now which one can use to just deploy a blog, one of them i would suggest you to try are :

LessPod.org + Firebase ( which I contribute to (currently in development))

WordPress + Shifter + AWS S

OpenSource Project + Zappa + AWS Lambda

HEXO (Open Source) + AWS S3

Chalice + AWS Lambda

Hasura + Next.js + Zeit

And the list goes on, possibilities are limitless … You can check out the Curated List of Serverless Providers here : https://github.com/anaibol/awesome-serverless

Headless CMS

The Evolution does not stop here, If you are more of a Front end developer, who don’t know how to proceed with the Backend to build API’s and managing content.. Headless CMS is what you can look to build your Blog’s with. All you need to do is connect your Frontend frameworks like React, Angular or Other with the Headless CMS services, that can help you managing your backend at ease. Some of them which I really like were:

ButterCMS http://buttercms.com

Contentful http://contentful.com

CosmicJS http://cosmicjs.com

Strapi https://strapi.io

Netlify CMS https://www.netlifycms.org/

Daptin http://dapt.in

Directus http://getdirectus.com

A headless CMS such as Contentful has no presentation layer - a key distinction between headless CMS and decoupled CMS given they both provide content as APIs. With a headless CMS, the task of the content presentation is performed by an external client consuming APIs exposed by headless CMS. Here are few examples of an external client utilising the APIs exposed by a headless CMS: static site generator (SSG), single page application (SPA) (client-side as well as server-side rendering), a mobile app, a WordPress site, or an IoT device.

GraphQL

Some headless CMS solutions such as GraphCMS and Mozaik are taking content infrastructure to the next-level by offering GraphQL based content APIs. GraphQL - created and open sourced by Facebook - is a powerful query language for APIs and a more efficient alternative to REST. In a nutshell, GraphQL enables a client to specify exactly what data it needs from an API - nothing more and nothing less.

For more list of Headless CMS’s : You can check out https://headlesscms.org or https://github.com/n370/awesome-headless-cms

####### Application Delivery Network

A common theme across static sites, JAMstack, and Headless CMS is the extensive use of the content delivery network (CDN) to unlock the speed and performance. Caching API response of a headless CMS seems desirable but not essential - in the majority of cases, you are better served by caching the prebuilt Markup consuming the API response. Nonetheless, for static sites and JAMstack, CDN is essential.

Firstly, using a CDN has become a lot easier and cheaper. Now a day there are so many options - Amazon CloudFront, Cloudflare, Google CDN, Azure CDN, Edgecast, Fastly, and the list goes on. Gone the days when you required to have big fat-contract with Akamai. With most of CDN services, you can start small and pay as you go.

Secondly, having a CDN in front of origin (static site or APIs) reduces the global and regional latency. This is achieved by caching content (static HTML page, assets, APIs) at a large number of geographically distributed edge locations. In addition, CDNs scale really well - we are talking about 5-10k concurrent requests without any issues. To protect origin server from request overload some CDNs also support origin shield - an additional caching layer between edge and origin servers. Typically, this mid-tier caching is a designate edge or pop location closer to your origin server and other edge servers query origin shield rather than origin directly.

Lastly, several static sites hosting platforms such as Netlify have rolled out their own CDN. Netlify refers their CDN infrastructure as Application Delivery Network (ADN) which has no distinction between edge and origin servers. This is primarily to support the atomic deploy model and instant cache invalidation so that there is no risk of stale content or inconsistent state. With ADN, switching between multiple version of a static site is as easy as changing symlink to a directory. Atomic deploy model can be extended to advanced functionalities such as staging, instant rollbacks, phased rollouts, and A/B testing. Many conventional CDNs are unable to support some of these features due to restrictions and limitations around the instant cache purge. For example, some CDNs rate limit the cache invalidation, while others charge for each cache invalidation request.

ALL Hail ! Serverless + Headless is Here !!

This is crazy ! Think about it ! You don’t have to worry about your server cost nor your data !

I hope you enjoyed this post, as much as i loved writing it and realizing its vastness. Let me know what you think about this in comments. The Advantages Of Going Headless More Interesting Stuff Coming Up !!