diy blog site generator tool thing

I said, proudly, in my previous post that this site is just pure html and it doesn't use any build systems and i'll forget to add the header one day and i won't care.

Well, uh, yeah I lied. I didn't like writing in HTML and wanted to write in Markdown. It's a lot nicer to read, and doesn't make my fingers strain from typing <p> tags all over the place.

I still didn't want to set up some over-the-top complicated build system though, so I kinda just wrote a little script. And it's (almost) a one-liner too:

#!/usr/bin/env bash

rm ../blog/*.draft.html &> /dev/null
parallel --bar --eta --jobs 4 \
  pandoc {} -f gfm -t html \
    --standalone \
    --template ../misc/post-template.html \
    --highlight-style breezedark \
  \| prettier \
    --parser html \
    --prose-wrap always \
  \> ../blog/{/.}.html \
  ::: ../blog.md/*.md

So as it turns out, pandoc is quite a powerful tool. I thought it was just for converting things between formats, but turns out it has things like syntax highlighting and a templating engine. Which is great because I can have pretty code blocks without having to rely on javascript.

Also I piped the output from pandoc to prettier so you can read the page's source code without straining your eyes. The benefits of minifying html is minimal anyway when the page is compressed in transit.

rss feeds

Of course I didn't stop there. Might as well add an RSS feed for my blog! I put together a few more lines in the build script, also using pandoc, to generate the xml file:

echo 'Generating RSS feed...'
baseurl="https://www.kitsu.red"
rss_file="../blog/rss.xml"
rss_temp="$(mktemp)"

cat <<EOF > $rss_temp
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>kitsune&#8217;s blog</title>
    <link>$baseurl</link>
    <description>join me as i write about random stuff on my mind</description>
    <language>en-US</language>
    <lastBuildDate>$(date -R)</lastBuildDate>
    <atom:link href="$baseurl/blog/rss.xml" rel="self" type="application/rss+xml" />
EOF

for f in ../blog.md/*.md; do
  slug=$(basename "$f" .md)
  postdate=$(echo "$slug" | cut -d'-' -f1,2,3)

  # Skip drafts
  if [[ "$slug" == *draft* ]]; then
    continue
  fi

  # Generate the post's feed
  pandoc -f gfm -t html \
    --standalone \
    --variable url="https://www.kitsu.red/blog/$slug" \
    --variable date="$(date -R --date=$postdate)" \
    --template ../misc/post-rss-template.xml \
    "$f" >> $rss_temp
done

cat <<EOF >> $rss_temp
  </channel>
</rss>
EOF

# Swap the temp file into the real file
mv $rss_temp $rss_file
chmod 644 $rss_file

In addition to that, I also added this little bit to the template page so that RSS feed readers can find the feed xml file.

<link
  rel="alternate"
  type="application/rss+xml"
  href="https://www.kitsu.red/blog/rss.xml"
  title="kitsune's blog"
/>

If you wanna have a look around, the build script is available at /build.sh.