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

I also really really like

But let's get back to Grav...

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.

And get me to Berlin next time!

Thank you.

ahoylemon.xyz