Quartz + GitHub Pages: Obsidian notlarını dijital bahçeye çevirme

Kanalda yakında Obsidian Publish kurulumu hakkında bir video çıkacak; şimdilik nasıl kurulacağına dair makaleyi okuyabilirsin:

Giriş: Notlardan dijital bahçeye

Obsidian’da yüzlerce nottan oluşan bir koleksiyonun olduğunu hayal et — aylar ya da yıllar boyunca biriken kişisel bilgi arşivin. Bu notlar birbirine bağlı, değerli içgörüler içeriyor ve yalnızca sana değil, başkalarına da fayda sağlayabilir.

Sorun, uygulamanda kilitli ve dünyaya kapalı olmaları. Quartz bu sorunu çözer; notlarını tam teşekküllü bir web sitesine — kendi dijital bahçene — dönüştürür.

Dijital bahçe nedir?

Dijital bahçe, geleneksel bir blogdan kökten farklı bir bilgi yayınlama konseptidir:

Blog, bitmiş makalelerden oluşan kronolojik bir akıştır
Dijital bahçe, fikir yetiştirmek için yaşayan bir alandır

Bir dijital bahçede notların şunlar olabilir:

🌱 Seedlings (fideler) — ham düşünceler, taslaklar
🌿 Budding (gelişen) — işlenme sürecindeki fikirler
🌳 Evergreen (olgun) — bitmiş notlar

Bu konsept, mükemmeliyetçilik baskısını kaldırır: bitmemiş düşünceleri yayınlayıp onları herkese açık geliştirebilirsin.

Quartz nedir ve neden alternatiflerinden iyi

Quartz, özellikle Markdown formatındaki notlarla çalışmak için yapılmış bir statik site oluşturucudur. Basitçe söylemek gerekirse: Quartz, Obsidian’dan dosyalarını alıp tüm bağlantılar, grafik ve aramayla güzel bir siteye dönüştürür.

Quartz’ın diğer çözümlere göre avantajları:

Kriter	Obsidian Publish	Notion Sites	Quartz
Maliyet	$10/ay	Ücretsiz	Ücretsiz
Wiki bağlantıları	✅	❌	✅
Bağlantı grafiği	✅	❌	✅
Tam kontrol	❌	❌	✅
Rusya’da çalışma	❌ (Cloudflare)	✅	✅
Hız	⚡⚡	⚡	⚡⚡⚡

Quartz’ın teknik avantajları:

✅ Obsidian ile tam uyumluluk — wiki bağlantıları, geri bağlantılar, callout’lar ✅ Statik oluşturma — site hızlı ve güvenilir çalışır ✅ GitHub Pages — global erişimli ücretsiz barındırma ✅ Sürümleme — tüm değişiklik geçmişi Git’te saklanır ✅ Bağımsızlık — verilerin yalnızca sana ait

Quartz Syncer nedir?

Quartz Syncer, Quartz’la çalışmanın tüm teknik tarafını otomatikleştiren bir Obsidian eklentisidir. Artık yayınlama, Obsidian Publish’teki kadar basit çalışır:

Obsidian’da bir not yazdın
Eklenti üzerinden yayınlamak için işaretledin
“Sync”e tıkladın
Site otomatik güncellendi

Quartz Syncer’ın yetenekleri:

🔄 GitHub deposuyla otomatik senkronizasyon 📝 Doğrudan Obsidian’dan yayınlama — Obsidian Publish’teki gibi 📁 Seçici yayınlama — belirli klasörleri seçebilirsin 🔌 Obsidian eklentileri desteği — Dataview, Templates ve diğerleri ⚡ Anında derleme — dinamik içeriği işler

Bu, Obsidian Publish’in kolaylığını fiilen geri kazandırır ama tam kontrol ve global erişimle!

Çalışmaya hazırlık

Gerekli araçlar

Başlamadan önce, şunların olduğundan emin ol:

Bir not koleksiyonuyla Obsidian
Bir GitHub hesabı (github.com’da ücretsiz oluştur)
Quartz Syncer eklentisi (Obsidian’da Community Plugins üzerinden kurulur)

İleri yöntem için isteğe bağlı araçlar:

GitHub Desktop (indir) — Git için grafiksel bir arayüz
Node.js (indir) — Quartz için çalışma ortamı

🟢 Basit yöntem: GitHub web arayüzü üzerinden

Şunlar için uygun: ek program kurmadan Quartz’ı denemek isteyenler Kurulum süresi: 30-45 dakika Zorluk seviyesi: bir sosyal medya hesabı oluşturmak gibi

