Dev Outside

Building this website

Dec 02, 20243 min read

I use Obsidian to take notes, and I’ve been taking notes for quite a while. I thought on sharing more of my projects and decided to grab some of my notes and publish it.

Because I like to Avoid reinventing the wheel, someone else already solved it and I didn’t want to spend much time building my website. I did some quick research and I’ve found Quartz, which already supports most Obsidian Markdown flavours.

I followed it’s documentation and changed some bits:

You can check my changes by following my commits on github. Because it’s good to Make it work, then make it better let’s see my approach:

  1. Make it work locally with my local notes
  2. Publish using Github Pages
  3. Wanted to keep my personal notes outside of github, so I moved the hosting to My NAS setup using UNRAID
  4. Setup analytics using GoatCounter
  5. Wasn’t happy hosting this myself, so decided to improve my notes backup by using my on Git repository
  6. So, I moved notes to personal Gitea instance, with a Gitea Action building quartz based on my private files and updating the public folder of my quartz repository.
  7. Configured Github Pages to publish the public folder
  8. Configured my Obsidian to sync to Gitea using the Git plugin.
flowchart TD
Obsidian -- updates private git --> Gitea["Self-hosted gitea"] --> GiteaActions -- updates public/ folder --> GithubRepository[github.com/josecoelho/quartz] --> GithubActions -- publish to --> GithubPages[Github Pages - josecoelho.com]

Over complication Achieved!

Way too many moving parts aye? It is likely to fail at some point. It is a good feeling though 😬… Remember, Take the context and constraints into consideration, if this site goes down, it’s all good and I’m learning more stuff.

Gitea Workflow

There’s something magical to have this running locally and automated.

name: Build and Deploy Quartz Site
 
on:
  push:
    branches:
      - main
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # Checkout the notes repository
      - name: Checkout Notes Repository
        uses: actions/checkout@v2
 
      # Clone the Quartz repository into a separate folder
      - name: Clone Quartz Repository
        run: git clone --depth=1 https://github.com/josecoelho/quartz.git $GITHUB_WORKSPACE/../quartz
 
      # Link the notes folder into Quartz's content directory
      - name: Link notes to Quartz content directory
        run: ln -s $GITHUB_WORKSPACE/ $GITHUB_WORKSPACE/../quartz/content
 
      # Set up Node.js
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
 
      # Build Quartz
      - name: Build Quartz
        working-directory: ../quartz
        run: |
          npm install
          npx quartz build
 
      # Set up SSH for deployment via deploy key
      - name: Set up SSH
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
 
      # Deploy the built site to GitHub Pages using SSH
      - name: Deploy to GitHub Pages via SSH
        working-directory: ../quartz
        run: |
          git config --global user.name "José Coelho"
          git config --global user.email "[email protected]"
          # Update remote URL to use SSH
          git remote set-url origin [email protected]:josecoelho/quartz.git
          git add public
          git commit -m "Deploy updated site - Contents from private Obsidian vault" || echo "No changes to commit"
          git push origin

TODO

  • Automate build and deploy, by moving it from my computer to My NAS setup using UNRAID serversomeday ✅ 2024-12-05
  • Add integration to a comment system - done following Quartz Giscus Integration ✅ 2025-04-15
  • Add page analytics ✅ 2024-12-06
  • Fix issue were when moving files, it shows duplicated and requires a Quartz restart to fix ✅ 2025-03-24
  • Fix favicon, it stopped working after hosting myself ✅ 2025-04-15
  • Host somewhere else, we can build and deploy to Github pages (maybe), or even, go crazy and host Gitlab and run my own CI/CD. waaay over the top, but could be fun… ✅ 2025-03-24

Graph View

Backlinks