Making this blog

Background

I have a problem. I keep forgetting how I solved certain problems. So I go back to search the solutions on Google and other search engines, but I cannot find that solution that I definitely used a few months ago.

Why? Because search results all filled with too many AI-generated tech "help" websites. Most of the time I manage to find the solution again. But it takes too long.

I could have just made an Obsidian Vault full of .md files on my desktop, but I can't be the only one with this problem. So I decided to make my own website so I could share my solutions with other people(= you, the reader). Plus, hopefully, this puts one more human-made article in the sea of AI-generated "blogs" in a Google search result.

With that said, let's talk about the things I used to make this website. (so I won't forget what I did here yet again)

11ty (or is it Eleventy?)

Template used

This website is based on the Strawberry Starter, a blog template for 11ty by Kate Bagenzo. You can get it here.

What I changed from the template

CSS

My own CSS file is based on bark.css, with some changes, mostly for the navbar element.

Navbar

I removed minifeeds/update folder, and instead used that space to list the four tags that I am going to use the most (at least for now). My navbar.html currently looks like this:

<ol>
    <li class="navhead">
        <a href="/tags/cars/">Cars</a>
    </li>

    <li class="navhead">
        <a href="/tags/development">InDev</a>
    </li>

    <li class="navhead">
        <a href="/tags/nscale">N Scale</a>
    </li>

    <li class="navhead">
        <a href="/tags/protogen">Protogen</a>
    </li>
</ol>

Tag display in individual post

I wanted my post to have multiple tags, but the Strawberry Starter did not support multiple tag display in post out of the box. layout.html had to be changed to make it look the way I wanted.

<header>
    <h1>{{ title }}</h1>
    {% assign postCheck = collections.posts | getCollectionItem %}
    {% if postCheck %}
    <time>Posted on {{ page.date | dateFormat }} in </time>
    {% for tag in tags %}
    {% if tag != "posts" and tag != tags.last %}
    <a href="/tags/{{ tag }}" class="post-tag">{{ tag }}</a>,
    {% endif %}
    {% if tag != "posts" and tag == tags.last %}
    <a href="/tags/{{ tag }}" class="post-tag">{{ tag }}</a>
    {% endif %}
    {% endfor %}
    {% endif %}
</header>

Inserting Liquid Template Language inside the code block

When you insert Liquid Template Language snippets inside the code block, it will break the whole page. I solved this issue by inserting raw and endraw inside the brackets at the beginning and at the end of the code block, respectively. Writing what I exactly used also broke this page again, so here is the link to the soultion.

GitHub & Cloudflare Pages

While the Strawberry Starter do come with Neocities upload support, with $5 custom domain fee it was cheaper to use Cloudflare Pages to host this website. (I wanted to use my own domain)

Currently, creating Pages can be done under Build -> Compute -> Workers and Pages -> Create application. I clicked Looking to deploy Pages? button and then I was able to import my private repository from GitHub.

When I push new commit to the repository, Cloudflare automatically runs the build script and it's deployed to the web.

Next steps

It tooks me almost three months to write this single article because I kept procrastinating. I also forgot a few modifications I made in this blog during that time, so I had to look at the files again to figure out what the past me did to this website. Hopefully another post will be easier (and take less time) to write.