Quartz + GitHub Pages: Превращаем заметки Obsidian в цифровой сад

На канале выйдет скоро видео про настройку Obsidian Publish, пока можете прочитать статью о том, как настроить его:

Введение: От заметок к цифровому саду

Представьте, что у вас есть коллекция из сотен заметок в Obsidian — ваш личный архив знаний, который накапливался месяцами или годами. Эти заметки связаны между собой, содержат ценные инсайты и могли бы принести пользу не только вам, но и другим людям.

Проблема в том, что они заперты в вашем приложении и недоступны миру. Quartz решает эту проблему, превращая ваши заметки в полноценный веб-сайт — ваш собственный цифровой сад.

Что такое цифровой сад?

Цифровой сад — это концепция публикации знаний, которая кардинально отличается от традиционного блога:

Блог — это хронологическая лента завершенных статей
Цифровой сад — это живое пространство для выращивания идей

В цифровом саду ваши заметки могут быть:

🌱 Seedlings (зародыши) — сырые мысли, черновики
🌿 Budding (развивающиеся) — идеи в процессе проработки
🌳 Evergreen (зрелые) — завершенные заметки

Эта концепция снимает давление перфекционизма: можно публиковать незавершенные мысли и дорабатывать их публично.

Что такое Quartz и почему он лучше альтернатив

Quartz — это генератор статических сайтов, специально созданный для работы с заметками в формате Markdown. Если объяснять простыми словами: Quartz берет ваши файлы из Obsidian и превращает их в красивый сайт со всеми связями, графом и поиском.

Преимущества Quartz перед другими решениями:

Критерий	Obsidian Publish	Notion Sites	Quartz
Стоимость	$10/месяц	Бесплатно	Бесплатно
Викиссылки	✅	❌	✅
Граф связей	✅	❌	✅
Полный контроль	❌	❌	✅
Работа в России	❌ (Cloudflare)	✅	✅
Скорость	⚡⚡	⚡	⚡⚡⚡

Технические преимущества Quartz:

✅ Полная совместимость с Obsidian — викиссылки, обратные ссылки, каллауты
✅ Статическая генерация — сайт работает быстро и надежно
✅ GitHub Pages — бесплатный хостинг с глобальной доступностью
✅ Версионирование — вся история изменений сохраняется в Git
✅ Независимость — ваши данные принадлежат только вам

Что такое Quartz Syncer?

Quartz Syncer — это плагин для Obsidian, который автоматизирует всю техническую часть работы с Quartz. Теперь публикация работает так же просто, как в Obsidian Publish:

Написали заметку в Obsidian
Пометили для публикации через плагин
Нажали “Sync”
Сайт автоматически обновился

Возможности Quartz Syncer:

🔄 Автоматическая синхронизация с GitHub репозиторием
📝 Публикация прямо из Obsidian — как в Obsidian Publish
📁 Выборочная публикация — можете выбрать конкретные папки
🔌 Поддержка плагинов Obsidian — Dataview, Templates и другие
⚡ Компиляция на лету — обрабатывает динамический контент

Это фактически восстанавливает удобство Obsidian Publish, но с полным контролем и глобальной доступностью!

Подготовка к работе

Необходимые инструменты

Прежде чем начать, убедитесь, что у вас есть:

Obsidian с коллекцией заметок
Аккаунт GitHub (создать бесплатно на github.com)
Плагин Quartz Syncer (устанавливается через Community Plugins в Obsidian)

Опциональные инструменты для продвинутого способа:

GitHub Desktop (скачать) — графический интерфейс для Git
Node.js (скачать) — среда выполнения для Quartz

🟢 Простой способ: Через веб-интерфейс GitHub

Подходит для: Тех, кто хочет попробовать Quartz без установки дополнительных программ
Время настройки: 30-45 минут
Уровень сложности: Как создать аккаунт в социальной сети

Шаг 1: Создание GitHub репозитория

Откройте шаблон Quartz в браузере
Нажмите зеленую кнопку “Use this template” → “Create a new repository”
Настройте репозиторий:
- Repository name: my-digital-garden (или любое другое имя)
- Description: Мой цифровой сад на базе Obsidian
- Visibility: Public (обязательно для бесплатного GitHub Pages)
Нажмите “Create repository”

Шаг 2: Активация GitHub Pages

Перейдите в Settings вашего репозитория
Найдите раздел Pages в левом меню
Выберите Source: GitHub Actions (не Deploy from a branch!)
Сохраните настройки

GitHub автоматически начнет процесс сборки сайта. Через 5-10 минут ваш сайт будет доступен по адресу: https://username.github.io/repository-name

Шаг 3: Установка Quartz Syncer в Obsidian

Откройте Obsidian → Settings → Community Plugins
Найдите и установите “Quartz Syncer”
Активируйте плагин в списке установленных

Шаг 4: Настройка Quartz Syncer

