[Chris]: You might think of a static site generator like this:
- It takes some content, like Markdown files
- It processes them together with some templates
- It makes a complete site of static files
You’d be right, that’s what static site generators do. But think about that first step. The source of content can be a bunch of Markdown files. I like that method, as it means all the content for the site can live in the same repo, which is great for stuff like pull requests. But it doesn’t have to be that way. The static Markdown files are just one source of content. That source of content could be an API that delivers that content.
That’s what I meant by this:
I think it’s fascinating to think of using static site generators in conjunction with headless CMSs. Headless CMSs are just CMSs that only speak in APIs. They have admin screens for dealing with content, and then deliver that content as asked for via those APIs. They don’t care what you do with that content or where you ask for it from.
I long thought of headless CMSs are largely being used at runtime. Like you boot up a JavaScript-powered site, it hits the API for content and renders it. That’s still a major use-case I’m sure. But there is no reason the APIs for headless site can’t be hit at build time instead. So rather than a folder-full-of-Markdown as the source of content, it’s an API. This is getting more and more popular, best I can tell.
These headless CMSs don’t care how they are used, they just want to be used. Here’s a handful of them, for reference:
But notice my tweet above referenced WordPress. WordPress has an API as well, but probably more applicable to today’s fancy front-ends is WPGraphQL. That opens the door for stuff like this Gatsby + WPGraphQL example, Gatsby being a (fancy version of a) static site generator.
That’s the tip of the iceberg here. Check out Sarah Gooding‘s roundup JAMstack’s Growing Popularity Brings Increase in WordPress Plugins for Deploying to Netlify. I ain’t saying that WordPress is always the right choice for a CMS, but I know I like it personally, and find it compelling, especially when you consider how many WordPress sites are already out there and knowing that they can stay that way while evolving the front end in totally new ways.
While keeping my eye out for stuff related to this…
- Video Tutorial: Headless WordPress with WPGraphQL, Advanced Custom Fields, and React (Advanced Custom Fields in WPGraphQL is free now.)
- Demo Project: Next.js app with WPGraphQL and WordPress
- Demo Project: Wuxt – Nuxt+WordPress
? Links from Around the Web
What I Like About Vue
Uncle Dave digs into some of his favorite Vue features and one particular issue that he has with React. This comes on the heels of what Robin covered in a recent CSS-Tricks newsletter about the size of codebases using modern frameworks. Dave ran into a specific issue where the size of a project and its dependencies actually roadblocked him during the development process.
Unsuck It
Or perhaps: “How to speak Silicon Valley.” This is a fun collection of the weird phrases and made-up words that we often hear coming out of meetings. And, as Chris says, there’s enough in there to offend everyone which makes it even funnier.
? From the Blog
A Beginner’s Journey to Launching a Website
Josh Long recently got into web development and wrote into CSS-Tricks asking advice for launching a website. Chris responded back with a post outlining detailed steps for deploying a site and now Josh writes in with a post that describes his experience. It’s eye-opening as far as what we take for granted as well as the insights that come up along the way.
Telling the Story of Graphic Design
We talk a lot about the design-to-development hand-off, but how often do you get to see that interaction take place. Well, Sally McGrath and Katie Parry tag team that hand-off in this post, providing a dialogue that many of us have had (or have tried to have). This is a great demonstration of the back-and-forth that goes into the implementation of a design and what a healthy collaborative process looks like without getting into specific how-to advice.
CSS :not() with Multiple Classes
A quick tip from Chris that shows how we can use the :not()selector to target multiple classes at once. The secret? While we don’t have and or or operators at our disposal, we can chain things together to get the same sort of effect.
How Google PageSpeed Works
Google PageSpeed is something front-enders often reference, but how well do you really know it comes up with those scores? Ben Schwartz breaks it down nicely in this post in a way that helps really see what variables go into scoring and how we can optimize our work to ensure the best possible outcome. No crazy tricks. Just pragmatic, actionable and informative analysis that you’ll be sure to bookmark.
Fullstack Academy of Code
Want to become a software engineer, launch a start-up, or take the next step in your career? Fullstack Academy has your customized path to success.