Adım 1: Bir GitHub deposu oluşturma

Tarayıcıda Quartz şablonunu aç
Yeşil “Use this template” düğmesine tıkla → “Create a new repository”
Depoyu yapılandır:
- Repository name: my-digital-garden (ya da başka bir ad)
- Description: Obsidian tabanlı dijital bahçem
- Visibility: Public (ücretsiz GitHub Pages için zorunlu)
“Create repository”e tıkla

Adım 2: GitHub Pages’i etkinleştirme

Deponun Settings’ine git
Sol menüde Pages bölümünü bul
Source: GitHub Actions seç (Deploy from a branch değil!)
Ayarları kaydet

GitHub site oluşturma sürecini otomatik başlatır. 5-10 dakika sonra siten şu adreste erişilebilir olur: https://username.github.io/repository-name

Adım 3: Obsidian’da Quartz Syncer’ı kurma

Obsidian → Settings → Community Plugins’i aç
“Quartz Syncer”ı bul ve kur
Kurulu listede eklentiyi etkinleştir

Adım 4: Quartz Syncer’ı yapılandırma

Quartz Syncer eklenti ayarlarını aç
“Connect to GitHub” seç
Bir GitHub token oluşturma talimatlarını izle:
- GitHub → Settings → Developer settings → Personal access tokens’a git
- Deponuza yetkili yeni bir token oluştur
- Token’ı eklenti ayarlarına kopyala
Listeden deponuzu seç
Senkronizasyon için klasörleri yapılandır

Adım 5: İlk yayınlama

Test için 2-3 not seç
Kaliteli içerik ve doğru bağlantılar içerdiklerinden emin ol
Quartz Syncer eklentisinde “Sync” düğmesine tıkla
Senkronizasyonun bitmesini bekle (1-2 dakika)
5-10 dakika sonra siteyi kontrol et

Basit yöntemin avantajları:

✅ Ek program kurmayı gerektirmez ✅ Tüm ayarlar web arayüzü üzerinden ✅ Hızlı test için uygun ✅ Minimal giriş engeli

Basit yöntemin sınırlamaları:

❌ Sınırlı tasarım özelleştirme olanakları ❌ Kendi stil ve betiklerini eklemek daha zor ❌ Çevrimdışı çalışmak için yerel kopya yok

🟡 İleri yöntem: GitHub Desktop üzerinden

Şunlar için uygun: maksimum kontrol ve esneklik isteyenler Kurulum süresi: 1-2 saat Zorluk seviyesi: Photoshop gibi yeni bir program öğrenmek gibi

Adım 1: Gerekli araçları kurma

1.1 GitHub Desktop

GitHub Desktop’u indir
Kur ve GitHub hesabına giriş yap
Temel arayüzü incele (5 dakika)

1.2 Node.js

Node.js LTS sürümünü indir
Varsayılan ayarlarla kur
Kurulumu komut satırından kontrol et:
```
node --version
npm --version
```

Adım 2: Yerel projeyi kurma

2.1 Quartz’ı klonlama

GitHub Desktop’ı aç
File → Clone repository → URL’e tıkla
https://github.com/jackyzha0/quartz.git’i yapıştır
Bilgisayarda proje için bir klasör seç
Clone’a tıkla

2.2 Kendi deponu oluşturma

GitHub’da yeni bir depo oluştur (basit yöntemdeki gibi)
GitHub Desktop’ta Repository → Repository settings’e tıkla
Remote URL’yi yeni deponla değiştir
Değişiklikleri yayınla: Repository → Push origin

Adım 3: Temel Quartz kurulumu

3.1 Bağımlılıkları kurma

Komut satırını aç (Terminal/Command Prompt)
Proje klasörüne git:
```
cd quartz/yolun
```
Bağımlılıkları kur:
```
npm install
```

3.2 Yapılandırmayı ayarlama

quartz.config.ts dosyasını herhangi bir metin editöründe aç

Ana parametreleri değiştir:

