Woodard.Tech

Setting up Obsidian + Quartz + Git + Cloudflare for hosting an Obsidian Site.

3 min read

What are we doing??

I have wanted to self host an obsidian publish site for a bit, Digital Garden, Hugo , and some other options that I’ve messed with in the past just didn’t sit right for me. Then I ran across Quartz and things clicked. it seemed like a lot better option for my workflows so I decided to pull the trigger on it.

Setup

We’re doing this in an existing vault on Arch Linux (Omarchy to be exact)

I cloned the Quartz repo into my system, then copied all the files into my existing vault folder

git clone https://github.com/jackyzha0/quartz.git Sync\ Vault

cd into the folder, and we’ll initialize things.

Sync Vault v4 ❯ npm i
Sync Vault v4 ✗ npx quartz create
 
┌   Quartz v4.5.2
│
◇  Choose how to initialize the content in `/home/lwoodard/Git Repos/Sync Vault/content`
│  Empty Quartz
│
◇  Choose how Quartz should resolve links in your content. This should match Obsidian's link format. You can change this later in `quartz.config.ts`.
│  Treat links as shortest path
│

Now, we’re copying alllll the things into the obsidian vault that I have existing already. (could have just cloned into this … but I didn’t.)

cp -R $~/PATH_TO_VAULT

Next, we’ll cd into the actual Obsidian Vault folder.

cd $~/PATH_TO_VAULT

Publishing up notes.

For notes that live in the /content folder, we add this font matter to the document.

---
title: Example Title
draft: false
tags:
  - example-tag
---

There’s more details on font matter here on The Quartz site.

Git Setup

We’re going to run to GitHub and create a new repo. With this repo we can now initialize the setup.

WARNING

I have a lot in this vault, so I don’t want to show really anything at this time so we’re adding a .gitignore file to this repo to ignore everything except the stuff needed for quartz

# Ignore everything by default
*
 
# --- Allow directories (and all contents) ---
!content/
!content/**
 
!docs/
!docs/**
 
!node_modules/
!node_modules/**
 
!quartz/
!quartz/**
 
# --- Allow specific root-level files ---
!Dockerfile
!globals.d.ts
!index.d.ts
!LICENSE.txt
!package.json
!package-lock.json
!quartz.config.ts
!quartz.layout.ts
!README.md
!tsconfig.json
 
# --- Ensure git sees the directories themselves ---
!.gitignore
 
git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin $REPO.git
git push -u origin main

Connecting CloudFlare Pages

https://pages.cloudflare.com/

On the Cloudflare site, select Workers & Pages, then at the top is an ”+ Add” button, click on this and select “Pages”

Import a Git Repository and enter the following details. Framework present - “None” Build command - “npx quartz build” Build output directory - “public”

Hit the “Save and Deploy” button and we’ll be online shortly!

Build Watch Path Configuration

Quartz has a structure to it’s configuration, in this case we only really need to “watch” the /content folder as that’s where all the magic is. Under the “Settings” tab for your project, we’ll select “Build Watch paths” and enter in content/*

This will tell our repo to only watch for changes here.

Adding a custom domain

Under our project setting in Cloud Flare we’ll go to the “Custom domains” tab, with this option you’ll simply enter the domain you have setup in your CF account and it should automatically configure itself.

Graph View