Web Developer Fast Track

Winter 2022

Headless Content Management Systems

What is Content Management

  • Content management in web spaces is how website data and assets are stored, edited, and organized
  • Content is organized in a database or schema

Activity: Website Review

  • Look at some websites that you like, try to find content patterns.

Demonstration Activity

  • Visually Recreate a page's content structures using figjam

What is a CMS?

CMS's are used to organze content on websites. This includes text content like blogs and articles, images, videos, products, etc.

Traditional CMS's like Wordpress and Drupal are built on a LAMP stack. These types of sites still make up over 40% of websites on the internet.

However new types of CMS's are starting to emerge as well. The JAMStack has recently become a serious contender due to it's flexibility, developer friendliness, optimization, and security.

Headless CMS vs Traditional CMS

  • Headless CMS : The Content is separated from the frontend.

  • There are many headless cms options.

    • Storyblok
      • Visual Editor, stable, great features, SAAS, some price wall limits, vue based
    • Sanity.io
      • Great range of free features, react built customizable ui, code to set up widgets
    • Strapi CMS
      • Very full featured, sql database default, deployed separately from frontend, most popular open source headless cms
    • Ghost CMS
      • Beautiful editor, 14 day free trial

  • Traditional CMS

    • Backend and frontend content are built together
    • Often uses a LAMP stack
      • Linux: Operating System
      • Apache: HTTP Server
      • MySQL: Relational Database
      • PHP/Perl/Python: Programming Language
    • Though other stacks such as WAMP or MAMP are also used.

  • Examples includes:

Why Headless?

  • We will be using a headless CMS because it is more flexible, secure, and developer friendly than traditional cms options.

  • JAMstack allows for content editors and developers to be able to use tools that work best with their workflow.

  • Headless CMS allows deployment of content to multiple frontends, this is more challenging with a traditional CMS

  • Jamstack vs Lampstack structure

JAMstack Overview

  • Javascript: Language
  • API: Content Delivery
  • Markup: Content

Important Characteristics

  • Scalable: Easier to scale by decoupling cms and frontend
  • Fast Performance: Prebuilt static site
  • More Secure: No Server Vulnerabilities
  • Developer Experience: Designed to give dev and content editors best working environments

Jamstack workflow

Activity

  • Research different headless cms'

Lab Time

Prep