CTO Cheat Sheet: CMS + SSG

There is a better way to build and maintain content intensive marketing websites.

Two existing subpar solutions

For modern marketing websites, the ability to author, modify and deploy content is paramount to building and establishing a successful digital brand. Traditionally such sites were built in one of two approaches.

• Fully Static Website where all content is authored in html format tightly coupled to the site design.
• Content Management System (CMS) that uses its wysiwyg editor capability as both a design and an authoring tool.

The aforementioned approaches have certain advantages, however it is the disadvantages that come to the fore, namely:

• Static website content production is time consuming and resource intensive. They suffer a slow edit/publish cycle, since new content as well as copy edits have to go through a development process, thus producing tightly coupled content and presentation, i.e. HTML+CSS.
• CMS solutions have design limitations because they use built in wysiwyg editors and prebuilt templates. Ultimately, customizing such templates to meet the desired look and feel of the digital brand is often challenging and hard to maintain.

A new approach: Headless CMS + static site generator

Using a Headless CMS in conjunction with a Static Site Generator (SSG),  to overcome the limitations of traditional static websites or template based CMS products, thus gaining the following benefits:

• Decoupling content authoring and creation from web design and rendering.
• Author and manage content in multiple languages and locales.
• Author content once and serve on multiple platforms and channels (i.e mobile devices).
• Prominent digital brand due to enchanted SEO and search engine ranking.
• Rapid go-live cycle, as website is rebuilt and automatically deployed when content is changed or new content is added.

Headless CMS

Overview

- A Headless CMS decouples content from presentation.

- It allows designing relational models of what the content is without being concerned with the format or design into which the content will eventually be rendered.

- A content model, can contain different content types each relating to a section or a part of the marketing website.

Example: A Blog has author, published date, content and tags, all of which map to attributes or properties on a Blog domain or content model.

- Content served through the facility of a scalable API infrastructure, offering many benefits:

• Filtering and full text searching.
• Real time image cropping.
• Localization and multiple language translations of the content.

- Can extend to the entire website including navigational structure. The website layout can be broken down into reusable and distinct building blocks each corresponding to an abstract content model as in the example below:

Implementation Recommendations

• Contentful headless CMS platform for authoring and delivering content.
• Use Contentful WebHooks to trigger automatic website builds and deployment when content is changed or added.
• Consider housing Marketing CTAs copy in Contentful along with article/blog and technical content.
• Collaborate with designers to conceptualize a content model across the website and create reusable content models.

Static Site Generators

Overview

Static content generation decouples content and design to pre-generate the formatted content (typically in HTML) and service it to the browser already rendered as HTML markup, resulting in:

• Faster response times, as there is no need for excessive client side rendering in the browser.
• Better caching, as static content is easier to cache than dynamic content.
• Better SEO, as the urls of generated pages are predetermined at build time.

In conjunction with a headless CMS, a static site generator can be completely driven by dynamic content hosted in the CMS.

• Build pipelines fetch the dynamic content and trigger the site generator thus resulting in a fully built website ready for deployment.
• Streamlining the content generation step allows any modifications to the content (or even minor copy edits) to be automatically deployed using Hook mechanisms that trigger the build pipeline.

Implementation Recommendations

• Use a SSG framework that is based on either ReactJS or VueJS, for better development experience. The top two static site generators according to this comparison matrix are Next.js and Gatsby respectively
• Deployment options vary from simple static website hosting on any cloud provider, or using any zero-configuration web deployment services such as netlify or vercel.

If you are looking new and easy ways to support your marketing website we’d love to chat and help talk through the right solution for your team. Click here to schedule a quick 15 minute call with us.