>[!danger] На канале выйдет скоро видео про настройку Obsidian Publish, пока можете прочитать статью о том, как настроить его: # Quartz + GitHub Pages: Превращаем заметки Obsidian в цифровой сад ![[EX15.jpg]] ## Введение: От заметок к цифровому саду Представьте, что у вас есть коллекция из сотен заметок в 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: 1. **Написали заметку** в Obsidian 2. **Пометили для публикации** через плагин 3. **Нажали "Sync"** 4. **Сайт автоматически обновился** ### Возможности Quartz Syncer: 🔄 **Автоматическая синхронизация** с GitHub репозиторием 📝 **Публикация прямо из Obsidian** — как в Obsidian Publish 📁 **Выборочная публикация** — можете выбрать конкретные папки 🔌 **Поддержка плагинов Obsidian** — Dataview, Templates и другие ⚡ **Компиляция на лету** — обрабатывает динамический контент Это фактически восстанавливает удобство Obsidian Publish, но с полным контролем и глобальной доступностью! ## Подготовка к работе ### Необходимые инструменты Прежде чем начать, убедитесь, что у вас есть: 1. **Obsidian** с коллекцией заметок 2. **Аккаунт GitHub** (создать бесплатно на [github.com](https://github.com/)) 3. **Плагин Quartz Syncer** (устанавливается через Community Plugins в Obsidian) ### Опциональные инструменты для продвинутого способа: 4. **GitHub Desktop** ([скачать](https://desktop.github.com/)) — графический интерфейс для Git 5. **Node.js** ([скачать](https://nodejs.org/)) — среда выполнения для Quartz ## 🟢 Простой способ: Через веб-интерфейс GitHub **Подходит для:** Тех, кто хочет попробовать Quartz без установки дополнительных программ **Время настройки:** 30-45 минут **Уровень сложности:** Как создать аккаунт в социальной сети ### Шаг 1: Создание GitHub репозитория 1. **Откройте** [шаблон Quartz](https://github.com/jackyzha0/quartz) в браузере 2. **Нажмите** зеленую кнопку **"Use this template"** → **"Create a new repository"** 3. **Настройте** репозиторий: - Repository name: `my-digital-garden` (или любое другое имя) - Description: `Мой цифровой сад на базе Obsidian` - Visibility: **Public** (обязательно для бесплатного GitHub Pages) 4. **Нажмите** **"Create repository"** ### Шаг 2: Активация GitHub Pages 1. **Перейдите** в Settings вашего репозитория 2. **Найдите** раздел **Pages** в левом меню 3. **Выберите** Source: **GitHub Actions** (не Deploy from a branch!) 4. **Сохраните** настройки GitHub автоматически начнет процесс сборки сайта. Через 5-10 минут ваш сайт будет доступен по адресу: `https://username.github.io/repository-name` ### Шаг 3: Установка Quartz Syncer в Obsidian 1. **Откройте** Obsidian → Settings → Community Plugins 2. **Найдите** и установите **"Quartz Syncer"** 3. **Активируйте** плагин в списке установленных ### Шаг 4: Настройка Quartz Syncer 1. **Откройте** настройки плагина Quartz Syncer 2. **Выберите** "Connect to GitHub" 3. **Следуйте** инструкциям для создания GitHub токена: - Перейдите на GitHub → Settings → Developer settings → Personal access tokens - Создайте новый токен с правами на ваш репозиторий - Скопируйте токен в настройки плагина 4. **Выберите** ваш репозиторий из списка 5. **Настройте** папки для синхронизации ### Шаг 5: Первая публикация 1. **Выберите** 2-3 заметки для тестирования 2. **Убедитесь**, что они содержат качественный контент и корректные ссылки 3. **Нажмите** кнопку **"Sync"** в плагине Quartz Syncer 4. **Дождитесь** завершения синхронизации (1-2 минуты) 5. **Проверьте** сайт через 5-10 минут ### Преимущества простого способа: ✅ Не требует установки дополнительных программ ✅ Все настройки через веб-интерфейс ✅ Подходит для быстрого тестирования ✅ Минимальный порог входа ### Ограничения простого способа: ❌ Ограниченные возможности кастомизации дизайна ❌ Сложнее добавлять собственные стили и скрипты ❌ Нет локальной копии для работы оффлайн ## 🟡 Продвинутый способ: Через GitHub Desktop **Подходит для:** Тех, кто хочет максимальный контроль и гибкость **Время настройки:** 1-2 часа **Уровень сложности:** Как освоить новую программу типа Photoshop ### Шаг 1: Установка необходимых инструментов #### 1.1 GitHub Desktop 1. **Скачайте** [GitHub Desktop](https://desktop.github.com/) 2. **Установите** и войдите в свой GitHub аккаунт 3. **Изучите** базовый интерфейс (5 минут) #### 1.2 Node.js 1. **Скачайте** [Node.js LTS версию](https://nodejs.org/) 2. **Установите** с настройками по умолчанию 3. **Проверьте** установку через командную строку: ```bash node --versionnpm --version ``` ### Шаг 2: Настройка локального проекта #### 2.1 Клонирование Quartz 1. **Откройте** GitHub Desktop 2. **Нажмите** File → Clone repository → URL 3. **Вставьте** `https://github.com/jackyzha0/quartz.git` 4. **Выберите** папку для проекта на компьютере 5. **Нажмите** Clone #### 2.2 Создание собственного репозитория 1. **Создайте** новый репозиторий на GitHub (как в простом способе) 2. **В GitHub Desktop** нажмите Repository → Repository settings 3. **Измените** Remote URL на ваш новый репозиторий 4. **Опубликуйте** изменения: Repository → Push origin ### Шаг 3: Базовая настройка Quartz #### 3.1 Установка зависимостей 1. **Откройте** командную строку (Terminal/Command Prompt) 2. **Перейдите** в папку проекта: ```bash cd путь/к/вашему/quartz ``` 3. **Установите** зависимости: ```bash npm install ``` #### 3.2 Настройка конфигурации 1. **Откройте** файл `quartz.config.ts` в любом текстовом редакторе 2. **Измените** основные параметры: ```typescript 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 1. **Перейдите** в Settings репозитория на GitHub 2. **Найдите** раздел Pages 3. **Выберите** Source: **GitHub Actions** 4. **Сохраните** настройки ### Шаг 5: Интеграция с Obsidian через Quartz Syncer #### 5.1 Настройка плагина 1. **Установите** Quartz Syncer в Obsidian 2. **В настройках** плагина выберите **"Local repository"** 3. **Укажите** путь к локальной папке Quartz 4. **Настройте** папки для синхронизации #### 5.2 Workflow публикации Теперь процесс публикации выглядит так: 1. **Пишете** заметку в Obsidian 2. **Синхронизируете** через Quartz Syncer 3. **Плагин** автоматически копирует файлы в папку `content` 4. **GitHub Desktop** показывает изменения 5. **Делаете** commit и push через GitHub Desktop 6. **GitHub Actions** автоматически обновляет сайт ### Преимущества продвинутого способа: ✅ **Полный контроль** над дизайном и функциональностью ✅ **Локальная разработка** — можете тестировать изменения оффлайн ✅ **Кастомизация** — добавление собственных стилей, скриптов, плагинов ✅ **Производительность** — оптимизация под ваши нужды ✅ **Резервные копии** — локальная копия всех файлов ### Возможные сложности: ❌ Требует установки дополнительных программ ❌ Больше технических деталей для изучения ❌ Может быть избыточным для простых задач ## Кастомизация и оптимизация сайта ### Настройка внешнего вида #### Базовые настройки в quartz.config.ts ```typescript 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)", }, }, }, ``` #### Создание кастомных стилей 1. **Создайте** файл `quartz/styles/custom.scss` 2. **Добавьте** собственные стили: ```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 ```typescript 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 в начало заметок: ```yaml --- title: "Полное название статьи" description: "Краткое описание для поисковых систем" tags: ["obsidian", "productivity", "pkm"] date: 2024-01-15 draft: false --- ``` #### Настройка аналитики В `quartz.config.ts`: ```typescript analytics: { provider: "google", tagId: "G-XXXXXXXXXX", // ваш Google Analytics ID }, ``` ## Лучшие практики для цифрового сада ### 1. Структурирование контента #### Рекомендуемая структура папок: ``` content/ ├── index.md # Главная страница ├── about.md # О себе ├── now.md # Чем занимаюсь сейчас ├── notes/ # Основные заметки │ ├── productivity/ # Тема: продуктивность │ ├── learning/ # Тема: обучение │ └── tools/ # Тема: инструменты ├── projects/ # Проекты ├── resources/ # Полезные ресурсы └── garden/ # Растущие идеи ├── seedlings/ # Зародыши идей ├── saplings/ # Развивающиеся мысли └── evergreens/ # Зрелые заметки ``` #### Создание навигационных центров (MOC) ```markdown # 🧠 Продуктивность и управление знаниями Это мой навигационный центр по теме продуктивности. ## 🌱 Развивающиеся идеи - [[Метод Zettelkasten]] - [[Вторые мозги]] - [[Цифровая минималистичность]] ## 🌳 Зрелые концепции - [[PARA Method]] - [[Getting Things Done]] - [[Принципы эффективной работы с информацией]] ## 🛠 Инструменты - [[Obsidian setup]] - [[Notion vs Obsidian]] - [[Quartz для публикации]] ``` ### 2. Система тегов и связей #### Эффективные теги: - `#seedling` — для новых, сырых идей - `#developing` — для идей в разработке - `#evergreen` — для завершенных заметок - `#public` — для заметок, готовых к публикации - `#private` — для личных заметок (исключить из синхронизации) #### Создание связей: - **Используйте викиссылки** `[[Название заметки]]` для создания сети знаний - **Добавляйте контекст** `[[Заметка|в контексте обсуждения]]` - **Ссылайтесь на секции** `[[Заметка#Конкретный раздел]]` ### 3. Workflow публикации #### Еженедельный ритуал обновления: 1. **Понедельник**: Просмотр новых заметок за неделю 2. **Среда**: Развитие 2-3 заметок-seedlings 3. **Пятница**: Публикация обновлений через Quartz Syncer 4. **Воскресенье**: Анализ статистики и планирование #### Процесс развития заметки: ``` 🌱 Seedling → 🌿 Sapling → 🌳 Evergreen ↓ ↓ ↓ Сырая идея → Структурирование → Публикация (приватно) (добавление (открытый ссылок, доступ) примеров) ``` ### 4. Взаимодействие с аудиторией #### Добавление контактной информации Создайте файл `content/contact.md`: ```markdown # Связаться со мной Если эти заметки оказались полезными или у вас есть вопросы: - 📧 Email: [email protected] - 💬 Telegram: @username - 🐦 Twitter: @username - 💼 LinkedIn: /in/username ## Обратная связь приветствуется! Этот цифровой сад растет благодаря взаимодействию. Не стесняйтесь делиться своими мыслями и идеями. ``` ---