My wife and I are expecting our first child, and for my first dad-mode project I set out to create an old school family blog. I’m excited about maintaining a website over the next 20+ years that will store our family’s memories and bring loved ones along for the ride.

At first I considered an out-of-the box tool like Wordpress or Substack. Wordpress feels like a dinosaur, and though Substack is modern with a nice editor, it’s built around newsletters which is not my use case. After procrastinating for a while, I rolled up my sleeves and decided I needed a custom setup to satisfy my list of requirements:

1. A delightful editor for both my wife and I (ideally desktop/mobile native)
2. Markdown posts, with the ability to attach audio / photo / video
3. Simple publishing
4. Version control
5. Complete ownership of content
6. A custom domain
7. Password protection for the site
8. Free, or almost free

Basically I wanted a site like this one, but private and one that my wife could easily contribute to. After a day of tinkering, this is the architecture I landed on:

It looks like a lot, but really it’s just four things glued together:

1. Obsidian for editing (including Sync)
2. Quartz for static site generation
3. Github Actions for deployment
4. Cloudflare Pages for hosting

The end workflow is:

1. Either of us writes a post on our computer and/or phones
2. I commit the new post and push to Github
3. Github Actions triggers a build of the static website using Quartz fork
4. Github Actions publishes the static website to Cloudflare Pages

My wife and I use Obsidian Sync for shared notes, so it was the obvious choice for a website editor. Obsidian is a Markdown wrapper with a smooth interface, a mobile app, a wide plugin ecosystem, and the ability to link notes. Writing website posts directly from Obsidian is a delight, and being able to collaborate is even better.

Quartz is a piece of indie software that compiles markdown into static site, built specifically for Obsidian. It’s a free way to publish Obsidian notes without paying for Obsidian Publish, which is pretty expensive for what you get.

Typically you use Quartz by cloning the repo and putting your Markdown files in a /content directory within the repo. Then you use the built in npx quartz build command that outputs the compiles the site into the /public folder. I wanted to decouple content from software, and found a blog post that helped me do just that. Instead of putting my content into the Quartz repo, I created separate repos Quartz and my content, which are then combined on demand.

In our existing shared vault, we now have a folder titled “Family Blog”. It’s a plain old folder that I initialized as a git repo (with a deploy script, see below) and pushed to a private Github repo. Separately, I have a local fork of Quartz that I pushed to a public Github repo. When I push new content, Github runs the following deploy script located in /github/workflows/deploy.yml:

name: Deploy to Cloudflare

# Allow only one concurrent deployment, skipping runs queued between the run
# in-progress and latest queued. However, do NOT cancel in-progress runs as we
# want to allow these production deployments to complete.
concurrency:
  group: "deployment"
  cancel-in-progress: false

# Sets permissions of the GITHUB_TOKEN to allow deployment
permissions:
  contents: read

# Run this workflow on pushes to main
on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  deploy:
    # This job uses a GitHub-hosted runner.
    runs-on: ubuntu-latest

    steps:
      # git checkout itspriddle/quartz
      - name: Checkout Quartz
        uses: actions/checkout@v4
        with:
          repository: vpai/quartz
          ref: v4
          path: quartz

      # Remove the quartz/content directory. This should be empty besides a
      # .gitkeep file
      - name: Clean Quartz content
        working-directory: quartz
        run: rm -rf content

      # git checkout vpai/private-notes-repo into the quartz/content
      # directory
      - name: Checkout this repo
        uses: actions/checkout@v4
        with:
          path: quartz/content

      # Setup Node.js 18 to run the Quartz project.
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 20 

      # Install npm dependencies for Quartz.
      - name: Install node dependencies
        working-directory: quartz
        run: npm install

      # Build the Quartz site in the quartz/public directory.
      #
      # Note: TZ gets set to my local timezone so `date` in frontmatter
      # correctly renders in Quartz pages
      - name: Build Quartz site
        working-directory: quartz
        run: npx quartz build --bundleInfo
        env:
          TZ: America/New_York
    
      # Install Cloudflare Wrangler CLI
      - name: Install Wrangler
        run: npm install -g wrangler

      # Deploy the site to Cloudflare Pages
      - name: Deploy to Cloudflare Pages
        env:
          CLOUDFLARE_ACCOUNT_ID: $
          CLOUDFLARE_API_TOKEN: $
        run: |
          wrangler pages deploy ./quartz/public/ --project-name=family-blog

The script merges the two repos, builds the site, then pushes it to Cloudflare. I chose Cloudflare is because I wanted my content to be private, and Github Pages only supports public repos. Finally, I added a custom domain and a Cloudflare Worker on top of my Page for basic username / password authentication:

That’s it - a free, private, self hosted family blog. 10/10 would recommend to anyone out there with a few technical chops looking to build something similar.