hacking together a local CSS editing workflow on bear
#now playing: Pictures of Purple Skies by Memorex Memories
I have been enjoying the "no frills" aspect of running a blog on bear so far. the one thing I am missing from my previous blog setup, however, is a way to quickly experiment with the CSS of my blog.
while bear's dashboard has been pretty convenient to quickly edit some CSS variables, I feel if I want to do deeper edits the "tweak -> publish -> refresh" loop will feel like a slow to me.
so I did what I usually do in those situations: I write some JavaScript[1] about it.
The code is on https://github.com/eramdam/files.damien.zone but the logic is pretty straightforward:
- run a web server running on
localhost:3000
(I'm using fastify but i'm sure any web server thing for Node would work) - run an instance of live-server in parallel (this one is key!)
- on every route, take the request's URL, transform the URL such that
localhost:3000/foobar
becomesdamien.zone/foobar
- download the HTML from
damien.zone/foobar
, parse it, remove every stylesheets from it, and inject my own from the repo - and lastly, inject a modified version of the injected.html file from the live-server repo, which will make the live reloading of stylesheets work
then the whole thing runs with a simple npm run start
, I open localhost:3000
in my browser and.. it just works! I can edit my CSS freely and with instant feedback.
it feels like a very stupid solution but as I often like to say: "If it's stupid and it works, it's not stupid".
see ya,
- damien
or rather, TypeScript these days, I'm not a fool ↩︎