CMS Workflows with Gridsome

Ashok Modi

About me

  • Software Engineer
  • Mostly work on the backend
    • Really enjoy automating workflows

Primarily PHP/Python

Drupal

  • Least loved

  • Least wanted

  • Most dreaded

WTF is JAMstack?

History lesson

How did we get here?

  • Static sites used to suck and be time consuming
    • Manually writing (or copy-paste) the html for each page
    • Nothing dynamic
  • Sites are built using a traditional CMS (like Drupal)
    • Rendering content is slow
    • caching
    • cdn
    • $$$

What is out there?

  • httrack
    • Just crawling site - nothing dynamic
  • Static Site Generators (like Jekyll)
    • Now we're getting more dyamic content
  • JAMStack
    • Gatsby (React)
    • Gridsome (Vue.JS)

JAM Stack

  • Javascript
    • What else?
  • APIs
    • Build out the content using APIs
  • Markup
    • Prebuild content

Why?

  • Fast
    • Serving static assets is fast. Put in a CDN to make it faster
    • Use it to bootstrap your headless Drupal for something more advanced
  • Secure
    • No need to worry about server or database vulnerabilities
  • Cheaper
    • Host on github or gitlab pages if you wanted!

Better dev experience

  • Point to source content (db, api calls, etc)
  • Focus on making a kickass frontend with new technologies

My use case

  • Blog (Drupal 8)
    • Server-side rendering (and caching)
  • Interested in JAMstack and heard about Gatsby
    • More interested in VueJS
  • Use a source (Drupal, Markdown, DB, etc)
  • Generate a GraphQL db of content
  • Generate your pages using Vue
  • Deploy (netflify, cdn, server, etc)
Gridsome Logo

Plan

  • Use Drupal as source
    • Used to it
    • Move to a pw protected domain
  • Expose JSON endpoints
  • Let Gridsome graphql consume data
    • Use vuejs
  • Replace website!

Demo / Code walkthrough

Getting content from Drupal

  • Used an existing Drupal source plugin to get content
    • https://gridsome.org/plugins/@gridsome/source-drupal
  • Required JSON API
    • "One click install" in Drupal 8
  • Set up gridsome.config.js and gridsome.server.js

Displaying content

  • Looking at Vue
  • Don't mind how terrible it looks!

Deploying

  • Gitlab (with gitlab pipelines)
  • Wrote Drupal module to trigger Gitlab deploy
    • Deploys to personal server

Pain points

  • Gridsome required id (string), path (string), and component(string) for a given node added to GraphQL
    • Drupal defines path object
    • Had to revise object in Drupal and pull it in different
    • Used api.onCreateNode() set up path.

What I enjoyed

  • Its really nice to be able to focus on the frontend
    • Site is fast
    • Site is secure
  • For small sites this is def. a good alternative
  • For large sites...story for another time :)

Next steps

  • Maybe try out Netlify?
    • Netlify CMS?
  • Learn more about Vue ecosystem to move forward
    • API call to create contact form
  • Use Sass? Something else? 
    • "I have new ways to generate everything but my sites will still look like shit"

Thank you!