CMS Speed Dating

(a talk by @AhoyLemon)

CMS Speed Dating

(a talk by @AhoyLemon)

Hi!

My name is Lemon

(I make websites.)

Lead Front End Developer

I've made a lot of websites...

So, let's make a website!

Let's try another idea...

Okay, let's write some HTML


  
    
  
  
    {{name}}
    
      by {{author.name}}
    
    
      {{description}}
    
    
      Added on 
      {{date.format}}
    
    
      {{tag.name}}

And now we need a way to put the content

or "stuff"

...into the HTML markup

or "nerd shit"

And there's a bunch of ways to do that.

CAUTION:

OPINIONS

Let's start with

Wordpress is very popular.

Source: W³Techs

Source: Kinsta

Some Wordpress sites...

Some Wordpress facts

first released in May 2003
developed by Matt Mullenweg (US) and Mike Little (UK)
continuation of a blogging platform called b2/cafelog
free and open source
monetized by Automattic

Let's do the usual approach...

Wordpress' popularity is also its greatest vulnerability

Source: Sucuri

In short:

Keep Wordpress Updated
Keep Plugins Updated
Only use Templates/Plugins that you trust.

_{^- That last note is important}

Let's move on.

Drupal facts

first released in May 2000
originally by Dries Buytaert as a message board
popularity spiked with Howard Dean
developer community of 1.3 million
forked into many different distributions
PHP using Symfiny
estimated 1.2% of all sites worldwide
GPL license

Sites using Drupal

Source: drupal.org

Theming Drupal is about overriding defaults.

html.html.twig
↳
  page.html.twig
  ↳
    region.html.twig
    ↳
      block.html.twig
      ↳
        paragraph.html.twig
        ↳
          field.html.twig

Potential Structure...

html.html.twig
  page.html.twig
    region.html.twig
      block--topnav.html.twig
      block--single-pattern.html.twig
        .field--pattern.html.twig
        .field--name.html.twig
        .field--author.html.twig
        .field--date_added.html.twig
        .field--tags.html.twig
      block.html.twig
        paragraph.html.twig
          field.html.twig
      block--footer.html.twig

.block-single-pattern.html.twig



  {{content.pattern}}

  

    {{content.name}}
    {{content.author}}
    {{content.author}}
    {{content.date_added}}
    {{content.tags}}

.field--pattern.html.twig

{% for item in items %}
  
    
  
{% endfor %}

Grav

created by Andy Miller, co-founder of Joomla
released in 2015
124 Contributors
MIT license
most starred PHP CMS on GitHub
templates are Twig
monetized by Trilby Media

Grav is a Flat File CMS

A flat file CMS does not communicate with a database.

All user controlled content is stored in small files (.txt or .yml or .md) inside the site's content folder.

Grav is probably the most popular flat file CMS.

But...

Now it's time to write some code!

Blueprint YAML file

fields:
  pat:
    label: Pattern File
    type: file
    destination: 'assets/img/patterns'
  author_name:
    label: Author Name
    type: text
  author_url:
    label: Author URL
    type: url
  post_date:
    label: Post Date
    type: datetime
  tags:
    label: Pattern Tags
    type: selectize
  seamless:
    label: Seamless?
    type: toggle
    options:
      yes: Yes, this is seamless
      no: No, this isn't
  description:
    label: Description
    type: editor

Content Markdown file

---
title: Gold Chains On Velvet
pat:
  /assets/img/patterns/GoldChainsOnVelvet.gif:
    name: GoldChainsOnVelvet.gif
    type: image/gif
    size: 31264
    path: user/themes/my-theme/assets/GoldChainsOnVelvet.gif
author_name: Ellen Schofield
author_url: https://ellenschofield.com
post_date: '04-07-2019 16:46' 
tags:
  - blue
  - chains
  - velvet
seamless: yes
description:
    'Fusce vulputate arcu quis risus malesuada, vel gravida augue eleifend. Mauris feugiat sed ex ac laoreet. Nunc et odio urna. Curabitur elementum mattis mi, vel tincidunt est rhoncus et.'
---

Template Twig File



  
    
  

  

    {{pattern.title}}

    {% if pattern.author_name && pattern.author_url %}
      
        by {{pattern.author_name}}
      
    {% elseif pattern.author_name %}
      
        by {{pattern.author_name}}
      
    {% endif %}

    
      {{description|raw}}
    

    {% if pattern.post_date %}
      
        Added on 
        {{pattern.postdate|date("F jS, Y g:ia")}}
      
    {% endif %}

    {% if pattern.tags %}
      
        {% for tag in pattern.tags %}
          {{tag}}
        {% endif %}
      
    {% endif %}

This approach is very similar in

One of my all-time favorite CMS

But either way, we've written some Yaml, and we've written some twig.

Don't like PHP? Well, okay, let's try something else.

Ghost

a node based blogging platform
“The platform for Professional Publishers”
admin client written in Ember
frontend uses Handlebars
Kickstarted in 2013 for £196,362 (goal was £25,000)

Who uses Ghost?

npm install ghost-cli@latest -g

ghost install local

ghost start