const config: QuartzConfig = {  configuration: {    pageTitle: "Dijital bahçem",    enableSPA: true,    enablePopovers: true,    analytics: {      provider: "plausible", // ya da "google"    },    locale: "tr-TR",    baseUrl: "https://username.github.io/repository-name",    ignorePatterns: [      "private",      "templates",       ".obsidian",      "drafts"    ],  },}

Adım 4: Otomatik yayınlamayı ayarlama

4.1 GitHub Actions

Quartz, .github/workflows/deploy.yml dosyasında hazır bir yapılandırmayla gelir. Otomatik olarak:

Her push’ta siteyi oluşturur
GitHub Pages üzerinden yayınlar
Siteyi 5-10 dakika içinde günceller

4.2 GitHub Pages’i açma

GitHub’da deponun Settings’ine git
Pages bölümünü bul
Source: GitHub Actions seç
Ayarları kaydet

Adım 5: Quartz Syncer ile Obsidian entegrasyonu

5.1 Eklentiyi yapılandırma

Obsidian’da Quartz Syncer’ı kur
Eklenti ayarlarında “Local repository”yi seç
Yerel Quartz klasörünün yolunu belirt
Senkronizasyon için klasörleri yapılandır

5.2 Yayınlama iş akışı

Artık yayınlama süreci şöyle görünür:

Obsidian’da bir not yazarsın
Quartz Syncer ile senkronize edersin
Eklenti dosyaları otomatik olarak content klasörüne kopyalar
GitHub Desktop değişiklikleri gösterir
GitHub Desktop üzerinden commit ve push yaparsın
GitHub Actions siteyi otomatik günceller

İleri yöntemin avantajları:

✅ Tasarım ve işlevsellik üzerinde tam kontrol ✅ Yerel geliştirme — değişiklikleri çevrimdışı test edebilirsin ✅ Özelleştirme — kendi stilleri, betikleri, eklentileri ekleme ✅ Performans — ihtiyaçlarına göre optimizasyon ✅ Yedekler — tüm dosyaların yerel kopyası

Olası zorluklar:

❌ Ek program kurmayı gerektirir ❌ Öğrenilecek daha çok teknik ayrıntı ❌ Basit görevler için fazla olabilir

Siteyi özelleştirme ve optimize etme

Görünümü yapılandırma

quartz.config.ts’teki temel ayarlar

theme: {
  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)",
    },
  },
},

Özel stiller oluşturma

quartz/styles/custom.scss dosyasını oluştur

Kendi stillerini ekle:

// Yazı tipi ayarlarıbody {  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;}// Başlık stillerih1, h2, h3 {  color: var(--dark);  font-weight: 600;}// Özel callout'lar.callout[data-callout="tip"] {  border-color: #00d4aa;  background-color: rgba(0, 212, 170, 0.1);}

Bileşenleri yapılandırma

quartz.layout.ts’teki sayfa yapısı

export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
    Component.Breadcrumbs(),
    Component.ArticleTitle(),
    Component.ContentMeta(),
    Component.TagList(),
  ],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Search(),
    Component.Darkmode(),
    Component.DesktopOnly(Component.Explorer()),
  ],
  right: [
    Component.DesktopOnly(Component.TableOfContents()),
    Component.Backlinks(),
  ],
}

SEO optimizasyonu

Notlar için meta veriler

Notların başına YAML frontmatter ekle:

---
title: "Makalenin tam başlığı"
description: "Arama motorları için kısa bir açıklama"
tags: ["obsidian", "productivity", "pkm"]
date: 2024-01-15
draft: false
---

Analitik ayarlama

quartz.config.ts’te:

analytics: {
  provider: "google",
  tagId: "G-XXXXXXXXXX", // senin Google Analytics ID'n
},

Dijital bahçe için en iyi uygulamalar

1. İçeriği yapılandırma

Önerilen klasör yapısı:

content/
├── index.md                 # Ana sayfa
├── about.md                 # Hakkımda
├── now.md                   # Şu an ne yapıyorum
├── notes/                   # Ana notlar
│   ├── productivity/        # Konu: üretkenlik
│   ├── learning/           # Konu: öğrenme
│   └── tools/              # Konu: araçlar
├── projects/               # Projeler
├── resources/              # Faydalı kaynaklar
└── garden/                 # Büyüyen fikirler
    ├── seedlings/          # Fikir fideleri
    ├── saplings/          # Gelişen düşünceler
    └── evergreens/        # Olgun notlar

Gezinme merkezleri (MOC) oluşturma

# 🧠 Üretkenlik ve bilgi yönetimi
 
Bu, üretkenlik konusundaki gezinme merkezim.
 
## 🌱 Gelişen fikirler
- [[Zettelkasten yöntemi]]
- [[İkinci beyinler]]
- [[Dijital minimalizm]]
 
## 🌳 Olgun kavramlar  
- [[PARA Method]]
- [[Getting Things Done]]
- [[Bilgiyle etkili çalışma ilkeleri]]
 
