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.
- 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.
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:
All you need to build a simple site with minimal dependencies.