HERON

Ваши работы, ваш домен, без подписки

Сайт-портфолио своими руками

Чтобы сделать сайт-портфолио своими руками, нужны четыре вещи: короткий список лучших работ, страница на каждый проект, способ превратить тексты в страницы и бесплатный хостинг со своим доменом. С HERON это один вечер и никакой абонентской платы.

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

Что нужно портфолио

Сделайте сайт небольшим. Большинству хватает пяти страниц.

СтраницаЧто на ней
ГлавнаяКто вы одной фразой, три–шесть лучших проектов, кнопка связи
Страницы проектовПо одной на проект: задача, что вы сделали, результат, изображения
Обо мнеИстория, навыки, клиенты или работодатели, фото
Услуги или ценыНеобязательно: что вы предлагаете и как начать работу
КонтактыПочта, мессенджеры, форма, ссылки на профили

Пять шагов

  1. 1

    Создайте сайт

    Одна команда берёт последний образ HERON, и образ создаёт папку сайта с темой и демо-страницами.
  2. 2

    Заполните настройки

    Заполните анкету конфигуратора: имя, профессия, ссылки на профили, домен, тема. Он же заполнит разметку schema.org, чтобы поисковики понимали, что сайт о человеке.
  3. 3

    Напишите страницы

    Замените демо-тексты в папке вашего языка внутри content/. Для каждого проекта скопируйте файл страницы и сохраните его в папку work/ под именем проекта, например work/logo-dlya-pekarni.md. Папка становится разделом проектов, имя файла — адресом /work/logo-dlya-pekarni/. Картинки — в media/.
  4. 4

    Посмотрите

    Запустите просмотр и откройте localhost:8000. Сайт пересобирается при каждом сохранении.
  5. 5

    Опубликуйте

    Когда всё готово, опубликуйте готовый сайт выбранным способом. Для портфолио хорошо подходит бесплатный: файлы уходят на GitHub Pages с вашим доменом и HTTPS.

Как выглядит страница проекта

Страница проекта — текстовый файл. Блок сверху — для поисковиков и меню, остальное читают посетители.

---
title: "Логотип для пекарни в Граце: знак, упаковка, вывеска"
h1: "Фирменный стиль для пекарни Huber"
description: "Логотип, упаковка и вывеска для семейной пекарни. Задача, процесс и результат."
---

Семейная пекарня хотела выглядеть так же тепло, как её хлеб.

## Задача {#task}

Новые владельцы, старый логотип и второй магазин, который открывается весной.

## Что сделал {#work}

1. **Исследование.** Два дня в магазине, разговоры с постоянными покупателями.
2. **Логотип.** Нарисованный от руки колос и фамилия семьи.
3. **Упаковка.** Бумажные пакеты и коробки для тортов в двух цветах.

## Результат {#result}

В марте оба магазина открылись с новыми вывесками.

Блок настроек

title — строка в выдаче поисковика, h1 — заголовок на странице, description — описание под заголовком в выдаче.

Секции

Каждая ## Заголовок {#якорь} становится блоком темы, нумерованный список — шагами.

Следующий проект

Скопируйте этот файл, переименуйте и поменяйте текст. Сборка добавит страницу в раздел проектов, карту сайта и llms.txt.

Покажите работы так, чтобы их находили

Один проект — одна страница

Страница проекта со своим заголовком может попасть в выдачу по запросу «логотип для пекарни» или «свадебный фотограф в Лиссабоне». Галерея на одной странице — нет.

Несколько строк к каждому проекту

Задача, что сделали, результат. Поисковики и нейросети читают текст, а не картинки.

Подписи к изображениям

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

Крупные фото, лёгкие файлы

Кладите оригинал в media/. HERON сделает WebP и AVIF всех размеров, и страница останется быстрой на телефоне.

Имя в нужных местах

Заголовок главной и разметка schema.org содержат ваше имя и профессию.

Где разместить

ВариантСтоимостьСвой доменЧто делаете вы
GitHub PagesБесплатноДа, с HTTPSPush на GitHub. [Инструкция](/github-pages-custom-domain/)
Cloudflare PagesБесплатноДа, с HTTPSОдин раз подключаете репозиторий
Свой серверОт 5–6 евро в месяцДаPush в git: GitHub собирает образ, вы запускаете его на сервере. [Как](/publish/git/)

Начните с темы

Выберите тему с демо-страницами, замените тексты и фото на свои, структуру оставьте. На странице тем у каждой есть демо и команда установки.

Вопросы

Нужно ли уметь программировать?

Нет. Страницы — текстовые файлы с простыми пометками для заголовков и списков. Настройки — анкета конфигуратора. Код нужен, только если менять саму тему.

Это правда бесплатно?

Инструменты и хостинг бесплатны: HERON — открытый код под AGPL-3.0, GitHub Pages ничего не стоит. Платите только за домен.

Можно сделать портфолио на двух языках?

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

Как потом добавить новый проект?

Скопируйте файл проекта, поменяйте текст и картинки и опубликуйте. Проект сам появится в карте сайта, llms.txt и в разделе проектов.

Может ли сайт собрать ИИ-агент?

Да, в части контента. Дайте Claude Code или Codex свои тексты и короткое задание: он заполнит страницы проектов и обязательные поля по тем же правилам, а сборка проверит результат. Тема и структура страниц останутся как есть. См. HERON для ИИ-агентов.