CMS Speed Dating

(a talk by @AhoyLemon)

CMS Speed Dating

(a talk by @AhoyLemon)

CMS Speed Dating

(a talk by @AhoyLemon)

CMS Speed Dating

(a talk by @AhoyLemon)

Hi!

My name is Lemon.

(I make websites.)

So, let's make a website!

Let's try another idea...

Okay, let's write some HTML


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: W3Techs

Source: W3Techs

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

Sources: W3Techs, Succri , and Succri again

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 2.3% of all sites worldwide
  • GPL license

Sites using Drupal

Source: drupal.org

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
{% endif %} {% if pattern.tags %}
{% for tag in pattern.tags %} {{tag}} {% endif %}
{% endif %}

And now we've got a lot more PHP to write.

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
{% 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...


🎈 CONGRATULATIONS 🎈

We've just made a Single Page Application!

Which is right for me?

You have to decide that.

THANKS TO OUR CAST!

Wordpress
Achilles' Heelies
Drupal
J W Friedman
Grav
Boots Raingear
Ghost
bumpgrrl
Jekyll
Jennifer Wadella
Cockpit
Sanguinary Novel

My only request:

Play with new tech you haven't tried before.

Oh, and put a green thing in the box
on your way out.

Thank you.

ahoylemon.xyz