Plan

  • Grant cloudflare access to foam vault repo.
  • When ‘building’, checkout the quartz repo (must be a public repo) to a subfolder: ‘quartz/’
  • During build, after quartz checkout, we should create two symbolic links (if cloudflare allows that) for the foam vault repo’s ‘notes/’ and ‘posts/’ directory in the ‘quartz/content/’ folder.
  • Then ‘cd’ to the ‘quartz/’ folder and build quartz there, using the commands provided by Quartz doc.
  • Then deploy the built quartz so clouldflare can serve the site. Note that all the files of ‘quartz’ should be under ‘quartz/’ folder as we checked out quartz there.

Customize {name}.pages.dev?

No, it can’t be changed Ref> You can only decide your {name} when you create the project. And if there are name conflict, cloudflare will add suffix to the name. Renaming the project after creation is allowed, but it won’t change the subdomain. Official doc.

Currently I just plan to use cloudflare-pages (not workers) as pages should be good enough for my use case.

Configs (updated version)

Build command:

git fetch --unshallow && git clone --depth 1 https://github.com/qining/quartz.git quartz && find . -maxdepth 1 -mindepth 1 ! -name "quartz" -exec sh -c 'ln -s "$PWD/$1" "quartz/content/$1"' _ {} \; && cd quartz && echo $(ls ./content/) && npm ci && npx quartz build

I think I should drop the git fetch --unshallow command, as it will take a long time to fetch all the history and with the current setup, quartz may not be able to fetch the history of the foam vault repo.

  • Try it out. It works. I should just remove the git fetch --unshallow command.

Build output dir shall be:

quartz/public

Add NODE_VERSION with value 24 in the Environment Variables and Secretes section.

Some findings during the journey (about linux commands):

  • To ‘copy all the files/dirs (except the x-folder) under current dir’ to a x-folder under current dir:
    • find . -maxdepth 1 -mindepth 1 ! -name "x-folder" -exec cp -a {} "x-folder/" \;
    • But this exact same pattern won’t work for ln command. (likely due to the use of -exec)
  • To ‘create symbolic links to all files/dirs (except the x-folder) under current dir’ to a x-folder under current dir:
    • find . -maxdepth 1 -mindepth 1 ! -name "x-folder" -exec sh -c 'ln -s "$PWD/$1" "x-folder/$1"' _ {} \;
    • Note, this uses sh -c.
  • You can not clone the same private repo again in your build command.
  • Quartz won’t respect the .git in the content/ folder. So if your (like me) content in content/ comes from another repo, you won’t have its git history being utilized by Quartz.
  • Quartz should be configured to use ‘relative’ mode for link resolution, because Foam will update links to ‘relative’ links.

Deprecated Configs

Build command:

git fetch --unshallow && git clone --depth 1 https://github.com/qining/quartz.git quartz && mkdir -p quartz/content && ln -s $PWD/notes quartz/content/notes && ln -s $PWD/posts quartz/content/posts && ln -s $PWD/assets quartz/content/assets && ln -s $PWD/index.md quartz/content/index.md && cd quartz && echo $(pwd) && npm ci && npx quartz build
  • Question: Should I add npm ci before npx quartz build?
    • YES it is needed!
    • It is actually a step in the github-page workflow. But I don’t know whether it is not there for cloudflare pages.
    • Otherwise, I got this error:
node:internal/modules/esm/resolve:854
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'yargs' imported from /home/necauqua/documents/obsidian/quartz/quartz/bootstrap-cli.mjs
  • Add NODE_VERSION with value 22 in the Variables and Secretes section.
    • For pages, default is 18.17.1 probably. But quartz (for version 4.4) needs 22.

Build output dir shall be: quartz/public