## 🛠 Araçlar
- [[Obsidian setup]]
- [[Notion vs Obsidian]]
- [[Yayınlama için Quartz]]

2. Etiket ve bağlantı sistemi

Etkili etiketler:

#seedling — yeni, ham fikirler için
#developing — geliştirme aşamasındaki fikirler için
#evergreen — bitmiş notlar için
#public — yayınlanmaya hazır notlar için
#private — kişisel notlar için (senkronizasyondan hariç tut)

Bağlantı oluşturma:

Bir bilgi ağı oluşturmak için wiki bağlantıları kullan [[Not başlığı]]
Bağlam ekle [[Not|tartışma bağlamında]]
Bölümlere bağlantı ver [[Not#belirli-bir-bölüm|Belirli bir bölüm]]

3. Yayınlama iş akışı

Haftalık güncelleme ritüeli:

Pazartesi: Haftanın yeni notlarını gözden geçir
Çarşamba: 2-3 fide notu geliştir
Cuma: Quartz Syncer ile güncellemeleri yayınla
Pazar: İstatistikleri analiz et ve planla

Bir notu geliştirme süreci:

🌱 Seedling → 🌿 Sapling → 🌳 Evergreen
     ↓            ↓           ↓
Ham fikir → Yapılandırma → Yayınlama
(özel)       (bağlantı,       (açık
              örnek ekleme)    erişim)

4. Kitleyle etkileşim

İletişim bilgisi ekleme

content/contact.md dosyasını oluştur:

# Benimle iletişime geç
 
Bu notlar faydalı olduysa ya da sorun varsa:
 
- 📧 Email: your@email.com  
- 💬 Telegram: @username
- 🐦 Twitter: @username
- 💼 LinkedIn: /in/username
 
## Geri bildirim memnuniyetle karşılanır!
 
Bu dijital bahçe etkileşim sayesinde büyüyor. 
Düşüncelerini ve fikirlerini paylaşmaktan çekinme.

Elton Labs

Quartz + GitHub Pages: Obsidian notlarını dijital bahçeye çevirme

Giriş: Notlardan dijital bahçeye

Dijital bahçe nedir?

Quartz nedir ve neden alternatiflerinden iyi

Quartz’ın diğer çözümlere göre avantajları:

Quartz’ın teknik avantajları:

Quartz Syncer nedir?

Quartz Syncer’ın yetenekleri:

Çalışmaya hazırlık

Gerekli araçlar

İleri yöntem için isteğe bağlı araçlar:

🟢 Basit yöntem: GitHub web arayüzü üzerinden

Adım 1: Bir GitHub deposu oluşturma

Adım 2: GitHub Pages’i etkinleştirme

Adım 3: Obsidian’da Quartz Syncer’ı kurma

Adım 4: Quartz Syncer’ı yapılandırma

Adım 5: İlk yayınlama

Basit yöntemin avantajları:

Basit yöntemin sınırlamaları:

🟡 İleri yöntem: GitHub Desktop üzerinden

Adım 1: Gerekli araçları kurma

1.1 GitHub Desktop

1.2 Node.js

Adım 2: Yerel projeyi kurma

2.1 Quartz’ı klonlama

2.2 Kendi deponu oluşturma

Adım 3: Temel Quartz kurulumu

3.1 Bağımlılıkları kurma

3.2 Yapılandırmayı ayarlama

Adım 4: Otomatik yayınlamayı ayarlama

4.1 GitHub Actions

4.2 GitHub Pages’i açma

Adım 5: Quartz Syncer ile Obsidian entegrasyonu

5.1 Eklentiyi yapılandırma

5.2 Yayınlama iş akışı

İleri yöntemin avantajları:

Olası zorluklar:

Siteyi özelleştirme ve optimize etme

Görünümü yapılandırma

quartz.config.ts’teki temel ayarlar

Özel stiller oluşturma

Bileşenleri yapılandırma

quartz.layout.ts’teki sayfa yapısı

SEO optimizasyonu

Notlar için meta veriler

Analitik ayarlama

Dijital bahçe için en iyi uygulamalar

1. İçeriği yapılandırma

Önerilen klasör yapısı:

Gezinme merkezleri (MOC) oluşturma

2. Etiket ve bağlantı sistemi

Etkili etiketler:

Bağlantı oluşturma:

3. Yayınlama iş akışı

Haftalık güncelleme ritüeli:

Bir notu geliştirme süreci:

4. Kitleyle etkileşim

İletişim bilgisi ekleme