Hosting a quartz 4 site

read the official docs on this. this is going to be a very brief step by step to quickl get up and running.

Creating project

git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create

Preview locally

npx quartz build --serve

Config for self hosting

set base url in quartz.config.js

Caddyfile

Caddyfile

notes.derrikcreates.com {
    root * /srv
    try_files {path} {path}.html {path}/ =404
    file_server
    encode gzip
 
    handle_errors {
        rewrite * /{err.status_code}.html
        file_server
    }
}

take note of line 2 root * /srv the /srv is the path inside of my caddy docker container that is mounted to the public folder made when doing npx quartz build if you are not using docker just point this to your public quartz folder.

caddy docker compose

docker-compose.yml

services:
  caddy:
    image: caddy:latest
    restart: unless-stopped
    cap_add:
      - NET_ADMIN
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - ./caddy:/etc/caddy/
      - ../public:/srv
      - caddy_data:/data
      - caddy_config:/config
volumes:
  caddy_data:
  caddy_config:

take note of line 12/13.

Copy to VPS

scp has been nothing annoying for no good reason. I just wanted a way to double click a bat file and copy all the content in the parent directory to remote folder. Be it windows, scp or both, just skip them and use wsl shit just works.

wsl rsync -avz --delete ../* username@remote-ip-address:/directory/on/remote

save that as a .bat file and double click the file. it will run rsync in wsl and copy all the parent directory to remote.

TODO: make sure this works when executing from cli, i suspect ../* will be relative to current directory instead of the .bat file directory.

Theming

https://github.com/saberzero1/quartz-themes

Download the quartz theme script to your sites quartz repo. This will be in the same folder as the quartz and public folders are

Theme Script

curl -s -S -o action.sh https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.sh

then run the script with your theme name

for windows

./action.bat tokyo-night

Custom CSS

Quartz 4 has a file in ./quartz/styles/custom.scss relative to your quartz repo root (the directory containing the public folder or the .git folder)

find the css you want to adjust using browser dev tools.

In my case the i want to change the background color for highlights in code blocks.

quartz/styles/custom.scss

// put your custom CSS here!
[data-highlighted-line]
{
    background-color: #ffffff1c !important;
}

by default tokyo night doesnt have a background color for line highlights in quartz.