๐Ÿ’ก Tips ๊ฒŒ์‹œํŒ์ด ์˜คํ”ˆํ–ˆ์Šต๋‹ˆ๋‹ค! ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ ์ธ์‚ฌ์ดํŠธ๋ฅผ ๋‚˜๋ˆ ๋ณด์„ธ์š”.ยทโœ๏ธ ๋Ÿฐ์นญ, ์„ฑ์žฅ, ์ˆ˜์ตํ™” ๋“ฑ ๋‹ค์–‘ํ•œ ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ํŒ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์–ด์š”.ยท๐Ÿ™Œ ๋‚˜๋งŒ์˜ ๋…ธํ•˜์šฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ๋‹ค๋ฅธ ๋ฉ”์ด์ปค๋“ค๊ณผ ์†Œํ†ตํ•ด๋ณด์„ธ์š”!ยท๐Ÿ’ก Tips ๊ฒŒ์‹œํŒ์ด ์˜คํ”ˆํ–ˆ์Šต๋‹ˆ๋‹ค! ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ ์ธ์‚ฌ์ดํŠธ๋ฅผ ๋‚˜๋ˆ ๋ณด์„ธ์š”.ยทโœ๏ธ ๋Ÿฐ์นญ, ์„ฑ์žฅ, ์ˆ˜์ตํ™” ๋“ฑ ๋‹ค์–‘ํ•œ ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ํŒ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์–ด์š”.ยท๐Ÿ™Œ ๋‚˜๋งŒ์˜ ๋…ธํ•˜์šฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ๋‹ค๋ฅธ ๋ฉ”์ด์ปค๋“ค๊ณผ ์†Œํ†ตํ•ด๋ณด์„ธ์š”!ยท๐Ÿ’ก Tips ๊ฒŒ์‹œํŒ์ด ์˜คํ”ˆํ–ˆ์Šต๋‹ˆ๋‹ค! ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ ์ธ์‚ฌ์ดํŠธ๋ฅผ ๋‚˜๋ˆ ๋ณด์„ธ์š”.ยทโœ๏ธ ๋Ÿฐ์นญ, ์„ฑ์žฅ, ์ˆ˜์ตํ™” ๋“ฑ ๋‹ค์–‘ํ•œ ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ํŒ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์–ด์š”.ยท๐Ÿ™Œ ๋‚˜๋งŒ์˜ ๋…ธํ•˜์šฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ๋‹ค๋ฅธ ๋ฉ”์ด์ปค๋“ค๊ณผ ์†Œํ†ตํ•ด๋ณด์„ธ์š”!ยท
๐Ÿ”ง Developer Tools

Nuartz

A free, open-source Obsidian Publish alternative built on Next.js

syshin0116
syshin0116

@syshin0116

์Šคํฌ๋ฆฐ์ƒท

์†Œ๊ฐœ

<div align="center">

Nuartz

A free, open-source Obsidian Publish alternative built on Next.js.

npm version License: MIT

Documentation & Demo ยท Use Case ยท npm

Nuartz Homepage

</div>

Nuartz parses Obsidian-flavored markdown โ€” wikilinks, callouts, backlinks, tags, math, graph โ€” and gives you a polished site built with Next.js 15, shadcn/ui, and Tailwind CSS v4. Every component is swappable. It's just React.

Heavily inspired by Quartz. Quartz is an amazing project that pioneered Obsidian-to-website publishing, and Nuartz borrows many of its ideas โ€” the difference is the stack. Nuartz runs on Next.js + shadcn/ui, so you get the full React ecosystem, copy-paste UI components from ui.shadcn.com, and deploy anywhere Next.js runs.

Who is this for?

  • Obsidian users who want to publish their vault without giving up wikilinks, callouts, or graph view
  • Next.js developers who want a blog or digital garden inside their existing app, not a separate tool
  • Quartz users who love the concept but want more UI flexibility with React components and shadcn/ui

How it works

Nuartz has two layers:

LayerWhat it isHow to use it
nuartz (npm package)Headless data library โ€” markdown โ†’ HTML, file tree, wikilinks, backlinks, search indexbun add nuartz and wire into any Next.js app
apps/web (starter template)Complete Next.js 15 app with shadcn/ui, sidebar, graph view, search, dark modeClone the repo and deploy

