Recently

See 134 more →

vs Quartz

• Updated Mar 10, 20254 min read

This holiday, I’m taking another stab at Quartz.

For as long as I’ve been designing software, I’ve been reluctant to be anywhere near Terminal and whatever git thing I have to do to make something. Since Switching from Notion to Obsidian, I’ve been on an obsessive mission to make Obsidian my bitch — moreso to prove to myself that I can make this work better than having to pay for another subscription.

I can do this.

My developer friends are too busy and I’m too shy to take up their time with my incompetence, so I’ve committed to usingClaude to ELI5 every single command line in the Quartz documentation . Below is my notepad of Duh’s for all my developer readers, but it may be helpful for newbies like me who aren’t familiar with this stuff.

In case this messes up my current Vercel/Digital Garden Community Plugin solution, I’ll be testing with my Recipe notes ~

2024-12-29

It took me a couple hours this past weekend, but my Quartz is now available at Leanne Eats So far, the out-of-the-box CSS isn’t so unbearable, but I’m excited to try.

Kat has also entered the chat — I have a new friend to obsess over Obsidian with (until the secret gets out that it might be unbearably too much to get this thing off the ground). Good luck to us!

The good news is, Quartz so far makes the configuration way easier to customize because the typescript file makes it easy to plug and play with all the things you can customize out of the box.

In my late-night rabbit hole looking for plugin alternatives, I read about how Dataview isn’t as great as it’s made out to be(a terrible summary on my part, but that’s what I got out of it). It makes me wonder if I need any of these plugins at all, I might just opt for something lighter and something that won’t give me such a headache when I want to publish online.

Uh, in my dumbest of moments, I realized that customizing and adding HTML to my website is obviously so easy to do because you can do it all… in Obsidian because it’s markdown. I really liked what Socratica did with their toolbox, and with Claude’s help, I was able to articulate how I might emulate this for my recipe book:

  1. Modify the index page with the divs and a hrefs:
---
title: Welcome to Your Digital Garden
---

<div class="issue-container">
  <a href="/basics" class="card card-1">
    <h2 class="card-title">The Basics</h2>
    <p class="card-subhead">Getting Started</p>
  </a>
  
  <a href="/projects" class="card card-2">
    <h2 class="card-title">Projects</h2>
    <p class="card-subhead">My Work</p>
  </a>
  
  <!-- Add more cards as needed -->
</div>
  1. Add a new custom.scss file in the Styles folder
  2. ?????????
  3. Profit

(there’s very real steps that my mush brain can’t get around right now but I’m excited we got this far)

Exploring 2000s music while coding like I’m still customizing my MySpace, while the guy I was dating in said time period sits next to me playing video games and harmonizing to Hellogoodbye, I’m living out my childhood.

There’s still some things to fix up, but the art direction is Filipino Placemats (banig), which I think will show through in the index page, but here’s an article view so far:

ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧

Scratchpad 🐾

  • If you swear you’ve installed Node but your terminal can’t find it (command not found) it’s possible that you have it in a specific folder — this isn’t inherently bad, but it’s better to have it properly installed system-wide for ease of use and to avoid path-related issues.
    • Solution: Uninstall + reinstall node
  • When you get to the Github step and it asks you for your Github password, enter your personal access token (Github > Settings > Developer Settings > Personal Access Tokens > Tokens (Classic)), then check Repo and Workflow
  • If you’re importing a bunch of files already, make sure you have an index.md file. I guess it doesn’t read anything else and will send a 404 error if you don’t have one.
  • There’s a chance that it’ll still register an error, even if you have an index.md file. That’s because the frontmatter formatting is important. It should be outlined the same way it’s listed here.
  • Terminal calls
    • npx quartz build --serve == run local serverhost
    • CTRL + C == Exit serverhost
    • npx quartz sync == push updates to repository (Github)
    • npx quartz build == push to Netlify
    • mv old-name new-name == change the name of the folder (ideally you’d do this after cloning the git, so you don’t have to see quartz as a name for the folder)

Graph View