Jasmine Web Starter

You will find wherever you start to read about websites or Hosting Packages a CMS tends to feature quite heavily. But other than guessing it some how manages my content, do I really need to know much more or can I just use anyone available.

So lets explore CMS's.

The standard way to build a website is to write an HTML page for each page on your website. These HTML pages are then styled with a single CSS file that brings us the layout look and feel of our website, controlling things like the font, text size and colour of the items on the page.

All of our content is then added into each of the HTML pages, and images are linked from a folder into our HTML pages.

This approach as the website grows can become a lot more work, especially when making global changes to common page content with an increasing page count. Though modern tooling can help us a lot with this, we'll explain more on this a little later.

These HTML and CSS files are then deployed to a Hosting Package along with Domain name, SSL Certificate and CDN (Content Delivery Network) configured.

This approach of building a website is referred to as a Static Website.

How does this change in approach if I use a CMS

A standard CMS tends to be installed into a Hosting Package with a Database configured.

The CMS will give us a login feature to an Admin interface for the CMS within a browser tab from this admin interface we will be able to choose a theme for our website.

A Theme is a template for how your website layout will be configured. This is a starter that you then add your customization to, along with your content sections plus images.

Once we have our theme installed we can then think about our pages generally this means defining a page name and adding content and images within a page designer or using form controls, this is then saved into the database to be used later when a customer views your website.

Common items can also be defined that can be added into the pages, things like footer content, Global Navigation or reusable blocks to display information in.

Once you are happy with the page you can choose to publish it, this means that a customer would then see this page if they browse to your website domain.

So unlike the Static website we do not have an actual HTML page for each page, what we have is a database record by page name that then brings in the content (web text and images) plus the common items and theme items to build the webpage, so it can be viewed by your users.

So any changes to the theme or shared items rollout across all pages once it is saved.

CMS's like this enable you to have a standard interface like a word processor to update website content and then you need to learn how to use the page layout components and block elements.

From a Hosting point of view you need to make sure the hosting supports the requirements of the CMS, lets take WordPress as an example, we would need an up to date and supported PHP version greater than 8.1 and a MySQL version 8.0 or greater, or, MariaDB version 10.5 or greater database. Our website would also need a domain and SSL Certificate just the same as our static website would. Plus a CDN is a great addition to add to any website.

As you are updating the website using the CMS its a really good idea to make sure you have a working backup system within your hosting account as if something goes wrong with the database all your settings and written content could completely disappear.

So now we've covered some history of websites and explored the components of a CMS.

We have just outlined a classic database centred CMS like WordPress which is PHP based.

CMS's are available in a huge number of programming languages which means you can choose one that matches your skills set to enable you to look after it or write custom features for it.

GitHub Based CMS's

Another option is to choose to use GitHub as the base for your website. Now this actually gives us a few options, first we could have a Git repository on GitHub that holds our website. From here we could use the really great GitHub website tooling, like github.dev, to edit and update our content or upload images and commit these changes to the GitHub repository, where they can then be deployed to our Hosting platform using a GitHub Action.

As this is based on a Git repository on GitHub it opens the doors to use a vast amount of tooling and editors which interact with GitHub, but all the time we have full version control of the website and content.

But it doesn't stop there, a growing number of CMS's are available that allow us to store the website content on GitHub whilst still offering an admin section on your website that you login into to make changes, add new sections or images to the website using a web form. This lowers the need to understand the core language when working on just the content.

Static Site Generators

Again this can be based around version control content. A Static Site Generator (SSG) is a great solution for building websites that contain a larger number of pages or where the content is likely to be updated frequently.

An SSG does require a little knowledge to work with, from understanding how to install and running Node.js files (Packages) and writing Markdown files plus JavaScript or TypeScript to make changes to the SSG configuration.

Typically the website content is written and edited in markdown files that are then merged with a theme and site configuration by the SSG, which then outputs a website that can then be deployed to your hosting with a pipeline like GitHub Action.

Every time you update the website content pages the SSG runs to make a deployable website which can then be automatically deployed.

The required knowledge needed to make content changes can be reduced by making use of a Headless CMS to store the content, then a web form could be configured to provide an update and page addition route as in an inbuilt admin section for the website.

What is a headless CMS

A headless CMS (Content Management System) is a back-end-only content management system that acts primarily as a content repository. It doesn't have a front-end, or "head", meaning it doesn't dictate how the content should be presented to the end-user. Instead, it delivers content through APIs to any front-end or client device, whether it's a website, mobile app, or any other digital platform.

Here’s a quick rundown:

Flexibility: Develop your frontend using any technology stack you prefer.

Scalability: Handle a variety of outputs from a single content repository.

Agility: Faster implementation as front and back ends are decoupled.

Think of it as the brain of your operation, where you manage your content and push it to various digital platforms without being tied to a specific way of displaying it. It’s especially useful for businesses looking to deliver content across multiple platforms and devices seamlessly.

I have a static website can I add a headless CMS to it?

Absolutely! Adding a headless CMS to a static website is a great way to enhance its functionality without having to completely overhaul your site.

Here’s a basic outline of how you can do it:

Choose a Headless CMS: There are several options available open source or paid, along with self hosted or hosted versions. Choose one that fits your needs in terms of features and ease of use.

Set Up the CMS: Sign up for the headless CMS and set up your content types (like blog posts, products, etc.). This is where you'll manage your content.

Connect via API: Use the CMS's API to fetch the content. You’ll need to write some code (usually JavaScript) in your static site to make API calls to your headless CMS.

API (Application Programming Interface) is a set of rules that allows different software applications to communicate with each other. Think of it as a waiter in a restaurant who takes orders (requests) and brings back the food (responses).

Display the Content: Once you have the data from the CMS, you can dynamically render it on your static site. If you're using a static site generator like Astro or Next.js, they have plugins and support for pulling data from headless CMS's.

Deploy: Deploy your updated static site. If you're using services like Azure, Cloudflare, Netlify, they can handle both static site deployment and Serverless functions.

Serverless functions are event-driven pieces of code that run without the need to manage servers. They scale automatically based on demand and you only pay for actual usage, making them cost-efficient and highly scalable. They're offered by major cloud providers like Azure, AWS and Google Cloud.

Which CMS is right for me

Well as you have seen we have so many options for building websites with a CMS. Unfortunately we can't just say which is the right one for your project. It all comes down to the sort of website that you are wanting, which feature sets you require, and then the skills you have available to keep the website updated and growing.

Lots of the workflow stuff can be automated to make tasks a standard repeatable process.

In closing we should just mention again that if you are using a database based CMS, make sure the database is regularly backed up and that you know how to restore from the backup before you might need to. You would be surprised to hear how often people find out way too late that their backup does not work or that the database is not included in the backup at all.

We are always happy to help

We hope that we have given you a little insight into the vast world of CMS's. Should you have any questions or be looking for help with a CMS based website, reach out to see if we can help you.