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 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 markdown files 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 I just kept using it.
-
Quartz: I love the design. I tried the Digital Garden plugin in Obsidian but it didn’t record changes on GitHub and the design didn’t match my taste. Obsidian Publish was 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.
-
Claude: It helped me a lot with technical changes.
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.
How to set up
Here’s what I did:
-
Clone Quartz repo to my GitHub account and local computer.
-
Push my local repo to GitHub.
-
Create a page in CloudFlare Pages and connect it to my 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 annoying, but it’s free).
-
Use VSCode to make changes to my site, then push the changes to GitHub.
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.
-
Collecting random Quartz snippets from everywhere, especially from the people on Discord.