Regular followers will have heard me talk about Turbo Admin. And you may also know that I am, where possible, trying to #DitchTheBuild and use vanilla HTML, CSS and JS as much as possible.
So for the Turbo Admin website I kinda wanted to embrace this philosophy, get cheap-and-easy, static-file hosting, and make my build and maintenance process as simple as possible.
BUT… I also wanted to make use of the Tailwind UI component library that I have access to, so I wanted to embrace TailwindCSS and it’s component-based philosophy as well. How could I do all this but with a minimal build process.
I investigated a number of options like Eleventy, Nunjucks, Jigsaw, and some others. I decided that they were all too much for what I needed and that I didn’t want such a big dependency for the build.
So what DID I need? It’s just a few HTML pages with a common header and footer, and some template partials with a bit of conditional logic. Maybe some environment variables for testing, API keys, tags and stuff.
- variables
- some simple logic for building different environments
- simple template includes/extends
- a command-line build process for a few files.
And then it occurred to me: PHP does all of this! Can’t I just use PHP?
- PHP has includes for templates
- PHP has variables and logic
- PHP can be run from the command line
So I set out to see what was possible.
And with a bit of clever output buffering it turns out that it’s not so hard to loop over a bunch of files, processing them with PHP, capturing the output, injecting it into a template and writing it out.
This is a bit hacky, but it’s all standard PHP. It may not be the easiest code to understand, but these 162 lines of PHP are a simple, command-line static site generator.
Combined with esbuild (only required because I’m using JavaScript modules to power the interactive parts of the homepage) and the Tailwind CLI this can build my whole site with very few dependencies.
Tailwind can even now be used standalone without node/npm.
I also use standardised build scripts for my projects. So each project has a build.sh and a prod.sh so I don’t have to remember what commands to run for each.
If you’re curious, the script for this project is:
#!/bin/sh
node_modules/.bin/esbuild src/js/turbo-admin/main.js --bundle --minify --sourcemap --outfile=public/js/turbo-admin/main.min.js
php ./build.php
npm run build:dev
Sure, this doesn’t have hot-module reloading or automatic browser refresh. But it’s not changing so much that I need those things.
Yes, this project has a build step. It uses npm (for now). But it’s pretty minimal.
So there you go. Summary:
- Vanilla PHP static site builder in 162 lines
- ESBuild
- Tailwind CLI
All you need to build a simple site with minimal dependencies.