the Vimoire

recent

See 69 more →

Initial Quartz + Obsidian setup

Oct 19, 20242 min read

Quartz setup

Install node.js

Do this on the server hosting your website.

# installs fnm (Fast Node Manager)
curl -fsSL https://fnm.vercel.app/install > nodejs_install.sh
cat nodejs_install.sh # verify script
chmod +x nodejs_install.sh
./nodejs_install.sh
 
# activate fnm
source ~/.zshrc
 
# download and install Node.js
fnm use --install-if-missing 20

Set up Quartz

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

Configure Quartz

// quartz/quartz.config.ts
// ...
const config: QuartzConfig = {
  configuration: {
    pageTitle: "The Vimoire",
    pageTitleSuffix: "",
    enableSPA: true,
    enablePopovers: true,
    analytics: null,
    locale: "en-US",
    baseUrl: "vimoire.com",
    ignorePatterns: ["private", "templates", ".obsidian"],
    defaultDateType: "created",
    theme: {
      fontOrigin: "googleFonts",
      cdnCaching: false,
      typography: {
        header: "Inter",
        body: "Inter",
        code: "Noto Sans Mono",
      },
// ...
Plugin.Latex({ renderEngine: "katex" }),
Plugin.HardLineBreaks(),
// ...
filters: [
  Plugin.ExplicitPublish()
],
// ...

Publish workflow

  • Obsidian vault containing index.md at the root for the main page
  • git repo containing full Obsidian vault
  • Posts all contain frontmatter publish: true
    • Other frontmatter that Quartz will look for: tags, title, description,date
  • Script to pull from remote repo and build site directly to the

Command to build Quartz site:

npx quartz build -d {vault-dir} -o {output-dir}

Note

Update 2024-11-16: refer to Quartz with Obsidian configuration for my detailed, more updated workflow for my website.

EOF

Backlinks