Why?
This site is my little experiment into static sites, TypeScript, Quartz, and GitHub. I used to make fancy website using WordPress but the costs of maintaining them have become gigantic over time. Like why tf hosting costs triple after your first years, it’s a fucking trap. And the more important thing—actually writing and posting—is something I struggle with, so this time I wanted to make this as simple as possible. (Welp, not really simple, but it’s fun and cheaper…).
I also really really enjoy writing in markdown files in GitHub and pushing them onto the site lol. I’ve taken thousands of notes in my Obsidian vault, but they just ended up forgotten… WordPress editor is so slow and makes the whole writing and publishing experience a pain. The current setup makes it super easy and fast to edit and publish multiple notes.
How this site was created
I use a combination of CloudFlare Pages, Quartz, GitHub, and VSCode to make this work.
-
CloudFlare Pages: I’ve used services from CF before and trusted them.
-
Quartz: I love the design. I’ve tried the Digital Garden plugin in Obsidian but it doesn’t record changes on GitHub and the design looks…ugly. Obsidian Publish is easy to use and looks very nice, but it’s a recurring expense.
-
Visual Studio Code: Many people like Vim, but I like VSC because it looks cute lmao.
Disclaimer: I’m not a developer. I like to tinker with tech stuff in my free time, so creating a site like this is more like…lots of research, trial and error, and unanswered questions. There are still problems that I can’t really solve, like how to remove diacritics from heading links…(if you know how, please help).
Here’s what I did:
-
Clone Quartz repo to my GitHub account.
-
Create a page in CloudFlare Pages and connect it to the Quartz repo.
-
Change the domain to a custom domain (if you have one). Otherwise your domain might be something like blobblob.blepblep-69blo.dev (it’s alright if you want to keep it…it’s ugly, but it’s free).
-
Use GitHub & VSCode to make changes to your site.
Useful resources
Maybe you’re interested in creating your own digital gardens too and don’t know where to start. So here are some useful resources that I’ve used to set this site up:
-
How I Published My Knowledge Base Online for Free: Where I found out that I can create a free digital garden. The author also posted some tutorials, but imo they were not very detailed for noobs.
-
Jacky’s Repo: The repo of the Quartz’s author. I’ve digged a lot into his code to find out what I want for my site.
-
How to host a Digital Garden on CloudFlare: Very detailed, useful for configuring CloudFlare.