Chi Señires

Colophon

Following the guide from IndieWeb for what a Colophon page includes, I’ll do my best to lay down how I’ve set up my side of the internet. Last updated on .

Website repository

The code for this website can be found on Github.

Website Icon

Favicon for chisenires.design

The favicon is a red (#681310) squircle with my nickname on it using the font Anybody for the letter C and Victor Mono for the letters hi. The letter spacing for this is also adjusted so all letters are neatly put together in the middle.

Website Fonts

The heading font used is Anybody and the body font is Victor Mono. Both fonts are loaded into my website using Fontsource.

Website domain

chisenires.design is a domain bought on Porkbun back in 2021.

Tools

Framework

This current website is built with Astro, using the base blog as a template and then re-implemented the styles and overall implementation from chi-11ty. Some weren’t kept for now, like the Blog Stats page as that was using a plugin that was built specifically for Eleventy. I wrote more about it in this post.

My old website used to be hosted on Micro.blog but I’ve since moved away from it since I wanted to save up on subscription costs, and paying with USD does hurt after paying enough times 😅

Hosting

This website is also hosted on a self-hosted instance of Coolify. Please do not ask me anything about this, my boyfriend was the one that set it up for me 😅 (and yes, this does have a subscription cost to it too but it feels less negligible since it’s paid yearly and I share the costs too :)) )

Metadata Thumbnails

For the auto generated thumbnails, I use Cloudinary (this is a referral link!). I initially wrote about in this post when I was still on 11ty, but I’ve now discovered that Cloudinary has an integration with Astro after seeing these docs! I talk a bit more about it here.

Toggling dark-mode

For the dark-light-switch, the actual switch trigger is set up in the @components/ThemeIcon.astro component, while the persistent state is managed in the @components/ColorSchemePreference.astro component.

Webmentions

For webmentions, I wrote about my initial experience in setting them up in this blog post. As for the setup, based on how I understood it, I make use of the webmention npm package and also followed the instructions laid out in webmention.app docs.

Since migrating to Astro, I’ve mostly reused the same JavaScript code from my previous 11ty implementation, but now I understand more the moving parts:

Website Analytics

For website analytics, I also share track page views and sessions using Umami mostly for my personal consumption as I’m curious where people check my site and what pages get visited.

You can view this website’s analytics here (since I made it public, and wrote about it here): chisenires.design website analytics via Umami

Writing posts

To write posts, I open my repo in Obsidian and use the following plugins to help me in crafting my posts:

All of these can be seen in my Obsidian folder.

Workflow for publishing

Usually when I want to write something and share as a post, I open my website’s Obsidian setup and create a post using the _templates/Post.md template so it automatically makes a post and I can fill in the title and summary if I wanted to.

If something is still a draft, I just don’t commit it yet into the repository. I can also technically mark them as drafts, but I’ve found myself to forget the posts I make if I leave it in drafts for too long, so my goal is to publish something as soon as I set aside time to write it.

After writing and formatting whatever it is I wanted to share, I’ll add the new post file in a commit and push to my main branch. I usually just make the commit name something like New blog post: [title or file name of blog post] to make it simple.

Once Coolify detects a new commit was added to my website’s Github repo, it auto triggers a new deployment and after a few minutes, I’d get notified if the build was pushed to production successfully via a webhook. That’s when I know my blog post (and any other changes I made to my website) is now out in the open! 😄

Tracking things I want to update on my website

I make use of the Issues Tab of my website’s Github repo to track the things I wanna work on.

The reason I used this was simply because I found it really cool that Github (or is it just git?) automatically closes issues so long as you remember to mention them in the commit messages pushed to the repo. I learned this while contributing to the code of our current Design System at work, while working with my teammate who’s a UX engineer. Amaze ✨

Other notable things

Back to top ↑