Lightweight blogging

I have a weird way of writing. I realy like my vim setup. I use Goyo¹ to create this zen-like writing experience. Its super chill.

au BufRead,BufNewFile *-write.md setlocal textwidth=36
au BufRead,BufNewFile *-write.md Goyo 36

If I open a file with the -write.md prefix my editor turns from a robust code writing machine into a chill journal.

The issue I’ve had with this approach however is I cant seem to replicate this same writing feeling in any CMS. So I thought:

Why not make my own CMS?

Creating a CMS is kind of a massive undertaking, plus I’ve sorta been on a webscale is overkill binge recently so I wanted something static.

Obviously, since you’re reading this. I came up with a solution! A Shell script and a couple html files.

Here’s the rundown:

First I move my index file and my stylesheets to an “out” directory:

cp src/index.html out/
find src/ -name '*.scss' -exec sass {} ./out/bundle.css \;

Then, I iterate over all my markdown files in my blogging directory and using pandoc generate HTML:

for file in $BLOG_LOCATION/*; do
  NAME="$(basename $file)"
  pandoc $file -o ./out/blog/${NAME%-write.md}.html --template ./src/blog/index.html
done

Finally I create a table of contents. This one stumped me for a bit but the solution I came up with does the job:

TOC=()
for file in $BLOG_LOCATION/*; do
  NAME="$(basename $file)"
  TOC+=("<a href='/blog/${NAME%-write.md}.html'>${NAME%-write.md}</a>")
done

TOCString=$(printf '%s' "${TOC[@]}")
sed -i -e "s|TOC|$TOCString|g" ./out/index.html

This just creates an array of links then uses sed to replace a string in my index file. Not the most elegant but its basic templating.

I even have code blocks working to some extent. pandoc handles code blocks weirdly though so I had to do some hacky styling:

pre {
  color: #fff;
  font-size: 22px;
  overflow: auto;
  background: #111;
  margin: unset;
  padding: 8px;

  code {
    > span {
      margin-left: -8px;

      &:not(:first-of-type) {
        margin-left: -25px;
      }
    }
  }
}

I’d very much like to get RSS working at some point but I’m unsure how I’d go about that.

Also this entire site is less than 15kb.
Crazy what you can do without React!