Никакой CMS, никакой базы данных и ни одного npm-пакета. Только HTML-файлы, один CSS и десять строк JavaScript. Такой сайт невозможно «сломать обновлением» и он одинаково быстро отдаётся из любой точки мира.

Структура

blog/
├── index.html          список записей
├── about.html          страница «О блоге»
├── 404.html            страница ошибки
├── feed.xml            RSS-лента
├── robots.txt
├── posts/
│   ├── privet-mir.html
│   └── kak-ustroen-etot-blog.html
└── assets/
    ├── style.css       вся вёрстка и темы
    └── main.js         переключатель светлой/тёмной темы

Что внутри страницы

Каждая запись — самодостаточный файл. Ключевые места:

  • <title> и <meta name="description"> — то, что видно в поиске;
  • инлайновый скрипт в <head> — ставит тему до отрисовки, чтобы не было белой вспышки;
  • <div class="article-body"> — сам текст: заголовки, списки, цитаты, код;
  • класс tag — метка записи.

Как добавить запись

  1. Скопируй файл posts/_template.html и переименуй в свой слаг: posts/moya-zapis.html.
  2. Замени заголовок, дату, метку и текст.
  3. Добавь блок <li> в начало списка в index.html — это ссылка на новую запись.
  4. Добавь <item> в feed.xml, чтобы запись попала в RSS.
  5. Перетащи папку blog в Netlify Drop — сайт обновится за секунды.

Никакой магии: пять правок руками, и запись в интернете.

Правило простое: чем меньше движущихся частей, тем дольше сайт живёт без твоего внимания.

Темы и внешний вид

Вся палитра лежит в блоке :root в начале style.css. Поменяй --accent — и акцентный цвет обновится во всём блоге. Тёмная тема включается атрибутом data-theme="dark" и запоминается в браузере.