Passo a passo

Etapa 1: Preparar o projeto Next.js

Se já tem um Next.js, pule. Senão:

npx create-next-app@latest meu-vault
cd meu-vault
# Escolha: TypeScript, App Router, Tailwind (opcional)

Etapa 2: Instalar o Quartz

# na raiz do projeto
git clone https://github.com/jackyzha0/quartz.git obsidian-site
cd obsidian-site
npm install
cd ..

Etapa 3: Estrutura de diretórios

mkdir -p public/vault
mkdir -p scripts
mkdir -p obsidian-site/content

Etapa 4: Configurar o Quartz

Crie vault.config.ts na raiz:

import { QuartzConfig } from "./obsidian-site/quartz/cfg"
import * as Plugin from "./obsidian-site/quartz/plugins"
 
const config: QuartzConfig = {
  configuration: {
    pageTitle: "📚 Meu Vault de Conhecimento",
    enableSPA: true,
    enablePopovers: true,
    analytics: { provider: "plausible" },
    locale: "pt-BR",
    baseUrl: "/vault",
    ignorePatterns: ["private", ".obsidian"],
    defaultDateType: "created",
    theme: {
      fontOrigin: "googleFonts",
      cdnCaching: true,
      typography: { header: "Schibsted Grotesk", body: "Source Sans Pro", code: "IBM Plex Mono" },
      colors: {
        lightMode: {
          light: "#faf8f8", lightgray: "#e5e5e5", gray: "#b8b8b8", darkgray: "#4e4e4e", dark: "#2b2b2b",
          secondary: "#284b63", tertiary: "#84a59d", highlight: "rgba(143, 159, 169, 0.15)",
        },
        darkMode: {
          light: "#161618", lightgray: "#393639", gray: "#646464", darkgray: "#d4d4d4", dark: "#ebebec",
          secondary: "#7b97aa", tertiary: "#84a59d", highlight: "rgba(143, 159, 169, 0.15)",
        },
      },
    },
  },
  plugins: {
    transformers: [
      Plugin.FrontMatter(),
      Plugin.CreatedModifiedDate({ priority: ["frontmatter", "filesystem"] }),
      Plugin.Latex({ renderEngine: "katex" }),
      Plugin.SyntaxHighlighting({ theme: { light: "github-light", dark: "github-dark" }, keepBackground: false }),
      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
      Plugin.GitHubFlavoredMarkdown(),
      Plugin.TableOfContents(),
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
      Plugin.Description(),
    ],
    filters: [Plugin.RemoveDrafts()],
    emitters: [
      Plugin.AliasRedirects(),
      Plugin.ComponentResources(),
      Plugin.ContentPage(),
      Plugin.FolderPage(),
      Plugin.TagPage(),
      Plugin.ContentIndex({ enableSiteMap: true, enableRSS: true }),
      Plugin.Assets(),
      Plugin.Static(),
      Plugin.NotFoundPage(),
    ],
  },
}
 
export default config

Etapa 5: Criar rotas do Next e API (resumo)

• Rotas /vault e /vault/[...slug] servem os arquivos estáticos (veja detalhes em Rotas no Next.js).
• API opcional /api/graph para gerar grafo das notas (detalhes em API opcional do grafo).

Etapa 6: Notas iniciais

obsidian-site/content/index.md:

---
title: "Início"
---
 
# 👋 Bem-vindo ao meu Vault!
 
## Navegue pelos tópicos
- [[Programação]]
- [[Projetos]]
- [[Aprendizados]]

obsidian-site/content/programacao.md:

---
title: "Programação"
tags: [dev, code]
---
 
# Programação
 
## Tópicos
- [[JavaScript]]
- [[TypeScript]]
- [[Next.js]]

Etapa 7: Gerar e testar local

# Linux/Mac
./scripts/update-vault.sh
 
# Windows
./scripts/update-vault.ps1
 
npm run dev
# Acesse http://localhost:3000/vault