Сайт для учителя и педагога: как сделать самому за вечер

Зачем учителю свой сайт, что на нём разместить и как собрать самому с помощью нейросетей: структура, тексты, домен и продвижение.

Главная / Статьи / Сайт для учителя и…

У учителя, у которого есть свой сайт, разговор с родителями начинается иначе. Не с «расскажите о себе», а с «мы посмотрели ваш сайт, нам подходит». Это разница между «ещё один репетитор из объявления» и «педагог, к которому записываются заранее».

Если вас интересует именно разработка сайта — как создавать сами страницы, иллюстрации, слайдеры, формы, информационные блоки и стили, как адаптировать всё под разные устройства — переходите к статье Как создавать сайты с нуля и зарабатывать с помощью ИИ. Там я разобрал самый простой и современный метод создания сайтов с помощью ИИ. А ниже — более важная информация: без неё посетители закроют сайт в первые секунды.

Хорошая новость: сайт учителю не нужен большой. Хватит одной страницы, где понятно, кто вы, чему учите, как проходят занятия и сколько это стоит. Плохая новость: большинство таких страниц делают в конструкторе с чужой рекламой, кривыми шрифтами и без мобильной версии — и они не работают.

Я делаю сайты с 2015 года. За это время собрал не один десяток страниц для специалистов, которые работают с людьми: дизайнеров, психологов, преподавателей. И каждый раз схема одна и та же: сначала структура и текст, потом внешний вид. Не наоборот.

В этой статье — как учителю или педагогу сделать себе сайт самому, за вечер, с помощью нейросетей, и что на нём обязательно должно быть.

Образовательные сайты: курсы и школы

Отдельный жанр — сайты для школ, курсов и образовательных проектов. Здесь важнее всего структура: программа обучения с расписанием, описание занятий, отзывы учеников и заявка на пробное занятие. Отдельно смотри, как показать результаты обучения — без них страница не вызывает доверия. Как собрать такой сайт через нейросеть, разобрано по шагам в гайде по созданию сайта с помощью ИИ.

Родитель за пару минут должен понять, кто вы, чему учите и сколько это стоит. Ниже — пример первого экрана.

Пример первого экрана — сайт учителя

Зачем учителю сайт, если есть журнал и родительский чат

Причин на самом деле пять, и ни одна не про «чтобы было».

Вас ищут в поиске. Родитель, который ищет «репетитор по математике 9 класс Казань», не листает десять страниц. Он открывает первые три результата. Если вашего сайта там нет — вас просто не существует для этого родителя.

Сайт отвечает на вопросы вместо вас. Сколько стоит, как проходят занятия, где вы находитесь, какие результаты у учеников. Обычно эти пять вопросов съедают первые двадцать минут каждого знакомства. Сайт экономит их и вам, и родителю.

Это ваше портфолио. Грамоты, отзывы, фотографии с уроков, примеры работ учеников — всё в одном месте, а не разбросано по чатам и галерее телефона.

Это площадка, которая принадлежит вам. Страница в соцсети может исчезнуть вместе с аккаунтом, объявление на агрегаторе — вместе с модерацией. Сайт на своём домене остаётся с вами.

Это дополнительный доход. Учитель с сайтом чаще берёт онлайн-занятия, подготовку к экзаменам и консультации: человек видит, что вы системно относитесь к работе.

Что должно быть на сайте учителя

Список короткий. Если на странице есть всё это — она уже лучше половины конкурентов.

  • Кто вы. Имя, предмет, опыт, образование. Не «профессионал с большим стажем», а конкретно: «учитель математики, 12 лет в школе, готовлю к ОГЭ и ЕГЭ».
  • Чему и кого учите. Классы, предметы, направления: подготовка к экзаменам, олимпиады, помощь с домашними заданиями, русский для иностранцев.
  • Как проходят занятия. Онлайн или очно, индивидуально или мини-группа, длительность, платформа.
  • Результаты. Оценки, баллы, поступления, отзывы родителей. Хотя бы три штуки — уже убедительно.
  • Цена и формат. Да, цену лучше указать. «Стоимость по запросу» отсекает половину обращений ещё до звонка.
  • Контакты и кнопка записи. Телефон, Telegram, WhatsApp, форма. Одна заметная кнопка «Записаться на занятие».
  • Фотография. Живое лицо вызывает в разы больше доверия, чем стоковая картинка с глобусом.

Материалы для учеников — конспекты, разборы задач, ссылки на тренажёры — классная штука, но это уже второй этап. Сначала визитка, потом библиотека.

Три формата: какой выбрать

Одностраничник. Все блоки на одной странице, прокрутка вниз. Делается за вечер, отлично работает для репетитора и учителя, который ведёт занятия сам. Девяносто процентов случаев — это он.

