Welp, my "hand-crafted, artisanal, free-range HTML" didn't even last a week. As I was writing up my previous (and first) post, I went looking for the link to GitHub Pages. When the page loaded I saw the big GitHub logo at the top and it hit me that I'd been mis-capitalizing 'GitHub' as 'Github'. To make it worse, although I only used GitHub twice in that post, I had it at least once on each page in the header. This could easily be solved by a grep
or sed
, however I realized that if I were to keep making blog posts, the small tweaks and even larger changes would start to add-up. I needed a better plan.
I figured I had three real options to do something better:
I went with #1, DIY my own small site-generator script. Though it probably would have been easier for me to write-up in Python, I decided for Bash. Bash seemed more appropriate for this, as it is mostly file-management in a Linux environment.
Starting off I re-organized the folder I keep all this in into a directory with 4 things at the base (for now).
./generator.sh
- The hot new script I would write that would re-build the site every time it was run./parts/
- The directory where I would keep all the modular parts and pieces used to build the site./site/
- The destination folder that generator.sh
would build to./old/
- A nice safe archive for all the old assets and stuff should I ever want or need them
Next up I split out ./parts/
into:
./parts/assets/
for the standard assets, ie: header/footer./parts/pages/
for the non-standard things, ie: body sections./parts/pages/
. With this I ripped apart each of my hand-crafted files, throwing a single header and footer into ./parts/assets/header.html
and ./parts/assets/footer.html
, respectively, and leaving all the lonely body sections in-place in ./parts/pages/index.html
and the like.
Then it was finally time to get to writing a script. My initial idea was that I would iterate through every page in ./parts/pages/
, touch
a new file of the appropriate name and in the appropriate place under ./site/
, then append all the pieces (header, body, footer) and move onto the next. Sadly I got stuck trying to figure out how to get a good handle on the 'old' file's relative position, in order to figure out the relative position the new file needed to be created in. I figured I could do something like cut
up the path and grep
through the parent folders, but that seemed like a terrible hack. Thankfully I realized I could solve things a lot easier by just cp
-ing the pages over and editing them in-place.
In lieu of going through each line of the script here I heavily commented it (much to future-me's delight) and have posted it on my GitHub. It really ended up being very simple and straight-forward, though I'm already thinking about splitting up header.html
to have a seperate head.html
....
I think this was a nice change that should pay future dividends, and am looking forward to what other changes will be in-store for this little blog!
Happy Hacking!
- Chris