Day 1

Day 1: Technical Blog

Active Link! ¹

Goal

Today my goal was to set-up a digital garden.²

I’ve been using Obsidian for all of my note-taking recently and I really like the graph-based structure.

My current Obsidian knowledge graph. Currently monochrome but I spend an embarassing amount of time grouping and tweaking it.

Obsidian offers a built-in publishing option, but it requires a premium subscription. As such, I’m using Jacky Zhao ’s Quartz , an alternative hosted via GitHub pages.

Quartz’s index page, hosted on Quartz itself.

Execution

This was meant to be an easy project for day 1 of August. Since I’m mentioning that, it obviously wasn’t.

Quartz is based on Hugo , a static site generator. I’ve previously used Jekyll and while the general ideas carried over I still had to refer to the docs frequently.

My first challenge was getting a local preview working. It was relatively easy to install Hugo but one of the coolest features of Quartz³ is the interactive graph at the bottom of the page:

Baby graph with four nodes.

Getting it running required using a Go module, hugo-obsidian, that converted the local links to something Hugo can understand. That was relatively easy to set up, at least after I realized that for some reason my Go installation did not update the path, but I had some strange issues with dead links being generated. In the end, I didn’t do anything clever, I just recreated the Obsidian workspace. I even reached out to Jacky but found my hacky solution before he responded.

After minor configuration to activate GitHub workflows (pre-written by Jacky) I had a publically available site! That’s when it all went wrong:

Frills

Prettification (Attempt)

Instead of focusing on the content and organization, I decided it was time to work on the aesthetics. Now, I don’t know much about CSS or HTML, that’s part of why I’m doing this exploration. After stalking investigating Jacky’s other work I found out that he has a personal site that looks amazing. I just had to have that fancy 3D graph render on the right.

A perfectly mistimed screenshot that demonstrates the animated text.

After blatantly copy-pasting recreating the script,⁴ my website looks like this

As you can see, things are not as they should be.

It’s a work in progress. I’ll figure it out.

Domain

Who wants a URL like icalculated.github.io when you can have something that ends with .xyz? Not me! I considered purchasing a .xyz domain but then decided that I should try and win one for free at a MLH event in the future. Instead, I went with the tried and true solution, Freenom.

I am now the proud owner of defyingentropy.ml. It’s free for twelve months but 10 dollars for a year oddly enough. I think you can guess which one I chose. Freenom’s DNS configuration is somewhat jank to put it lightly but Github has great docs and I’ve done it before.

Didn’t go as planned… Hugo takes a domain name, the workflow does, and then I added a CNAME (two actually, both at the root and in the /static/ directory) for good measure. I figure at least one of those must be working. However, I’m having a very difficult time determining if the issue is on my side since Freenom keeps consuming the records that I create. I am trying to use dig to troubleshoot but it’s not finding any records which suggests that maybe I’m being impatient and should just wait for DNS propogation. I’ll check in on that tomorrow.

Oh well

Reflection

This venture is already some combination of a trainwreck and a dumpster-fire. I’m having a great time! I think that rather than moving on to a new project tomorrow I’ll be touching up some of the difficulties from today, working on the styling, and generally exploring further.

I’m thinking that major projects will be confined to the weekends since I’m working at least 40 hours a week,⁵ at least until I get into the groove. I’m going to try and figure out each day’s project the day before so that ideas have some time to percolate.

If I somehow find myself at a loss tomorrow, I’ll probably try to work through a chapter of Eloquent Javascript.