Мини-сайт на 4–5 страниц. Главная, «О себе», «Занятия и цены», «Отзывы», «Контакты». Нужен, если направлений много: например, подготовка к ЕГЭ, олимпиады и летний интенсив — каждому проще выделить свою страницу.

Сайт с материалами. Плюс раздел со статьями и разборами. Это уже долгая история: он приводит людей из поиска, но требует регулярного контента. Начинать с него не стоит — сначала проверьте, что основная страница вообще приносит заявки.

Мой совет: делайте одностраничник. Если через месяц поймёте, что не хватает места, — добавите страницы. Переделывать одностраничник в мини-сайт гораздо проще, чем год писать статьи на сайт, который никто не открывает.

Шаг 1. Структура и текст — 40 минут

Самая недооценённая часть. Люди хотят сразу «что-нибудь красивое», а потом сидят над пустым макетом и не понимают, что вставить в блоки.

Начните с текста. Откройте заметки и напишите шесть коротких блоков.

  1. Заголовок. Не «Добро пожаловать на мой сайт», а польза: «Подготовка к ЕГЭ по математике с учителем, который проверяет экзамены».
  2. О себе. Три-четыре предложения: кто, сколько лет в профессии, что для вас важно в работе.
  3. Занятия. Что именно вы даёте и в каком формате.
  4. Результаты. Три отзыва или три истории учеников.
  5. Цены. Два-три варианта, чтобы был выбор.
  6. Контакты. Телефон, мессенджер, форма.

Пишите так, как говорите. Если в тексте есть «индивидуальный подход» и «качественная подготовка», вычеркните — это ничего не значит. Замените на факт: «после первого занятия составляю план на три месяца и присылаю его родителям».

Шаг 2. Дизайн: можно за вечер, можно пропустить

Если вы не дизайнер, есть два пути.

Быстрый. Пропустить макет и сразу собрать страницу нейросетью, а потом поправить внешний вид по вкусу. Для одностраничника это нормально.

Аккуратный. Сделать простой макет в Figma: сетка, три цвета, два шрифта, одинаковые отступы. Тогда сайт не будет выглядеть как случайный набор блоков.

Что важно, если рисуете сами:

  • один акцентный цвет, остальное — белый, тёмный и серый;
  • один шрифт для заголовков, один для текста;
  • одинаковые отступы между блоками;
  • крупный заголовок и читаемый текст — минимум 16 пикселей на телефоне;
  • фотография, а не иллюстрация из стоков.

Подробнее про макеты я писал в статье «Простые макеты для вёрстки в Figma», а базовый минимум для новичка разобран в «Figma с нуля».

Шаг 3. Сборка нейросетью

Дальше самое интересное. Вы описываете нейросети, что хотите получить, и она пишет код страницы. Ваша задача — не давать ей волю, а ставить конкретные задачи.

Хороший промпт для первого шага выглядит примерно так.

Ты — веб-разработчик. Собери одностраничный сайт учителя математики.

Структура:
1. Шапка: имя, предмет, кнопка "Записаться"
2. Первый экран: заголовок "Подготовка к ЕГЭ по математике", подзаголовок, кнопка, фото
3. О себе: 3 абзаца
4. Занятия и цены: 3 карточки
5. Отзывы: 3 блока
6. Контакты: телефон, Telegram, форма

Требования:
— HTML и CSS в одном файле, без фреймворков
— мобильная версия обязательна
— тёмный текст на светлом фоне, один акцентный цвет
— шрифты: системные, без подключения из интернета
— все отступы кратны 8 пикселям

Дальше просите по одной правке за раз: «сделай блок отзывов в две колонки на десктопе», «уменьши отступы на телефоне», «замени фото на заглушку». Так вы контролируете результат, а не получаете готовую кашу, которую страшно открывать.

Три правила, которые сэкономят вам вечер:

  • Проверяйте на телефоне после каждой правки. Больше половины посетителей придут с телефона.
  • Не просите «сделай красиво». Просите конкретно: «крупнее заголовок», «больше воздуха между блоками».
  • Сохраняйте рабочую версию. Перед большой правкой копируйте файл. Нейросеть иногда ломает то, что уже работало.

Если совсем не хочется возиться с кодом, можно собрать страницу в конструкторе. Но тогда готовьтесь к платной подписке и чужому логотипу в подвале — а для учителя, который продаёт доверие, это лишнее.

Шаг 4. Домен, хостинг, публикация

Сайт на компьютере — это не сайт. Его нужно выложить в интернет.

Домен. Имя сайта: ivanova-matematika.ru или petrov-tutor.ru. Стоит 200–400 ₽ в год у любого регистратора. Не берите длинные конструкции с дефисами и цифрами — их невозможно продиктовать по телефону.

