CPNT 200 Day 2 - Content Management Systems

Prep

• Headless CMS Explained
• What's the Difference?

Assignment 2: Netlify CMS Admin Panel

• Due: November 22 11:59pm
• Create a nuxt project and set up an netlify-cms admin panel

Today's Topics

• CMS and Site Rendering
• Headless vs Traditional CMS
• Netlify CMS Setup

Content Management Systems and Site Rendering

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.

  • Open Source
    • Netlify CMS
      • simpler, less featured, pure JAMstack, great integration with netlify hosting
    • Strapi CMS
      • Very full featured, sql database default, deployed separately from frontend, most popular open source headless cms
  • Closed Source
    • Storyblok
      • Visual Editor, stable, great features, SAAS
    • Ghost CMS
      • Beautiful editor, 14 day free trial

• Traditional CMS

  Backend and frontend content are tightly together. LAMP stack.

• Examples includes:

  • Wordpress, Drupal...

Why Headless?

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

Netlify CMS vs Strapi

• Netlify CMS is best for:
  • Simple content management
  • Not excessive data
  • Data does not need to be stored in a data base
• Netlify CMS is full JAMstack
  • All you need is a git repo and a netlify account
• Strapi is best for:
  • Separation of data from frontend
  • Deployment of data to multiple frontends
  • Lots of data
  • Lots of different types of data
• Strapi is a headless cms
  • You will need to deploy to Heroku or something similar
  • Frontend will be deployed separately
    • GH Pages, Netlify...

Introduction to Netlify CMS

• Netlify CMS Documentation
• Netlify CMS is based on your git workflow
  • Unlike Strapi and many others, it does not require a database
  • This creates a full JAMstack configuration
    • lightweight, fast deployment, and secure
• Netlify Github Setup

Netlify Setup Notes

• Netlify Setup Directions
  • This will add netlify to your nuxt instance
• Netlify CMS Nuxt Official Docs
• Netlify CMS will integrate with the nuxt/content module

Activity: Add netlify CMS to your Nuxt page

• Follow this gist
  • The code snippits are taken from netlify cms' documentation

Netlify CMS Widgits

• With your yml file, you have a lot of power over creating widgits
• Documentation
• Article on Netlify CMS Widgits

Netlify Widget Steps

• Follow these directions

Lab Time

• Work on [assignment 2]({{ '/assignments/cpnt200/assignment-2/' | url })