CMS Workflows with Gridsome
Mostly work on the backend
Really enjoy automating workflows
WTF is JAMstack?
How did we get here?
Static sites used to suck and be time consuming
Manually writing (or copy-paste) the html for each page
Sites are built using a traditional CMS (like Drupal)
Rendering content is slow
What is out there?
Just crawling site - nothing dynamic
Static Site Generators (like Jekyll)
Now we're getting more dyamic content
Build out the content using APIs
Serving static assets is fast. Put in a CDN to make it faster
Use it to bootstrap your headless Drupal for something more advanced
No need to worry about server or database vulnerabilities
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)
Use Drupal as source
Used to it
Move to a pw protected domain
Expose JSON endpoints
Let Gridsome graphql consume data
Demo / Code walkthrough
Getting content from Drupal
Used an existing Drupal source plugin to get content
Required JSON API
"One click install" in Drupal 8
Set up gridsome.config.js and gridsome.server.js
Looking at Vue
Don't mind how terrible it looks!
Gitlab (with gitlab pipelines)
Wrote Drupal module to trigger Gitlab deploy
Deploys to personal server
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 :)
Maybe try out Netlify?
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"