Public	`http://localhost:2368`
Admin	`http://localhost:2368/ghost`

Ghost is a blogging platform.

A quick moment on pricing...

Ghost Pro
	Price	Views	Users
Basic	$29	100k	2
Standard	$79	500k	5
Business	$199	1M	15
Source: Ghost Pricing

Digital Ocean Droplets
Memory	VCPUs	SSD Disk	Transfer	Price /m
1 GB	1 vCPU	25 GB	1 TB	$5 + .007/h ($5 - $11.11)
2 GB	1 vCPU	50 GB	2 TB	$10 + .015/h ($10 - $119.50)
2 GB	2 vCPU	60 GB	3 TB	$15 + .022/h ($15 - $175.60)
8 GB	4 vCPU	160 GB	5 TB	$40 + .06/h ($40 - $478)
Source: Digital Ocean Pricing

What if this all seems too complicated?

Jekyll

a static site generator
written in Ruby
“Jekyll does what you tell it to do”
first released in 2008
HTML, content injection with Liquid
the most popular static site generator*
_{(for now)}

Who uses Jekyll?

Source: t9t's star history

gem install jekyll bundler

jekyll new local

bundle exec jekyll serve

/_posts/2019-07-04-astroturf-argyle.md

---
layout: pattern
pat: "/images/AstroturfArgyle.gif"
title:  "Astroturf Argyle"
date:   2019-07-04 20:19:22 -0500
author_name: Ellen Schofield
author_url: https://ellenschofield.com
seamless: true
tags: [grass,diamond,green,nature]
---
Have you ever wanted to have a website that's also a golf course that's also an art deco bathroom? Now you can live your dream.

/_layouts/home.html

{% for pattern in site.posts %}
  

    
      
    

    

      {{pattern.title}}

      
        by {{pattern.author_name}}
      

      
        {{pattern.content}}
      

      {% if pattern.date %}
        
          Added on 
          {{pattern.date | date: "%b %d, %y"}}
        
      {% endif %}

      {% if pattern.tags %}
        
          {% for tag in pattern.tags %}
            {{tag}}
          {% endfor %}
        
      {% endif %}

    
  
{% endfor %}

Jekyll is fast.

But not for people who are afraid of code.

Okay, last one...

So what's Cockpit now?

a headless CMS (no front end)
created by Artur Heinze, a German developer at a digital agency called Agentejo.
started in 2013, in response to Arthur feeling there were no good headless CMS available
MIT License
PHP-based, but will output to anything.

Why headless?

language agnostic
import content with Ajax, Node, Ruby, PHP, or CURL.
feed multiple sites with the same content
why not?

javascript

fetch('{site}/api/collections/get/Pattern?token={token}')
  .then(res => res.json())
  .then(res => console.log(res));

json result

{
  "entries":[
      {
        "title":"Vaporwave Terrazzo",
        "date":"2019-07-04",
        "image_file":{
            "path":"\/cockpit\/storage\/uploads\/2019\/07\/05\/5d1eb9fba959eVaporwaveTerrazzo.gif"
        },
        "author_name":"Ellen Schofield",
        "author_url":"http:\/\/ellenschofield.com",
        "seamless":true,
        "tags":[
            "bowling",
            "blue",
            "animated",
            "terrazzo"
        ],
        "_mby":"5d1a7d756463319516000206",
        "_by":"5d1a7d756463319516000206",
        "_modified":1562294867,
        "_created":1562294835,
        "_id":"5d1eba336463318159000090"
      },
      {
        "title":"Astroturf Argyle",
        "date":"2019-07-04",
        "image_file":{
            "path":"\/cockpit\/storage\/uploads\/2019\/07\/05\/5d1ebda03bd3bAstroturfArgyle.gif"
        },
        "author_name":"Ellen Schofield",
        "author_url":"https:\/\/ellenshofield.com",
        "seamless":true,
        "tags":[
            "grass",
            "diamond",
            "nature"
        ],
        "_mby":"5d1a7d756463319516000206",
        "_by":"5d1a7d756463319516000206",
        "_modified":1562295778,
        "_created":1562295754,
        "_id":"5d1ebdca64633154cc0002ba"
      },
      {
        "title":"Gold Chains On Velvet",
        "date":"2019-07-04",
        "image_file":{
            "path":"\/cockpit\/storage\/uploads\/2019\/07\/05\/5d1ebdf5a527fGoldChainsOnVelvet.gif"
        },
        "author_name":"Ellen Schofield",
        "author_url":"https:\/\/ellenschofield.com",
        "seamless":true,
        "tags":[
            "gold",
            "chains",
            "blue",
            "velvet"
        ],
        "_mby":"5d1a7d756463319516000206",
        "_by":"5d1a7d756463319516000206",
        "_modified":1562295854,
        "_created":1562295834,
        "_id":"5d1ebe1a6463315b5900006f"
      }
  ],
  "total":3
}

Okay, here's some Vue...


  
    
  
  
    {{pattern-title}}
    
      by {{pattern.author_name}}
    
    
      by {{pattern.author_name}}
    
    
    
    
      Added on 
      {{parseDate(date.format)}}
    
    
      {{tag}}