How I made this site

Hopefully you can tell I put a decent amount of love into this site <3

I originally made this site 2022-12-19, in a mega casual and unfinished way. Since starting the site from then, I became a professional web developer, and my skills have improved a looooot (just inspect the source). I only started the top page on that site, ‘Brain Fog’.

I started taking the site seriously 2023-11-26, with the modern layout and everything.

(i use the ISO date format so Americans and the rest of the world can understand dates)

An online blog is like your own personal blog on completely custom stationary

If you are anonymous online, it does not matter what the hell you put in your blog. If you do it right it won’t be traced back to you. Maybe even if it is traced back to you, it won’t really matter because it’s not thaaaaat sensitive.

You can type up your entire site in ridiculously simple Markdown really quickly while typing. You can customise how everything in your site looks. You can add custom functionality to your site. It’s backed up online. It uses open standards so you’re not tied to some company that locks you down on their service. It’s really cool and convenien1t.

Compare that to just a markdown file on your computer or a pen and paper journay. That’s not nearly as exciting to write in, is it? At least it isn’t for me. It’s that freedom to express yourself in any way you want that I and many others like about online blogging.

Web Technologies

Pure HTML/CSS/JS

This site started out as just the pure web technologies.

Extremely quickly I found out that keeping the nav and footer up to date across all pages would be a total nightmare. I used JS to fetch the nav and footer dynamically, on each page load. That solved that problem.

I highly recommend learning grid and flexbox properly to build modern websites. Check out Flexbox Froggy and Grid Garden for a crash course on how to do them properly, they are so helpful it’s not even funny. Never use float/table based layouts in this day and age :)

Also, learn your CSS selectors and semantic HTML tags. It’s fun!

Astro

As of making this article (2023-12-14), the site fully migrated over to Astro.

I looked at other static site generators first. Hugo is quite popular too, but man is it inflexible. I might be dumb or something, but it seemed impossible to migrate existing HTML content over to Hugo without doing loads of formatting. Hugo also seems to have a scary markup language for designing layouts. It really wasn’t appealing.

Astro is very modern and made it very easy to port my existing standard site over. All the HTML I wrote stays as HTML, just with a file extension change and some frontmatter updates. There was some refactoring.

Unlike before with the pure site, I can now write new articles using Markdown, which I have to say is a great quality of life change that I suppose I didn’t really know I needed.

Also, Astro is very easy to learn and will make all of those reusable components a breeze. The site also loads faster now, and compresses images automatically for speed too. I highly recommend it. It’s very close to a pure HTML/CSS/JS experience, but with a lot of stuff that makes developing that much better.

Development tips

Learn Vim, it will upgrade your coding life and make it suck less. Every day you spend not knowing Vim is another day of inefficiency and suffering you didn’t know you were dealing with. It’s basically impossible to code without it. I use the Vim plugin for VS Code.

Feel free to email me if you have any questions about web dev.