Most people start with the starter template. If you want to embed a garden into an existing Next.js app, use the package directly.

Features

  • Obsidian syntax โ€” Wikilinks ([[page]], [[page|alias]], [[page#heading]]), callouts, inline tags, ==highlights==, %%comments%%
  • Graph view โ€” Interactive D3 force-directed graph, just like Obsidian
  • Full-text search โ€” Cmd+K powered by FlexSearch with CJK support
  • Backlinks & popover previews โ€” Navigate your vault like in Obsidian
  • Dark mode โ€” System-aware theme switching
  • Math & code โ€” KaTeX for equations, Shiki for syntax highlighting
  • SEO-ready โ€” Dynamic OG images, RSS feed, sitemap, dead link detection
  • Extras โ€” Table of contents, reader mode, Giscus comments, draft filtering

Quick Start

git clone https://github.com/syshin0116/nuartz
cd nuartz
bun install
bun dev

Put your Obsidian markdown files in apps/web/content/ and open http://localhost:3000.

Deploying

Nuartz supports two deployment modes. Pick the one that fits your needs:

GitHub Pages (free, static)

All pages are pre-built as static HTML at build time. No server needed.

  1. Go to your repo's Settings > Pages, set source to GitHub Actions
  2. Add push trigger to .github/workflows/deploy-pages.yml (it's manual-only by default)
  3. Push to main โ€” the workflow builds and deploys automatically

No next.config.ts changes needed. The workflow automatically enables static export during CI.

What works: search, graph view, popover previews (internal links), dark mode, tags, backlinks, RSS, sitemap โ€” everything that can be computed at build time.

What doesn't: dynamic OG images (per-page social cards), external link previews, Next.js image optimization. These features need a server.

Vercel (recommended, server-side)

Import the repo in Vercel with these overrides:

SettingValue
Root Directoryapps/web
Install Commandcd ../.. && bun install --frozen-lockfile
Build Commandcd ../.. && bun run build:pkg && cd apps/web && next build

Everything works, including dynamic OG images and external link previews. Free tier is generous enough for most personal sites.

See the full hosting guide for Netlify, Docker, and details on what each mode supports.

Using as a Package

bun add nuartz
import {
  renderMarkdown,      // string -> { html, frontmatter, toc, links, tags }
  buildBacklinkIndex,  // build slug -> backlinks map
  buildFileTree,       // flat file list -> nested tree
  buildSearchIndex,    // files -> search-ready entries
  defineConfig,        // typed config helper
} from "nuartz"

Stack

LayerTechnology
FrameworkNext.js 15 (App Router)
UIshadcn/ui + Radix UI
StylingTailwind CSS v4
Markdownunified / remark / rehype
GraphD3 force-directed
RuntimeBun

Acknowledgements

Nuartz stands on the shoulders of Quartz by @jackyzha0. The project's approach to Obsidian syntax parsing, graph visualization, and overall UX are directly inspired by Quartz. If you want a battle-tested solution that works out of the box, Quartz is an excellent choice โ€” Nuartz simply brings those ideas into the Next.js ecosystem for developers who want React-level customization.

Showcase

Using Nuartz? Open a PR to add your site here!

SiteDescription
syshin0116.vercel.app/blogPersonal blog and digital garden

License

MIT

๊ธฐ์ˆ  ์Šคํƒ

Next.jsObsidianVercel

์›” ์šด์˜ ๋น„์šฉ

๋ฌด๋ฃŒ ๐ŸŽ‰

  • โ†’Title์€ 30-60์ž๊ฐ€ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.
  • โ†’120-160์ž๋กœ ์ž‘์„ฑํ•˜์„ธ์š”.

์ถ”์ฒœ

์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ถ”์ฒœํ•œ ๊ณณ(1๊ฐœ)

๋ฉ”์ด์ปค ๋กœ๊ทธ

๋Œ“๊ธ€ 0๊ฐœ

๋Œ“๊ธ€์„ ์ž‘์„ฑํ•˜๋ ค๋ฉด ๋กœ๊ทธ์ธ ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋กœ๋”ฉ ์ค‘...
LoginSEOยทGEO CheckAbout