Тема цифровых садов не развита в рунете, их можно сосчитать по пальцам. Когда я подключал себе через GITHUB свой садик с помощью инструкции от Дмитрия Лаухина, то совершенно не понимал, что из себя представляет данный зверь внутри. Конечно от стандартной админки сайтов он сильно отличается, но мне критически важно было получить весь функционал Обсидиана на своем портале: Графы, связи между страницами, редактор Markdown, быструю правку и интеграцию в одном окне.
После подключения и старта перелива своего контента в публичный доступ я столкнулся с вопросами:
- Как такие сайты индексируются?
- Можно ли в цифровой сад подключить счетчики аналитики?
- Как подрубить свой домен, а не стандартный Github с окончанием .github.io?
Ничего из этого я решить не мог несколько месяцев по причине отсутствия времени, но за последнюю неделю я закрыл все вопросы с настройками и подключениями.
Цифровой сад – это статический сайт который публикуется через интеграцию в обсидиане и модуль Quartz – взрывает мозг да? В действительности все просто, вы пишите и оформляете свои заметки в Обсидиане как в обычном блокноте, а потом просто нажимаете в меню опубликовать, отправляя все на сервер Гитхаба, а там модуль Quartz делает из этого красоту со всем необходимым функционалом. Никакой верстки, никаких лишних кнопок и окон. Для тех кто не заморачивается с дизайном как я и не важен call-to-action от клиента – идеальный вариант. Мой продукт, это мои мозги, их можно показать только через аналитическую умственную работу на бумаге. Получается что заметки, собственные инструкции и исследования это идеальный вариант продвижения для работников моего типа.
Что такое СТАТИЧЕСКИЙ САЙТ по мнению ИИ
Статический сайт — это сайт, страницы которого представлены как готовые HTML-файлы с фиксированным содержимым, не меняющимся при запросах пользователей.
Основные отличия статического сайта:
- Каждая страница — отдельный готовый файл, который сервер просто отдаёт клиенту без дополнительной обработки.
- Нет серверных баз данных или скриптов, динамически генерирующих контент.
- Контент не изменяется в зависимости от действий пользователя в режиме реального времени.
Преимущества статического сайта:
- Высокая скорость загрузки, так как страница сразу готова и не требует генерации.
- Низкие затраты на хостинг — можно размещать на простых и дешёвых серверах или CDN.
- Повышенная безопасность — отсутствуют серверные уязвимости и базы данных.
- Надёжность и простота — проще обслуживать и переносить.
- SEO-дружелюбность — простые страницы легче индексируются поисковиками.
Недостатки:
- Обновление контента требует ручного редактирования файлов и перезагрузки сайта.
- Для крупных сайтов с большим количеством страниц управление становится сложнее.
- Нет интерактивного контента без интеграции дополнительных скриптов или сервисов.
Отличие от динамического сайта:
- Динамический сайт генерирует страницы в момент запроса, подстраиваясь под пользователя.
- Использует базы данных и серверные языки программирования.
- Позволяет реализовать сложную логику и взаимодействие, но требует больше ресурсов.
Таким образом, статический сайт — это идеальный выбор для сайтов с относительно неизменяемым контентом, где важны скорость, надёжность и безопасность.
Кстати совсем списывать визуальную составляющую не стоит, в цифровой сад можно публиковать видео, фото, и другую медийку, даже встройка формы обратной связи возможна, хотя она по сути не так важна, ведь можно обойтись размещением ссылки на свой мессенджер.
Постепенно копаясь в настройках и коде (я в нем абсолютный 0) удалось разобраться как же настроить и подключить себе Яндекс метрику Вебмастер в цифровой сад. Поделюсь в данной статье настройками, а потом добавлю про SEO индексацию и работу с заметками и тегами.
Для того чтобы подключить Яндекс Метрику себе в цифровой сад на Quartz достаточно провести нехитрые манипуляции. Я начну с истоков:
- Для начала с помощью инструкции Дмитрия Лаухина делаем себе свое садовое пространство, публикуем пару заметок
- После чего лезем в гитхаб в раздел Quartz - Components
Далее нам необходимо встроить счетчик метрики, который я надеюсь все умеют создавать в Яндексе :) Если нет, то инструкций в интернете великое множество. После того как счетчик создан нам нужно найти в Гитхабе в разделе components файл footer.tsx и вставить туда скрипт счетчика такого вида
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/footer.scss"
import { version } from "../../package.json"
import { i18n } from "../i18n"
interface Options {
links: Record<string, string>
}
export default ((opts?: Options) => {
const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
const year = new Date().getFullYear()
const links = opts?.links ?? []
return (
<footer class={`${displayClass ?? ""}`}>
<p>
{i18n(cfg.locale).components.footer.createdWith}{" "}
<a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}
</p>
<ul>
{Object.entries(links).map(([text, link]) => (
<li key={text}>
<a href={link}>{text}</a>
</li>
))}
</ul>
{/* Вставка кода Яндекс.Метрики через dangerouslySetInnerHTML */}
<script
dangerouslySetInnerHTML={{
__html: `
(function(m,e,t,r,i,k,a){
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
`,
}}
/>
<noscript>
<div>
<img
src="https://mc.yandex.ru/watch/XXXXXXX"
style={{ position: "absolute", left: "-9999px" }}
alt=""
/>
</div>
</noscript>
</footer>
)
}
Footer.css = style
return Footer
}) satisfies QuartzComponentConstructor
Обязательно укажите номер своего счетчика на месте “XXXXXXX”. Файл footer.tsx выглядит у меня вот так, смело нажимам правку кода, вставляем скрипт и после этого уже отправляем данные на публикацию по кнопке Commit:
Далее похожую манипуляцию нужно провести с META тегом от Вебмастера, но в другом файле под названием head.tsx. Его можно легко обнаружить строкой поиска. Открываем, после чего добавляем к общему списку мета-тегов полученный из вебмастера. У меня он выглядит в коде вот так:
Вуаля! Через некоторое время в отчетности Яндекс метрики и Вебмастера появятся данные. Все как на обычном сайте!
Что по SEO в цифровых садах?
А все там отлично! Я думал что они индексируются специфическим образом, или вообще не попадают в поиск, но это невозможно по причине того что github является публичным хранилищем, а к цифровому саду можно привязать собственный домен купленный на REG.RU. Я так и сделал, оформил себе домен и подключил его в настройках через раздел Pages:
- Нужно зайти в раздел Settings своего репозитория
- Открыть вкладку Pages
- Вставить свой домен в строку Custom Domain и включить его
- В конце вернуться в сервис регистрации доменов и завести там несколько записей типа “А”. У меня получилось так:
SEO мета-теги
Они возможны, но через специальную вставку в заметку блока Aliases в своем хранилище. Например вы пишите заметку и понимаете, что вам нужно определенное отображение Description в поисковых системах, или Title (он кстати автоматически берется из названия файла заметки). Для изменения тега описания в самой заметке вверху перед своим текстом пишем следующую конструкцию:
Я прикладываю полный вариант со всеми тегами, но сам не использую в своих заметках Title и ключевые слова. Потому что в этом нет смысла, так как Title я прописываю в названии заметки, а тег ключевых слов уже давно не используется в поисковых системах. Поэтому я бы оставил только Description, где нужно прописывать краткое описание статьи для поисковой выдачи.
Подытожим.
Цифровой сад идеальный вариант для ремесленников и тех кто постоянно занимается умственным трудом чтобы показать свою экспертность и опыт. Я уже проводил сравнение резюме и цифрового сада в заметке Удлиняем ЭГО. Цифровой сад VS Резюме. Фильтрация дурака., советую с ней ознакомиться и завести себе публичный цифровой сад. Удачи!
Боярский Глеб Юрьевич @GlebBoyarskii — Telegram | VK
Обо мне:
Настройка Яндекс Директ, Таргет, Google (Yandex) Tag Manager, разработка Power BI и DataLens дашбордов, глубокая аналитика рекламных систем, комплексная веб-аналитика и performance-маркетинг.