I’m assuming anyone motivated enough to read this post won’t need a crash course, but in case of jargon emergency, check out Eleventy1 check out the Wikipedia or IndieWeb what dis, or gawk at the delectable site of Eleventy creator Zach Leatherman to see what it can do! , Quartz 52 read the IndieWeb intro, then check out the philosophy Quartz is built on , and static site generators (SSGs)3 pick your poison: Wikipedia or IndieWeb overview, or a great intro post by Brennan for the basics. in a nutshell, an SSG takes a text input file (eg Markdown) and turns it into a webpage. it’s like a magic trick, but for nerds.
first, why this post
thanks to Naty for highlighting the trickiness of combining two SSGs, and Colin for the reminder that self-documentation is useful not only to others, but even to “you from three hours ago” on why you built something in a certain way.
I’m hyperfocusing so hard on redoing my site that I’m committing all them familiar sins: forgetting to eat, sleep, hydrate or, every now and again when something just doesn’t frigging work urgh!!!, breathe. it doesn’t feel like suffering because, yes, it’s the honeymoon phase, but I’m bound to be required to pay for it soon with some burnout, so I’m ensuring I at least get some documentation out of it 😅
next, the backstory
so. why use both Eleventy and Quartz 5 when either can build a website? my decision to combine the two instead of choosing one SSG actually came about in a much more innocuous way.
I’ve been working with Quartz 4 for five months, learning to make TypeScript dance4 praise be to creator Jacky Zhao for releasing Quartz 5 in Sept 2026, moving configuration from TypeScript to YAML (and other easier-on-the-brain updates!) (which, within the confines of my highly-customisable-yet-must-build-on-Quartz plan, was not easy). the reason I had my heart set on Quartz is because I live and die inside Obsidian (let’s just say that if it were a physical place and I were to go missing, that’s the first—and probably only—place you’d need to look). now that I got it live (via the Quartz Syncer plugin), I’m so happy that I did because it is a breeeeeeeze, a joy, a something-that-makes-my-heart-sing. (that deffo deserves its own post.)
so when I heard Chris Burnell wax lyrical about Eleventy, I decided to give it a go and voila! it wasn’t long before I realised it’d solve literally all the homepage-headaches that had kept me stuck with Quartz.
ok, what I wanted my website to do
my situation is a little more complex than that of the average personal website. I need the site to perform several jobs at once: present my professional presence, yet keep it away from my day-to-day blogging and gardening, which is where I’ll be spending most of my time, publishing personal posts, developing and connecting garden notes and—this was a wish list item I hadn’t planned on implementing till much later—collect my anti-social social stream updates. in short, they all have different authoring needs and thus require different presentation approaches.
why oh why I tried to force-feed everything into the Quartz framework for so long can be attributed purely to my stubborn insistence that the reason it wasn’t working was because I didn’t (yet) have the technical expertise to make it work, not because I was trying to force a square peg into a round hole 🙄
a single static-site generator was asking for too much
look, either generator could build this entire website. but there’s a reason we tell people to “play to their strengths” and advise each other to “use the best tool for the job”. Eleventy and Quartz both have particular qualities that enabled me to end up with the look ‘n feel AND functionality I wanted, not the site I simply ended up settling for. one SSG just wasn’t the best fit because for my use case, this thing needed two engines.
what’s not worth mentioning is why I wanted a setup without a CMS. thanks to one 17 too many WordPress horror stories, I’m cured for LIFE from using a content management system again, probably ever!
what Eleventy does well
I use Eleventy (11ty) for the homepage and its expanding bands (work with me, explore my mind, and the now section). I use it also for the social stream, the subscribe page, the search page, and the changelog.
11ty is known for its flexible templates, structured pages, and custom design which—as you can tell especially on the home page section—is exactly what I needed (and why TypeScript was giving me existential anxiety). it gives the custom design room to work. flexible templates and structured data mean my expanding bands and professional information on the home page work the way I intended. (disclaimer: while Quartz is where this really shines, 11ty too supports Markdown5 as well as a bunch of other languages; see the Eleventy documentation so its role isn’t limited to conventional pages—hence why the two work Oh So Well together!)
what Quartz does well
I use Quartz for my blog, my digital garden, and my categories and tag directories (both of which draw from everything across blog posts, garden notes, and social entries).
Quartz is amazing for Markdown publishing (I’m a sucker for MD and pretty sure I speak it in my sleep), backlinks, interconnected notes, and overall knowledge navigation. it’s foundational for connected writing, because that’s what it was created for. Markdown + Obsidian support6 see Quartz’ Obsidian compatibility includes wikilinks, embedded notes, frontmatter, backlink features, and even Obsidian Bases, plus Excalidraw through a community plugin. it does what it says on the can: it publishes Obsidian files! this, for me, makes it the tool of choice that allows readers to follow relationships between ideas rather than just a chronological list. though it could just as easily have lived on 11ty, that’s also the reason I built the blog on Quartz to preserve the authoring and linking workflow. on Quartz, I can seamlessly link between related garden notes and blog posts, since my Obsidian vault is the birthplace of both.
so yes, I could’ve used either of these SSGs by themselves. however, putting everything in Eleventy would consolidate the templates, but require adding and maintaining more of the connected-note behaviour—something that made no sense due to my Obsidian-first approach to life my digital world. putting everything in Quartz, meanwhile, would preserve that publishing foundation, but (as my mental health can attest to) require rebuilding the professional pages and expanding-band interface within its component system (not impossible but NOT easy!).
clearly, for me the benefits of combining two specialised tools far outweigh forcing either one of them to serve every purpose. and this, dearly beloved, is the freeeedom of the open-source and the IndieWeb; unlike centralised solutions that force you into their box, your website architecture gets to be whatever works best for you—not necessarily one framework doing everything, because several smaller tools doing what they do best can work even better.
in practice
the good
1. expanding homepage bands + professional pages (via Eleventy)
having been my biggest block till I explored 11ty, my homepage starts with three expanding photo bands. the professional side has service descriptions, speaking information, and contextual panels rather than a chronological list of posts. 11ty gave me a straightforward way to assemble that interface from (Nunjucks) templates and structured data, allowing me to design the page around its purpose while still generating ordinary HTML pages at real routes with their own titles and canonical URLs.
2. one post, several ideas (via Quartz)
because I’m hosting this month’s IndieWeb Book Club7 https://indieweb.org/IndieWeb_Book_Club , I’m naturally more incentivised to do a published deep-dive into my related garden notes that I create while reading the book. so far, I’ve notes on hopepunk as resistance, solarpunk versus cyberpunk, the burden of meaningful productivity, and secular monasticism as community care infrastructure. these notes aren’t “done”; they’re merely shorthand starting points for ideas I’m exploring which may/not make it into my book review post at month’s end. so while my post about hosting the IndieWeb Book Club is a finished piece, the ideas in A Psalm for the Wild-Built keep opening into other subjects, which Quartz is great for: my notes live as connected works-in-progress rather than a blog-standard sequence of dated (finalised) posts.
note: the “related garden notes” uses an explicitly curated relationship list in my Obsidian frontmatter, displayed by a custom component (RelatedReading.tsx), not an automated, algorithmic semantic recommendation engine from Quartz. I would love to figure out how to do this though! more on my current set-up in a future post.
3. have history, am new, still growing (via Quartz)
I first created the “perfectionism as procrastination” note back in Nov 2022. it’s hitting my website in Oct 2026 (here’s looking at you—literally—14,000 other notes in the waiting room). each garden note differentiates between its maturity status (budding, in this case), aka how developed it currently is; when the idea first entered my notes (creation date), and when it became public (publication date). from there, whenever I do more work on the note, the updated date catches that data. this is all facilitated through Obsidian YAML frontmatter.
4. socials: Markdown vs rendering (hybrid)
- examples:
first-off, I’m LOVING my new anti-social social feed. also a topic that demands its own post, so lemme pause all that gushing for a quick second. suffice to say that my publishing workflow, thanks to Quartz Syncer, is a frigging dream. my bee-eater pics start as a note in Obsidian; MD files are stored under quartz-vault/content/stream. because social stream entries—especially photo entries—need a different reading experience from a blog post or garden note (timeline preview + individual post + photo grid), we move over to a custom-built pipeline on 11ty which handles those views (including omitting embedded metadata from the published images). just because the source is in Markdown doesn’t mean every page has to be rendered by Quartz. told ya they work well together!
5. browsing across the boundary (hybrid)
readers don’t need to know (or care, duh) which SSG created which page. categories and tags should do their job, not make life any more confusing than it already is. my shared tag and category pages are sheepdogs that round up blog posts, garden notes, and stream entries from across the site valley; labels identify which kind an entry is so my brain doesn’t break. ditto for the search page, which surfaces site-wide results.
as for RSS (aka the subscribe function), I’ve yet to do much fiddling and am biding my time 🤤. I did however implement distinct standalone feeds for the stream, the blog, the garden, or blog + garden together, as well as The Everything Feed that combines those two and also stream posts. the latter required building a shared index to combine feeds across the Quartz (blog + garden) and 11ty (social stream) outputs. (they don’t auto-discover or merge one another’s indexes or feeds.) I’ll definitely be doing some upgrades in this arena, as soon as I figure out what I want to do (and don’t).
now presenting… tradeoffs!
you were waiting for this, weren’t you 🙃 obviously, the more complex things get, the more your site demands its pound of flesh in the form of additional maintenance: two dependency sets, two template systems, and what-feels-like-frigging-ENDLESS integration work for navigation, search, feeds, metadata, and styling. (then again, it’s my endless tweaking that’s leaking the honey from my moon.) so while combining two specialist SSGs saves on feature-building work, it does unlock coordination work. hopefully, the worst of this is in the getting started phase, which I’ll allow myself to graduate from soon-ish (maybe?)
but this is mostly a question of taking responsibility for the boundaries between the two (and remembering what goes where, build-wise 😅); a tradeoff I’m happy with when the major work of designing around the different jobs my pages needed to do AND giving my connected writing a useful foundation are both taken care of!
behold, the bad
note: this is the challenge I’ve faced so far; I’m sure there’ll be more to report on later!
the navigation inconsistency loop
if I had to time-audit my activities on the site backend in the last few days (really wish I had, actually!), I feel like 700% of my effort was spent fixing my damn menus. originally, I had a bunch of different headers. the homepage looked different to the blog, which was different from the garden, which diverged from the stream8 this is not a Road Not Taken pun , which- well, you get the idea. it was a right mess. I was busy figuring out the UI and UX and got a little trigger-happy. so I had a bunch of different template structures and (mobile) responsive rules. because, between 11ty and Quartz, I have two rendering systems, I’d accumulated a pile of different header rules, which I (ever-so-painfully) had to bring back to one design that shares the same styling. and then I had to test both outputs (ad nauseam).
whereas now I have a common compact masthead (and archive controls for blog/garden/stream) that’s backed by shared CSS and the same navigation data, getting there was a mini-nightmare because making changes to one template system doesn’t mean those changes are effected site-wide. thankfully, this is not something I’ll need to repeat often (then again, menus are hard and idk HOW web designers master the art!)
ok but… how does this actually work?
TL;DR: two builds, one deployed website. more in my next post, else we’ll be here all day!
footnotes
-
check out the Wikipedia or IndieWeb what dis, or gawk at the delectable site of Eleventy creator Zach Leatherman to see what it can do! ↩
-
read the IndieWeb intro, then check out the philosophy Quartz is built on ↩
-
pick your poison: Wikipedia or IndieWeb overview, or a great intro post by Brennan ↩
-
praise be to creator Jacky Zhao for releasing Quartz 5 in Sept 2026, moving configuration from TypeScript to YAML (and other easier-on-the-brain updates!) ↩
-
as well as a bunch of other languages; see the Eleventy documentation ↩
-
see Quartz’ Obsidian compatibility ↩
-
this is not a Road Not Taken pun ↩