Откройте настройки плагина Quartz Syncer
Выберите “Connect to GitHub”
Следуйте инструкциям для создания GitHub токена:
- Перейдите на GitHub → Settings → Developer settings → Personal access tokens
- Создайте новый токен с правами на ваш репозиторий
- Скопируйте токен в настройки плагина
Выберите ваш репозиторий из списка
Настройте папки для синхронизации

Шаг 5: Первая публикация

Выберите 2-3 заметки для тестирования
Убедитесь, что они содержат качественный контент и корректные ссылки
Нажмите кнопку “Sync” в плагине Quartz Syncer
Дождитесь завершения синхронизации (1-2 минуты)
Проверьте сайт через 5-10 минут

Преимущества простого способа:

✅ Не требует установки дополнительных программ
✅ Все настройки через веб-интерфейс
✅ Подходит для быстрого тестирования
✅ Минимальный порог входа

Ограничения простого способа:

❌ Ограниченные возможности кастомизации дизайна
❌ Сложнее добавлять собственные стили и скрипты
❌ Нет локальной копии для работы оффлайн

🟡 Продвинутый способ: Через GitHub Desktop

Подходит для: Тех, кто хочет максимальный контроль и гибкость
Время настройки: 1-2 часа
Уровень сложности: Как освоить новую программу типа Photoshop

Шаг 1: Установка необходимых инструментов

1.1 GitHub Desktop

Скачайте GitHub Desktop
Установите и войдите в свой GitHub аккаунт
Изучите базовый интерфейс (5 минут)

1.2 Node.js

Скачайте Node.js LTS версию
Установите с настройками по умолчанию
Проверьте установку через командную строку:
```
node --versionnpm --version
```

Шаг 2: Настройка локального проекта

2.1 Клонирование Quartz

Откройте GitHub Desktop
Нажмите File → Clone repository → URL
Вставьте https://github.com/jackyzha0/quartz.git
Выберите папку для проекта на компьютере
Нажмите Clone

2.2 Создание собственного репозитория

Создайте новый репозиторий на GitHub (как в простом способе)
В GitHub Desktop нажмите Repository → Repository settings
Измените Remote URL на ваш новый репозиторий
Опубликуйте изменения: Repository → Push origin

Шаг 3: Базовая настройка Quartz

3.1 Установка зависимостей

Откройте командную строку (Terminal/Command Prompt)
Перейдите в папку проекта:
```
cd путь/к/вашему/quartz
```
Установите зависимости:
```
npm install
```

3.2 Настройка конфигурации

Откройте файл quartz.config.ts в любом текстовом редакторе

Измените основные параметры:

