My Own Personal Site

After a full year of owning the cannot.la domain (.la TLDs are quite pricey!) without having a personal site, I finally decided to sit down over the weekend to build this static site.

Building

I settled on using Hugo as the SSG and magick.css as the CSS framework because I love how it looks like the notes of a wizard. I grew up reading lots of epic fantasy, so it just feels right.

Design considerations

• Fast
  • Static site
  • No JS (except for pages that need it, or maybe optional site search in the future)
• Auto dark mode
  • if you’re using a mostly B&W theme you can add a media query to invert colors in your CSS , but magick.css has it covered https://yihui.org/en/2023/09/dark-mode/
• Easy to write posts for
  • Use a SSG
  • Classless CSS framework

Serving

Domain name

After cycling through a free .fr domain gotten from a sketchy registrar, shanscendent.com and shanlee.cc, over the years, I finally settled on cannot.la , which I quite like! It’s quirky enough and gives you a hint of where I’m from. If you’re using namecheap, try using COUPONFCNC to get 20% off. source

I’m also using it for a bunch of subdomains, like one to point people to other selfhosted stuff from my homelab.

Analytics

After going through an (admittedly) unscientific skim of the available selfhosted options for web analytics for this site, I settled on Shynet. Here’s a list of all the options I went through, and why I chose Shynet over them. Awesome-Selfhosted

• Shynet - Lightweight, tracking pixel, sqlite support, looks nice
• Matomo - Hey, portainer uses it! Not lightweight though
• Goatcounter - Doesn’t officially have Docker support, rough UI
• Plausible - Lightweight, but no tracking pixel
• Umami - No tracking pixel?
• Fathom Lite - No tracking pixel

Caught between a bug and a hard place

I’m ashamed to report that I wasted a lot of time on this. Right from the start of the project, I ran in to a problem where hugo serve would reload pages erratically—sometimes a page would show up in the site, sometimes it wouldn’t, especially when I edited the templates—and it drove me crazy. The only solution I could come up with was having a touch.sh file which echoed a newline to every single file in content/ (including the images!) and removed it again, which I’d have to run every single time.

I couldn’t figure out what was going on for the longest time, until I found this post.

Here’s how my content directory was arranged.

content
├── index.md
├── does
│   ├── _index.md
│   └── cannot.la.md

Turns out, if hugo sees index.md and not _index.md in a directory, it just stops looking for more subdirectories for content, as the content/ directory is now a leaf bundle!

Usually when I run into bugs, I’m stuck hunting for a missing underscore, but I’ve never had to look one in a filename before. I’ll need to RTFM better next time.

Todos

Site

• Configure Chroma highlighting style to match magick.css
  • swapoff looks the best so far!
• Increase the loading speed
  • Maybe do stuff like minification, serve inline css, try TCP fast open, etc?
• Site search (Ctrl + K?)
  • Add tags to posts (LLM?)

Content

• Developer profile page, with a resume link
• Hobby pages
• Network page
  • Write CSS to add 2 columns on mobile, 3-4 on desktop?