1+++
2date = '2026-06-28T03:31:34+02:00'
3title = "Я строю свой уголок интернета — и вот почему"
4description = "Почему личный сайт вместо соцсетей: одностороннее пространство без алгоритмов, комментариев и регуляций — только текст, пять цветов и мгновенные переходы."
5cover = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Paul_Klee%2C_Swiss_-_Fish_Magic_-_Google_Art_Project.jpg/960px-Paul_Klee%2C_Swiss_-_Fish_Magic_-_Google_Art_Project.jpg"
6tags = ['meta', 'web']
7+++
8
9## Введение
10Каждый раз посещая [HackerNews](https://news.ycombinator.com/), я тратил часы на просмотр сайтов разработчиков. Иногда они максимально простенькие: обычная страница, будто цветной лист бумаги, с несколькими постами. А иногда полноценный сайт с кучей разделов, фич и сложной навигацией. После пары таких вечеров я полез в Гугл со следующим вопросом: «Какой фреймворк использовать для блога?», где и познакомился с [SSG](https://en.wikipedia.org/wiki/Static_site_generator) (Static Site Generator) и с [Hugo](https://gohugo.io/) — одним из самых популярных генераторов.
11
12## Зачем мне веб-сайт
13Изначально целью было создание простенького сайта-визитки на базе [SSG](https://en.wikipedia.org/wiki/Static_site_generator), чтобы люди всегда могли найти мои контакты, ведь я и мои друзья неоднократно теряли связь после того, как удаляли свои аккаунты. Казалось бы, решение простое: не удалять аккаунты и использовать одинаковые юзернеймы. Но обстоятельства бывают разными.
14
15Также у меня есть друзья из России, но с новой политикой закрытого интернета и объявлениями об ограничении доступа к мессенджерам и соцсетям я начал переживать, что потеряю и их.
16
17Со временем идея переросла во что-то большее. Мне захотелось создать уголок, где я смогу публиковать свои мысли, заметки, проекты, наблюдения и просто сохранять часть своей жизни в открытом виде. Поэтому этот сайт — моё одностороннее социальное пространство.
18
19## Социальные сети
20Но почему не социальные сети?
21Честно, у меня к ним аллергия. Не знаю почему, но я просто не могу воспринимать их как что-то «своё». Да и не хочу тратить на это ни внимание, ни время.
22
23Сейчас существует огромное количество платформ с разной аудиторией, из-за чего появляется другая проблема — нет единого места, куда человек может просто зайти, открыть страницу и спокойно посмотреть контент без всплывающих уведомлений о куки, рекламы, просьб зарегистрироваться, установить приложение или подписаться, скрывающих сам контент.
24
25Особенно в свете грядущей политики верификации возраста. Несколько стран уже ввели обязательную верификацию в социальных сетях: Австралия запретила детям до 16 лет пользоваться платформами, следом Бразилия, Индонезия, Малайзия. Великобритания и ряд штатов США движутся в том же направлении. Платформы обязаны соблюдать эти требования и вместе с ними усиливается сбор личных данных пользователей. Личный сайт под эти регуляции не попадает: он не платформа, не собирает данные и не требует от читателя ничего, кроме браузера.
26
27Да, существуют [ActivityPub](https://activitypub.rocks/) и [ATProto](https://atproto.com/), попытки построить более открытый интернет, но с намного меньшим количеством активных участников (что не является главным) и всё равно чужой платформой, где я завишу не от конкретного сервера, а от технологии в целом. Тем более они тоже будут вынуждены следовать требованиям местного законодательства.
28
29Вторая проблема — рекомендации и сама культура потребления контента. Мне не интересно ежедневно следить за чужой жизнью или бесконечно листать предлагаемую алгоритмами ленту. Возможно, дело в том, что многие люди пытаются показать себя лучше, чем они есть: самые красивые фотографии, натянутые улыбки, идеальные моменты жизни. Но меня это никогда не цепляло.
30
31Мне совершенно не важно, какая у вас машина, что вы ели сегодня, где отдыхали, какой букет подарили или почему вас бросил партнёр. Конечно, иногда социальные сети полезны — например, чтобы понять, чем человек живёт и что ему интересно. Но лично для меня куда ценнее разговор: живой, искренний, полный эмоций, мыслей и души. Сам формат современного контента редко помогает раскрыть человека по-настоящему. Он показывает образ, но не личность.
32
33Впрочем, я не отрицаю социальные сети — охват, алгоритмы рекомендаций и виральность делают их отличным инструментом для продвижения и личного бренда. Возможно, я буду их использовать, но не как основную площадку.
34
35## Односторонность
36Под односторонностью я имею в виду однонаправленный канал общения. К примеру, возьмём монолог спикера на сцене, где вы __можете__ только слушать, не задавая вопросов. Противоположное — дискуссия: ты не просто слушаешь, но и отвечаешь, споришь, реагируешь. Односторонний формат лишает автора ненужного внимания к реакции аудитории и позволяет сосредоточиться на содержании. Конечно, в конце речи спикер может ответить на вопросы, но только тогда, когда вся информация уже услышана и вопросы возникают по существу.
37
38Аудитория при этом никуда не исчезает. Напротив, именно читатель определяет выбор темы, язык и подачу. Разница в том, что автор принимает эти решения заранее, без оглядки на реакцию в реальном времени. Монолог требует большей подготовки, чем диалог: нельзя уточнить, нельзя переспросить, нужно сказать всё правильно с первого раза.
39
40Выделив слово «можете», я подчеркнул возможность, а не обязанность. Вы всегда вольны высказать своё мнение или поправить меня, чему я буду искренне рад. Но для этого лучше подойдут мессенджеры: все контакты на странице [связи](/contact/).
41
42## Комментарии
43
44Отдельно о комментариях под постами. Существует немало готовых решений: [Giscus](https://giscus.app/), [Utterances](https://utteranc.es/), [Cusdis](https://cusdis.com/), [Disqus](https://disqus.com/). Но я отказался от них по двум причинам: дизайн и уместность.
45
46Причины взаимосвязаны. При небольшой аудитории комментарии оставит ничтожная доля читателей. Это известное [правило 1%](https://en.wikipedia.org/wiki/1%25_rule). Пустой раздел комментариев выглядит хуже, чем его отсутствие: создаёт ощущение заброшенности и отпугивает новых читателей. При этом не все комментарии несут смысл, а с ростом аудитории неизбежно возникает потребность в модерации.
47
48Я разделяю позицию [Sonia Simone](https://copyblogger.com/removing-blog-comments/): комментарии уместнее в других местах: в блогах других людей, в мессенджерах или в социальных сетях (как бы парадоксально это ни звучало). Первое предполагает тот же монолог, о котором я писал выше. Второе подходит для живой дискуссии, где проще прийти к консенсусу. Третье хотя бы пропиарит.
49
50## Дизайн
51Изначально, когда я хотел сделать сайт-визитку, мне хотелось чего-то изысканного — уникального дизайна, запоминающегося визуально. Показать идентичность через эстетику. Для этого я взял образ балерины в технике halftone, танцующей на кругах. Но вскоре я понял, что абстрактные и сумбурные конструкции — далеко не самое главное на сайте: читателю важен контент, то есть текст. Поэтому я принялся разрабатывать максимально лаконичный дизайн, где читателю не придётся отвлекаться на анимации или непонятную раскладку. Всё должно быть нативным.
52
53### Раскладка
54Вниманием пользователя можно управлять по-разному: главное, чтобы объекты либо следовали определённой раскладке, либо намеренно выбивались из неё. Я выбрал другой способ — не думать. Чтобы добиться максимально нативного дизайна, мне буквально пришлось отключить голову и сфокусироваться на читабельности.
55
56### 5 цветов более чем достаточно
57Цвет — это инструмент. Он отвечает на один вопрос: что важно, а что нет. Как только цвет начинает решать другую задачу, он превращается в шум.
58
59Мне хватило пяти:
60
61- **Фон** — думаю, тут всё понятно
62- **Текст** — основное содержание, ради которого человек пришёл
63- **Яркий** — отвечает за структуру: заголовки и опорные точки страницы
64- **Мрачный** — всё, что тише основного текста: даты, подписи, навигация, описания
65- **Акцент** — цепляет взгляд на деталях, которые стоит подметить: ссылки, важные слова, элементы дизайна, которые нужно выделить
66
67Со временем «мрачный» я разделил на два: один для текста, который всё-таки читают, вроде описаний и цитат; другой для служебного, вроде дат и навигации. Кроме этих пяти есть ещё пара цветов под отдельные элементы вроде карточек и границ, но это не самостоятельные цвета, а оттенки тех же категорий.
68
69### Почему я не хочу делать этот сайт многоязычным
70
71Сейчас я нахожусь в Бельгии, где три национальных языка. В каждом регионе вывески в основном на одном: французском, немецком или нидерландском. Всё зависит от местного населения. Нужно ли мне знать все три, чтобы свободно путешествовать по этой замечательной стране? Нет! Я могу воспользоваться вспомогательными средствами, спросить людей или заранее спланировать маршрут.
72
73Я не хочу переводить каждую страницу на все языки, которые знаю или изучаю, поэтому предпочитаю международный — английский. Почему?
74
75- **Во-первых**, сложность поддержки: изменил одну страницу — будь любезен отредактировать и остальные версии. Я хочу, чтобы перевод оставался приятным занятием, а не обязанностью, иначе его рано или поздно захочется свалить на ИИ;
76- **во-вторых**, в браузеры уже встроен достаточно хороший переводчик.
77
78Поэтому я сосредоточусь на переводе блогов как на интересном хобби и практике.
79
80## Технокухня
81Сам сайт появился из интереса к [SSG](https://en.wikipedia.org/wiki/Static_site_generator), поэтому я отправился искать программу, которая будет лёгкой, быстрой и с возможностью вести блог на Markdown.
82
83Вот список генераторов, которые я просмотрел:
84- [Hugo](https://gohugo.io/) — один из самых популярных: быстрый, удобный, есть всё, что нужно, и даже больше
85- [Zola](https://www.getzola.org/) — хороший аналог Hugo
86- [Zine](https://zine-ssg.io/) — минималистичный, написан на Zig
87- [Astro](https://astro.build/) — громоздкий фреймворк с SPA и подходом server-first
88
89Также можете поискать [тут](https://github.com/myles/awesome-static-generators).
90
91Я остановился на [Hugo](https://gohugo.io/) из-за его зрелости и популярности. Честно, мне больше нечего добавить, кроме одного: я не стал брать готовую тему или шаблон (хотя другим советую, это экономит кучу времени). В остальном я очень доволен своим выбором.
92
93### Загружаем только часть страницы
94Во время разработки всплыла ещё одна причина — белая вспышка при переходах по внутренним ссылкам. Каждый раз браузер загружает и рендерит страницу заново, и хотя уходит на это лишь пара десятков миллисекунд, их хватает, чтобы глаз поймал неприятный блик и первое впечатление было испорчено. Я подумал: зачем заново тянуть и отрисовывать CSS и HTML, если можно обновлять только `body` и `header`? Сначала мне показалось, что получается что-то вроде [SPA](https://en.wikipedia.org/wiki/Single-page_application).
95
96Но это не SPA: страницы остаются настоящими, просто подменяется их часть. А у самого приёма, как я узнал позже, есть имя — [PJAX](https://github.com/MoOx/pjax): подменять часть страницы вместо полной перезагрузки. Велосипед оказался изобретён до меня, но собрать его с нуля всё равно было приятнее, хотя бы чтобы не тащить целую библиотеку ради одной идеи: весь роутер уместился меньше чем в две сотни строк.
97
98Ещё я добавил предзагрузку страницы при наведении, с задержкой в 150 мс. Расчёт простой: пока курсор замирает на ссылке, до самого клика проходит больше ~200 мс, так что 150 мс дают странице фору и она успевает загрузиться заранее. А заодно эта задержка отсекает случайные наведения: когда курсор просто скользит по ссылкам, ничего лишнего не грузится. В итоге к моменту клика страница уже загружена и готова к подмене. Переход ощущается моментальным.
99
100И всё это — лишь надстройка. Отключите JavaScript, и подмена и предзагрузка просто исчезнут, а сайт останется обычным набором статических страниц: каждая ссылка настоящая, каждая страница — реальный HTML-файл. Ломаться нечему.
101
102### Встраивать или выносить
103
104CSS раньше был инлайн прямо в каждой странице: всего 5,7 КБ, и лишний round-trip перед первой отрисовкой не стоил такой экономии. Но с тех пор стили перевалили за 28 КБ, а главное, сайт превратился в тот самый SPA-подобный роутер, о котором я писал выше: переходы внутри сайта подменяют страницу без полной перезагрузки, переиспользуя то, что уже лежит в кэше. Инлайн означал, что один и тот же CSS оплачивается заново на каждой странице вместо одного раза навсегда. Поэтому его вынесли обратно во внешний файл с fingerprint-хэшем в имени, закэшированный навечно (`immutable`, год `max-age`), который браузер скачивает один раз и переиспользует по всему сайту.
105
106Единственное, что было важно не упустить при переносе: преload. `<link rel="preload" as="style" crossorigin>` в заголовках ответа запускает загрузку раньше, чем браузер вообще дойдёт до `<link>` со стилями в `<head>`, так что даже самый первый визит не платит за это лишний round-trip, а все последующие платят ещё меньше.
107
108С иконками всё так же было и остаётся: встраивать их в страницу я не стал, а сложил в один внешний SVG-спрайт, где каждая иконка становится `<symbol>`, а на странице от неё остаётся только короткая ссылка `<use href="…">`. Спрайт грузится один раз, кэшируется и обслуживает все иконки разом. Теперь то же самое и с CSS, и с JS: всё блокирующее, но статичное живёт в своём закэшированном навсегда файле, скачивается раз и переиспользуется везде, вместо того чтобы ехать заново с каждой страницей.
109
110
111### Хостинг для статических сайтов
112
113Пару слов о хостинге. Вариантов куча, и многие бесплатны или с очень щедрым бесплатным планом. Чтобы ускорить и без того быстрый сайт, я бы советовал [Vercel](https://vercel.com/) или [Cloudflare Pages](https://pages.cloudflare.com/): у них есть [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network), который раздаёт файлы с ближайших к читателю серверов.
114
115## Моё место
116Я создал свой укромный и независимый уголок, где могу делать всё, что пожелаю. Нужен ли такой вам — решать не мне. Но я рад, что он мой.