const config: QuartzConfig = {  configuration: {    pageTitle: "Мой цифровой сад",    enableSPA: true,    enablePopovers: true,    analytics: {      provider: "plausible", // или "google"    },    locale: "ru-RU",    baseUrl: "https://username.github.io/repository-name",    ignorePatterns: [      "private",      "templates",       ".obsidian",      "drafts"    ],  },}

Шаг 4: Настройка автоматической публикации

4.1 GitHub Actions

Quartz поставляется с готовой конфигурацией в файле .github/workflows/deploy.yml. Она автоматически:

Собирает сайт при каждом push
Публикует через GitHub Pages
Обновляет сайт в течение 5-10 минут

4.2 Включение GitHub Pages

Перейдите в Settings репозитория на GitHub
Найдите раздел Pages
Выберите Source: GitHub Actions
Сохраните настройки

Шаг 5: Интеграция с Obsidian через Quartz Syncer

5.1 Настройка плагина

Установите Quartz Syncer в Obsidian
В настройках плагина выберите “Local repository”
Укажите путь к локальной папке Quartz
Настройте папки для синхронизации

5.2 Workflow публикации

Теперь процесс публикации выглядит так:

Пишете заметку в Obsidian
Синхронизируете через Quartz Syncer
Плагин автоматически копирует файлы в папку content
GitHub Desktop показывает изменения
Делаете commit и push через GitHub Desktop
GitHub Actions автоматически обновляет сайт

Преимущества продвинутого способа:

✅ Полный контроль над дизайном и функциональностью
✅ Локальная разработка — можете тестировать изменения оффлайн
✅ Кастомизация — добавление собственных стилей, скриптов, плагинов
✅ Производительность — оптимизация под ваши нужды
✅ Резервные копии — локальная копия всех файлов

Возможные сложности:

❌ Требует установки дополнительных программ
❌ Больше технических деталей для изучения
❌ Может быть избыточным для простых задач

Кастомизация и оптимизация сайта

Настройка внешнего вида

Базовые настройки в quartz.config.ts

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

Создание кастомных стилей

Создайте файл quartz/styles/custom.scss

Добавьте собственные стили:

// Настройка шрифтовbody {  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;}// Стили для заголовковh1, h2, h3 {  color: var(--dark);  font-weight: 600;}// Кастомные каллауты.callout[data-callout="tip"] {  border-color: #00d4aa;  background-color: rgba(0, 212, 170, 0.1);}

Настройка компонентов

Структура страницы в quartz.layout.ts

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 оптимизация

Метаданные для заметок

Добавляйте YAML frontmatter в начало заметок:

---
title: "Полное название статьи"
description: "Краткое описание для поисковых систем"
tags: ["obsidian", "productivity", "pkm"]
date: 2024-01-15
draft: false
---

Настройка аналитики

В quartz.config.ts:

analytics: {
  provider: "google",
  tagId: "G-XXXXXXXXXX", // ваш Google Analytics ID
},

Лучшие практики для цифрового сада

1. Структурирование контента

Создание навигационных центров (MOC)

# 🧠 Продуктивность и управление знаниями
 
Это мой навигационный центр по теме продуктивности.
 
## 🌱 Развивающиеся идеи
- [[Метод Zettelkasten]]
- [[Вторые мозги]]
- [[Цифровая минималистичность]]
 
## 🌳 Зрелые концепции  
- [[PARA Method]]
- [[Getting Things Done]]
- [[Принципы эффективной работы с информацией]]
 
## 🛠 Инструменты
- [[Obsidian setup]]
- [[Notion vs Obsidian]]
- [[Quartz для публикации]]

2. Система тегов и связей

Эффективные теги:

#seedling — для новых, сырых идей
#developing — для идей в разработке
#evergreen — для завершенных заметок
#public — для заметок, готовых к публикации
#private — для личных заметок (исключить из синхронизации)

Создание связей:

Используйте викиссылки [[Название заметки]] для создания сети знаний
Добавляйте контекст [[Заметка|в контексте обсуждения]]
Ссылайтесь на секции [[Заметка#конкретный-раздел|Конкретный раздел]]

3. Workflow публикации

Еженедельный ритуал обновления:

Понедельник: Просмотр новых заметок за неделю
Среда: Развитие 2-3 заметок-seedlings
Пятница: Публикация обновлений через Quartz Syncer
Воскресенье: Анализ статистики и планирование

Процесс развития заметки:

🌱 Seedling → 🌿 Sapling → 🌳 Evergreen
     ↓            ↓           ↓
Сырая идея → Структурирование → Публикация
(приватно)    (добавление      (открытый
              ссылок,          доступ)
              примеров)

4. Взаимодействие с аудиторией

Добавление контактной информации

Создайте файл content/contact.md:

# Связаться со мной
 
Если эти заметки оказались полезными или у вас есть вопросы:
 
- 📧 Email: your@email.com  
- 💬 Telegram: @username
- 🐦 Twitter: @username
- 💼 LinkedIn: /in/username
 
## Обратная связь приветствуется!
 
Этот цифровой сад растет благодаря взаимодействию. 
Не стесняйтесь делиться своими мыслями и идеями.

Elton Labs

Quartz + GitHub Pages: Превращаем заметки Obsidian в цифровой сад

Введение: От заметок к цифровому саду

Что такое цифровой сад?

Что такое Quartz и почему он лучше альтернатив

Преимущества Quartz перед другими решениями:

Технические преимущества Quartz:

Что такое Quartz Syncer?

Возможности Quartz Syncer:

Подготовка к работе

Необходимые инструменты

Опциональные инструменты для продвинутого способа:

🟢 Простой способ: Через веб-интерфейс GitHub

Шаг 1: Создание GitHub репозитория

Шаг 2: Активация GitHub Pages

Шаг 3: Установка Quartz Syncer в Obsidian

Шаг 4: Настройка Quartz Syncer

Шаг 5: Первая публикация

Преимущества простого способа:

Ограничения простого способа:

🟡 Продвинутый способ: Через GitHub Desktop

Шаг 1: Установка необходимых инструментов

1.1 GitHub Desktop

1.2 Node.js

Шаг 2: Настройка локального проекта

2.1 Клонирование Quartz

2.2 Создание собственного репозитория

Шаг 3: Базовая настройка Quartz

3.1 Установка зависимостей

3.2 Настройка конфигурации

Шаг 4: Настройка автоматической публикации

4.1 GitHub Actions

4.2 Включение GitHub Pages

Шаг 5: Интеграция с Obsidian через Quartz Syncer

5.1 Настройка плагина

5.2 Workflow публикации

Преимущества продвинутого способа:

Возможные сложности:

Кастомизация и оптимизация сайта

Настройка внешнего вида

Базовые настройки в quartz.config.ts

Создание кастомных стилей

Настройка компонентов

Структура страницы в quartz.layout.ts

SEO оптимизация

Метаданные для заметок

Настройка аналитики

Лучшие практики для цифрового сада

1. Структурирование контента

Рекомендуемая структура папок:

Создание навигационных центров (MOC)

2. Система тегов и связей

Эффективные теги:

Создание связей:

3. Workflow публикации

Еженедельный ритуал обновления:

Процесс развития заметки:

4. Взаимодействие с аудиторией

Добавление контактной информации