Ваши работы, ваш домен, без подписки
Сайт-портфолио своими руками
Чтобы сделать сайт-портфолио своими руками, нужны четыре вещи: короткий список лучших работ, страница на каждый проект, способ превратить тексты в страницы и бесплатный хостинг со своим доменом. С HERON это один вечер и никакой абонентской платы.
Ниже — что разместить на сайте, пять шагов, чтобы его собрать, и как опубликовать его по своему адресу.
Что нужно портфолио
Сделайте сайт небольшим. Большинству хватает пяти страниц.
| Страница | Что на ней |
|---|---|
| Главная | Кто вы одной фразой, три–шесть лучших проектов, кнопка связи |
| Страницы проектов | По одной на проект: задача, что вы сделали, результат, изображения |
| Обо мне | История, навыки, клиенты или работодатели, фото |
| Услуги или цены | Необязательно: что вы предлагаете и как начать работу |
| Контакты | Почта, мессенджеры, форма, ссылки на профили |
Пять шагов
- 1
Создайте сайт
Одна команда берёт последний образ HERON, и образ создаёт папку сайта с темой и демо-страницами. - 2
Заполните настройки
Заполните анкету конфигуратора: имя, профессия, ссылки на профили, домен, тема. Он же заполнит разметку schema.org, чтобы поисковики понимали, что сайт о человеке. - 3
Напишите страницы
Замените демо-тексты в папке вашего языка внутриcontent/. Для каждого проекта скопируйте файл страницы и сохраните его в папкуwork/под именем проекта, напримерwork/logo-dlya-pekarni.md. Папка становится разделом проектов, имя файла — адресом/work/logo-dlya-pekarni/. Картинки — вmedia/. - 4
Посмотрите
Запустите просмотр и откройтеlocalhost:8000. Сайт пересобирается при каждом сохранении. - 5
Опубликуйте
Когда всё готово, опубликуйте готовый сайт выбранным способом. Для портфолио хорошо подходит бесплатный: файлы уходят на GitHub Pages с вашим доменом и HTTPS.
Как выглядит страница проекта
Страница проекта — текстовый файл. Блок сверху — для поисковиков и меню, остальное читают посетители.
---
title: "Логотип для пекарни в Граце: знак, упаковка, вывеска"
h1: "Фирменный стиль для пекарни Huber"
description: "Логотип, упаковка и вывеска для семейной пекарни. Задача, процесс и результат."
---
Семейная пекарня хотела выглядеть так же тепло, как её хлеб.
## Задача {#task}
Новые владельцы, старый логотип и второй магазин, который открывается весной.
## Что сделал {#work}
1. **Исследование.** Два дня в магазине, разговоры с постоянными покупателями.
2. **Логотип.** Нарисованный от руки колос и фамилия семьи.
3. **Упаковка.** Бумажные пакеты и коробки для тортов в двух цветах.
## Результат {#result}
В марте оба магазина открылись с новыми вывесками.
Блок настроек
title — строка в выдаче поисковика, h1 — заголовок на странице, description — описание под заголовком в выдаче.Секции
## Заголовок {#якорь} становится блоком темы, нумерованный список — шагами.Следующий проект
Покажите работы так, чтобы их находили
Один проект — одна страница
Несколько строк к каждому проекту
Подписи к изображениям
Крупные фото, лёгкие файлы
media/. HERON сделает WebP и AVIF всех размеров, и страница останется быстрой на телефоне.Имя в нужных местах
Где разместить
| Вариант | Стоимость | Свой домен | Что делаете вы |
|---|---|---|---|
| GitHub Pages | Бесплатно | Да, с HTTPS | Push на 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 для ИИ-агентов.