If you can see this post, that means my script finally works. Setting up this blog wasn't nearly as easy as I expected. It took trial and error, caffeine, and about 9 hours.

My Initial Goal

Recently, as my friend Willa and I have been talking more often, I've been getting more interested in the blogging world.

Blogs, a space where a person can share their individual thoughts and share it to the world in a creative manner. The only limitations to this creativity might as well just be knowing html, style sheets, and markdown.

In discord, usually in whatever group chat I'm most active in at the time, sometimes I go off on rants about something I'm interested in. Recently I was discussing Virtual Reality. Going back to this conversation now, I typed a total of 740 words. I had a LOT to say and the goal of this blog is to have a better place to share these thoughts.

I knew Blogs had a lot of friction to them, but in a quest to make my blog incredibly personal, and easy to manage, this became an endeavor that managed to take up my entire Sunday.

Server Setup

I had a rough idea of where I was going to start the process. I run a single physical server at home that runs Proxmox. I was going to run a static site generator on a Debian virtual machine, and use Nginx on another VM on the network to serve the website.

The First Struggle

To get started, I went on a call with Willa, who has a blog of her own, and also has experience using multiple static site generators. I went through the virtual machine setup process, which was simple enough, but then came the hard part.

Actually creating the blog.

I first attempted to use Hugo, a static site generator that seems quite efficient. I installed the software and a basic theme, Bear-Cub. This theme is simple yet pretty. I don't know what it was about the software, but I simply could not understand the folder trees of Hugo.

My only experience in web development had been a small personal website I had hosted on this link before, and a few programming classes in high school that had taught me basic HTML, JavaScript, and CSS.

Finding a Solution

After the short effort that was me trying to understand Hugo, I very quickly moved to Willa's next option, 11ty. This was a much nicer file tree, and made more sense to my brain that had only ever interacted with simple websites. After learning the basics with a little trial and error, everything seemed more straightforward to me.

For most of my customization of 11ty, I was on my own. I quickly was able to start making my own layout.

While I didn't have any super creative ideas for the blog design yet, I decided to start with a theme I've loved using recently, Catppuccin. I went to the palette part of their style guide, and decided to use the Macchiato version of the theme with slightly darker purples. This is the same as I use for my Librewolf browser, my Pterodactyl panel and all of my IDE's that I am required to use for my current classes.

Serving the Site

This was relatively simple. I just went on to the virtual machine that acts as a reverse proxy for my websites, and used a proxy pass. This allowed me to do two things: simply forward the webpage so people can access it at istavare.org. It also allowed me to get an SSL certificate using Certbot using the Nginx Certbot plugin.

Frontend Support

Willa already had a great way of showing the most recent posts on the home page, while limiting their view, and how many appear. I recommend the post she wrote about it. If the interface looks similar, it's because it is.

Obsidian and Automation

This was the tricky part, I wanted to use Obsidian, a markdown editor to write posts. And let me tell you, it's pretty great to edit in right now (this post is written in Obsidian!)

The main hurdle posed in using Obsidian, was automating the rebuilding of the site, and having a direct secure connection to the server.

First, the direct secure connection to the server was easy to handle. I simply installed Syncthing on my Server, Macbook, and Desktop.

This connection allowed direct connection to the Blogpost folder that I had made, where there is a subfolder and index.md for every blogpost. Obsidian works well for this case because it edits markdown in real time. This left only one issue left.

Automation of rebuilding the static HTML pages, the final and most confusing task. With an idea from Willa, I was able to figure it out.

Using an Obsidian plugin that allows me to read .txt files, I was able to have a rebuild.txt file appear in the shared obsidian vault.

This rebuild.txt contained just a few lines

---
eleventyExcludeFromCollections: true
---
False

The eleventyExcludeFromCollections: true, is to make it not appear as a blogpost to 11ty, but the only important part is whether it is False or True. Whenever the File is changed to True, it updates the static site with a new one and then rewrites the file back to False after complete.

This Boolean simply acts as a button for rebuilding the site using only Obsidian to trigger the change.

Here's the bash file I used below,

#!/bin/bash

# Eleventy rebuild watcher
FILE="/var/www/blog/blog/rebuild.txt"
WORKDIR="/var/www/blog"

while true; do
    # Get the last non-empty line of the file (ignore YAML --- lines)
    STATUS=$(grep -v '^---' "$FILE" | tail -n 1)

    if [ "$STATUS" = "True" ]; then
        # Always run inside the blog folder
        cd "$WORKDIR" || exit 1

        # Run Eleventy
        npx @11ty/eleventy

        # Reset the rebuild flag
        cat > "$FILE" <<EOF
---
eleventyExcludeFromCollections: true
---
False
EOF
    fi

    # Wait 30 seconds before checking again
    sleep 30
done

While this setup does have a noticeable amount of Jank to it, it's currently functional. Without having to directly connect to the server via SSH and rebuild through a command, I simply change False to True and it does it automatically.

Current Progress

This is about all I was able to complete on development of this blog in a day full of free time. The site still has a lot of progress to be made. The layout I have setup isn't very mobile responsive and has issues with the page listing posts out. Future plans include adding an RSS feed option, learning more about mobile responsiveness and how I can embed various media formats into these posts.

The future for this blog looks bright.

Acknowledgments

Shoutout to Willa, none of this would have been possible without her help throughout the entire process. go check out her blog, it is very pretty and has a lot of posts to catch up on.