2022-02-19

For quite some time now, I’ve always wanted a basic static blog, but never really knew what I wanted. I settled on AsciiDoc because it has a very nice template for basic websites, and is pretty versatile. When trying to build a site in the past, I thought I had to tie together some language and build routes and bla bla bla. Turns out I way overcomplicated things.

Templating

I templated my pages to meet a scheme. For all my pages, I start with this header:

= Site Title
:icons:
:toc: left
:encoding: utf-8
:stylesheet!:

++++
<button id="theme-switcher">Switch Themes</button>
++++

https://blog.passwordclass.xyz[HOME]

This lets me get the theming I want and get a home button. My index page does not have the home button for obvious reasons. From there on, I write what I want.

Site Layout

Next I have an expected site layout. At the webroot, I have a css dir with "light.css" and "dark.css" for my light and dark themes. Next, I have a js directory with my "switcher.js" which lets me handle light and dark themes. For any pictures I’ll probably have a "media/images" directory to pull from, but currently none of my pages have images. Unfortunately, I don’t have any relative path work I can do in my blog pages, so I have to point to absolute paths on my website for anything. No problem for me though.

Building

Next is the building of AsciiDoc to HTML files. I have a working directory, and from there I have a directory called "asciidoc" which I have layed out exactly the way I want it to be on my webroot. I run this script here:

#!/usr/bin/env sh

CWD=$(pwd)
DEST="$CWD/blog.passwordclass.xyz"
NEWLINE='<script src="https://blog.passwordclass.xyz/js/switcher.js"></script>'

rm -rf "$DEST"
mkdir "$DEST"

# Copy JS files
cp -r "$CWD/js" "$DEST/"
# Copy CSS files
cp -r "$CWD/css" "$DEST/"

# Generate index file
asciidoctor -D "$DEST" "$CWD/asciidoc/index.adoc"

# Find adoc files
adocfiles=$(find asciidoc -type f -name "*.adoc" | xargs)

# Generate all the adoc files and dump them in the webroot dest
for f in $adocfiles; do
    relative_path=$(echo "${f%/*}/")
    mkdir -p "$CWD/$relative_path"
    asciidoctor -D "$DEST/$relative_path" $f
done

# Some cleanup
cd "$DEST"
mv asciidoc/* ./
rmdir asciidoc
cd -

# Find the HTML files
htmlfiles=$(find "$DEST" -type f -name "*.html" | xargs)

# Find a line in the HTML header and insert my switcher.js
for f in $htmlfiles; do
    sed -E -i "" "/\<meta charset\=/a\\
$NEWLINE
    " "$f"

done

Finishing Touches

With a new article done, I update my index.adoc to contain my new article listing, then I run the script above to generate the updates. Lastly, all I have to do is copy my newly generated local webroot to the new one.

Then it’s done!