Хостинг. Обычный shared-хостинг за 150–300 ₽ в месяц. Для одной страницы хватит самого дешёвого тарифа. Бесплатные варианты вроде GitHub Pages тоже работают, но требуют возни с настройками, а для России иногда важна доступность без лишних условий.

SSL-сертификат. Бесплатный Let's Encrypt ставится в панели хостинга в один клик. Без него браузер пишет «Подключение не защищено» — и часть людей просто закрывает страницу.

Публикация. Файл index.html загружается на хостинг по FTP или через файловый менеджер панели. Всё. Через минуту сайт открывается по адресу.

Если делаете через нейросеть, попросите её сразу подготовить файл index.html со всеми стилями внутри — так загрузка сведётся к перетаскиванию одного файла.

Шаг 5. Чтобы сайт находили

Сайт готов, но пока о нём знаете только вы. Три вещи, которые делаются за один вечер и дают первый трафик.

Заголовок и описание страницы. В коде есть теги title и description. В title — что вы предлагаете и где: «Репетитор по математике в Казани — подготовка к ЕГЭ». В description — одно предложение с конкретикой. Не пишите туда «сайт учителя математики» — так ищут другие учителя, а не родители.

Текст с городом и предметом. Поиску нужно понять, к какому запросу вас показать. Если на странице нет города и класса, вас не покажут по запросу «репетитор 9 класс Казань».

Яндекс Вебмастер и карта. Добавьте сайт в Вебмастер, загрузите sitemap.xml, проверьте, что страница попала в индекс. Заведите карточку в Яндекс Картах — по запросам «репетитор рядом» они часто показываются выше обычных сайтов.

Агрегаторы вроде Профи.ру и Авито пусть остаются: оттуда тоже приходят люди. Но это арендованная площадка, где вы конкурируете ценой. Свой сайт — это актив, который работает на вас.

Ошибки, из-за которых сайт учителя не работает

Резюме в PDF вместо сайта. Его не открывают на телефоне, не индексирует поиск, и выглядит он как документ из отдела кадров.

Пять шрифтов и радуга цветов. Страница должна выглядеть спокойно. Один акцентный цвет — максимум.

Нет мобильной версии. Родитель открывает ссылку из чата, видит мелкий текст и уходит.

Нет цены. «Стоимость по запросу» работает только для дорогих услуг с долгим циклом сделки. У репетитора цикл короткий.

Нет действия. Человек прочитал, согласился — и не понял, что нажать. Кнопка должна быть в каждом втором экране.

Сайт-клон. Скачанный шаблон с чужими отзывами и фотографиями. Это видно с первого экрана и убивает доверие быстрее, чем отсутствие сайта.

Сколько это стоит по времени и деньгам

ЧтоВремяДеньги
Тексты40–60 минут0 ₽
Дизайн в Figma1–2 вечера (можно пропустить)0 ₽
Сборка с нейросетью1 вечер0–2 000 ₽ за подписку
Домен15 минут200–400 ₽ в год
Хостинг30 минут150–300 ₽ в месяц

Итого: выходные и примерно 3 000 ₽ за первый год. Дальше — только продление домена и хостинга.

Частые вопросы

Нужен, но не вместо, а вместе. Агрегатор приводит людей, которые уже выбирают между десятью специалистами. Сайт нужен для тех, кто пришёл по рекомендации и хочет проверить, что вы — настоящий.

Да: конструктор с бесплатным тарифом или GitHub Pages. Ограничения будут в домене (адрес вида name.github.io) и в рекламе конструктора. Для старта сойдёт, для работы с родителями лучше свой домен.

Получится. Дизайн одностраничника — это сетка, отступы и один акцентный цвет. Нейросеть сделает черновик, вы поправите текст и фотографию. Этого достаточно.

Для одной страницы — нет. Для сайта с личным кабинетом, оплатой и расписанием — да, но это уже не визитка учителя, а сервис.

Нет. Нейросеть может объяснить тему, но не может держать внимание класса, видеть, где ученик застрял, и мотивировать. Сайт — это инструмент, который освобождает время на саму работу.

Что в итоге

Сайт учителя — это не про технологии. Это про то, чтобы родитель за две минуты понял, кто вы, чему учите и сколько это стоит, и нажал кнопку.

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

Если хотите сделать такой сайт своими руками, но с поддержкой и разбором каждого шага — посмотрите, как проходит обучение созданию сайтов с помощью ИИ. Мы собираем сайт на вашем реальном проекте: от структуры до публикации.

Про заработок на этом навыке — в статье как зарабатывать на создании сайтов.

Есть вопрос по созданию сайтов, ИИ или обучению?

Задайте его мне — отвечу лично

Индивидуальное обучение — 29 000 ₽

Бесплатно расскажу, как оно проходит и отвечу на вопросы

Что вас интересует?

Гарантия / возврат: «не понравилось — верну за первую неделю»

Читайте также