Как я строил этот блог вместе с ИИ

Этот блог — эксперимент. Он написан на Django 6, рендерится Markdown, работает в двух темах и частично создан искусственным интеллектом. Здесь расскажу, как и зачем всё устроено, и попутно покажу всё, на что способен наш Markdown-движок.

Зачем

Старый блог на Django 2.2.4 проработал несколько лет. Работал — но пришла пора обновиться: новая версия Django, нормальная типографика, поддержка тёмной темы, многопользовательский авторство. Вместо того чтобы мигрировать по старой схеме, я решил построить блог с нуля — и сразу заложить всё, что хотелось видеть.

Стек технологий

Как устроен рендеринг

Каждая статья хранится в Markdown. При сохранении в БД (pre_save сигнал) Markdown конвертируется в HTML и кэшируется в полях content_html и brief_html. Шаблон просто выводит {{ article.content_html|safe }} — без рендеринга на лету.

graph LR
A[Markdown
в БД] -->|pre_save| B[render]
B --> C[HTML
кэш в БД]
C -->|шаблон| D[Отданный
HTML]

Это значит, что при изменении пайплайна рендеринга нужно пересобрать все статьи командой rerender_articles.

Форматирование текста

Вот всё, что умеет наш движок. Жирный текст, зачёркнутый, выделенный, H₂O — водород, x² — степень, а ещё ++клавиши++: нажмите Ctrl+S чтобы сохранить.

Цитаты

Программирование — это не про компьютеры. Программирование — это про мышление. — Jeff Atwood

Списки задач

• Выбрать фреймворк
• Настроить Markdown-пайплайн
• Реализовать тёмную тему
• Завоевать мир
• Написать больше статей

Определения

Markdown

Язык разметки для создания структурированного текста с помощью простого синтаксиса.

Django

Высокоуровневый Python-фреймворк, следующий принципам «батареи включены».

attr_list

Расширение для Python-Markdown, позволяющее добавлять CSS-классы и атрибуты прямо из текста.

Буквенные списки

1. Написать код
2. Задеплоить
3. Написать статью о том, как задеплоил

1. Первый пункт
2. Второй пункт
3. Третий

Умные символы

© 2026 bl0g.ru, ®, → стрелка вправо, ← стрелка влево, --- тире, ½ и ¾ дроби.

Код

Подсветка работает для более чем 100 языков. Блоки кода копируются одной кнопкой.

Python

from dataclasses import dataclass
from typing import Optional

@dataclass
class Article:
    title: str
    slug: str
    content: str
    author: str
    status: str = "draft"
    cover: Optional[str] = None

    def publish(self) -> None:
        self.status = "published"
        print(f"Опубликовано: {self.title}")

Bash

# Деплой на прод
cd /srv/bl0g
source venv/bin/activate
python manage.py migrate
python manage.py collectstatic --noinput
systemctl restart bl0g

Inline-код

Используйте псевдо-тег class Meta для подсветки отдельных фрагментов.

Таблицы

Блоки уведомлений (Admonition)

Сворачивающиеся блоки (Details)

Вкладки (Tabbed)

def fibonacci(n: int) -> list[int]:
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

function fibonacci(n) {
    const result = [];
    let a = 0, b = 1;
    for (let i = 0; i < n; i++) {
        result.push(a);
        [a, b] = [b, a + b];
    }
    return result;
}

# Числа Фибоначчи через awk
awk 'BEGIN { a=0; b=1; for(i=0;i<10;i++){print a; t=a+b; a=b; b=t} }'

Математика (MathJax)

Инлайн-формула: $E = mc^2$ — известная формула Эйнштейна.

Блочная формула — интеграл:

Матрица:

Сумма:

Диаграммы (Mermaid)

Граф процессов

graph TD
Start[Начало] --> Write[Написать статью]
Write --> Review{Ревью}
Review -->|ОК| Deploy[Деплой]
Review -->|Правки| Write
Deploy --> Done[Опубликовано]
Done -->|Feedback| Review

Последовательность

sequenceDiagram
participant U as Автор
participant B as Блог
participant S as Сервер

U->>B: Пишет Markdown
B->>B: pre_save → HTML
U->>B: Нажимает «Опубликовать»
B->>S: webhook (git push)
S->>S: git pull → migrate
S->>S: collectstatic → restart
S-->>U: Статья жива!

Колонки и карточки

Колонки (без рамки)

Карточки (с фоном)

CSS-классы через attr_list

Наш блог поддерживает утилитарные CSS-классы — что-то вроде мини-Tailwind для Markdown. Подробности в отдельной статье, а здесь — примеры.

Цвета и фоны

Крупный вводный текст для привлечения внимания.

Мелкий приглушённый текст — подпись или примечание.

Акцентный блок — важное сообщение на синем фоне.

Операция выполнена успешно.

Ошибка при загрузке файла.

Предупреждение — обратите внимание.

Границы и тени

Карточка с рамкой и скруглёнными углами.

Блок-цитата с акцентной полоской слева.

Карточка с тенью — выглядит объёмнее.

Выравнивание

Этот текст выровнен по центру.

А этот — по правому краю.

Этот текст выровнен по ширине. Он занимает всю доступную ширину, а слова распределяются равномерно между левым и правым краем. Хорошо работает для длинных абзацев с переносами строк.

Кнопки

Основная кнопка Контурная Маленькая Большая Опасность Успех

Ширина и грид

Типографика

Жирные заглавные буквы

Курсивный текст

const x = new Map(); // моноширинный

Комбинированный пример

Критический разбор (Critic Markup)

При совместной редактировании удобно показывать изменения:

Старая версия текста Новая версия текста

Замена целиком: устаревший терминактуальный термин

Эмодзи

Блок поддерживает встроенные эмодзи: :memo:

Заголовки с атрибутами

Заголовки можно стилизовать через {:}:

Контакты

Печать

Весь блог оптимизирован для печати:

• Шапка, футер, навигация — скрыты
• Tabbed-вкладки — все видны, с заголовками
• Details — всегда развёрнуты
• Код — с переносом строк
• Картинки — вписываются в ширину

Нажмите Ctrl+P чтобы попробовать.

ИИ в этом блоге

Часть статей в этом блоге написана при участии ИИ — модели big-pickle через интерфейс opencode. ИИ помогает с:

• Генерацией и редактированием контента
• Написанием CSS и JavaScript
• Настройкой инфраструктуры
• Созданием изображений через YandexART
• Документированием кода

Но финальное слово — за человеком. ИИ — инструмент, как Django или Markdown. Он не пишет за вас, он пишет с вами.

Что дальше

• Санитайзер HTML (nh3) для защиты от XSS через attr_list
• RSS-лента
• Комментарии через внешний сервис
• Полноценный поиск по статьям
• Экспорт в PDF

Итого

Этот блог — это:

• Django 6 с кастомной моделью пользователя
• Markdown с 20+ расширениями
• Тёмная тема с переключателем
• Мерmaid-диаграммы и LaTeX-формулы
• CSS-утилиты через attr_list
• Автодеплой через git push
• ИИ как соавтор

Всё работает. Всё бесплатно. Код на GitHub.