Я сейчас в поиске работы разработчиком (писал уже об этом в прошлых статьях). И параллельно думаю про фриланс-заказы. Но без нормального портфолио в этом деле делать нечего.
Можно, конечно, скидывать ссылку на гитхаб или резюме в pdf. Но это не то. Нужна нормальная страница — с проектами, контактами, чтобы сразу видно было, кто я и что умею.
Платить за хостинг ради одного лендинга — ну такое. Особенно когда ты без работы. Плюс я уже знал про GitHub Pages — слышал краем уха, что там можно сайты бесплатно крутить. Но руки доходили только сейчас.
В общем, решил попробовать. Сделал страницу-визитку, залил на GitHub, привязал свой домен fedorov-dev.ru. Всё получилось. Теперь делюсь процессом — вдруг кому-то тоже нужно портфолио для поиска заказов или работы, а бюджет на хостинг не заложен. Ну или свой лендинг захотелось запилить.
Что такое GitHub Pages и почему я выбрал его
GitHub Pages — это бесплатный хостинг для статических сайтов от GitHub. Он умеет:
- раздавать html/css/js (лендинги, портфолио, страницы проектов)
- выдавать SSL-сертификат бесплатно — зелёный замок в адресной строке
- держать нагрузку — инфраструктура GitHub надёжная
Для лендинга-портфолио этого за глаза. Никаких баз данных не надо, никакие php не нужны. Просто страница.
Плюсы для меня:
- бесплатно (пока GitHub существует)
- HTTPS из коробки
- не надо учить панели управления хостингом
- залил файлы — и готово
Минусы тоже есть: только статика, никакой своей серверной логики. Но для портфолио это не минус.
Что нам понадобится
- папка с лендингом (главный файл — index.html)
- 10-15 минут свободного времени
Домен я купил на Reg.ru, но подойдёт любой регистратор. Доменное имя для портфолио — это уже серьёзнее, чем просто gh-pages ссылка. Потенциальный заказчик или работодатель лучше воспринимает.
Шаг 1. Готовлю лендинг
Тут всё просто. Убедился, что главная страница называется index.html. Если назвать иначе — GitHub Pages не увидит.
Все стили, шрифты и картинки сложил в папки. Структура любая, главное — index.html в корне.
Никакой сложной сборки не делал. Просто вёрстка на голом html/css. Для портфолио этого достаточно.
Шаг 2. Заливаю код на GitHub
Git я раньше использовал, но для этой задачи вообще не понадобилась командная строка. GitHub позволяет загрузить файлы через браузер — перетаскиванием.
Мои действия:
- Нажал зелёную кнопку "New repository".
- Назвал репозиторий fedorovdev (можно любое имя).
- Поставил галочку "Public" — иначе сайт не покажется.
- Нажал "Create repository".
Открылась страница с репозиторием. Дальше:
- Нажать "Add file" → "Upload files".
- Перетащить мышкой всю папку с лендингом прямо в окно браузера.
- Внизу написать что-то вроде "первая загрузка".
- Нажать "Commit changes".
Или залить файлы через git, как я и поступил.
Всё. Код залит. Репозиторий лежит на GitHub.
Шаг 3. Включаю GitHub Pages
Теперь из репозитория нужно сделать сайт. Это делается в настройках.
- В репозитории зашёл во вкладку Settings (шестерёнка вверху).
- В левом меню нашёл раздел Pages.
- В блоке "Branch" выбрал ветку main и папку /(root).
- Нажал Save.
Через минуту сайт заработал по адресу:
https://funtiknax13.github.io/fedorovdev/
Проверил — открывается. Уже хорошо. Но я хотел свой домен, поэтому пошёл дальше.
Шаг 4. Привязываю свой домен fedorov-dev.ru
Домен у меня уже был куплен на Reg.ru. Осталось подружить его с GitHub.
Часть А. Настройки на GitHub
В том же разделе Settings → Pages нашёл поле "Custom domain". Вписал туда fedorov-dev.ru и нажал Save.
GitHub автоматически создал в моём репозитории файл CNAME. Внутри него — строчка с моим доменом. Я его не трогаю и не удаляю.
Часть Б. Настройки у регистратора (Reg.ru)
Здесь я полез в личный кабинет Reg.ru в раздел "Управление DNS-записями".
GitHub требует 4 A-записи. Я их добавил:
ТипИмяЗначениеA@185.199.108.153A@185.199.109.153A@185.199.110.153A@185.199.111.153
У Reg.ru поле называется «Поддомен» — я оставил его пустым (это соответствует @). В поле «Адрес» вставил IP-адреса.
Сохранил настройки.
Я настраивал корневой домен fedorov-dev.ru без www. Поэтому использовал A-записи, а не CNAME. Если хотите с www — нужна будет другая настройка.
Шаг 5. Жду и включаю HTTPS
После сохранения DNS настроек сайт открылся не сразу. Я не паниковал — это нормально.
DNS распространяется до 24 часов. У меня заняло примерно час. Можно идти пить чай или заниматься другими делами.
В первые минуты GitHub в настройках Pages ругался: "Domain's DNS record could not be retrieved". Я просто подождал.
Через час зашёл снова — ошибка пропала. Появилась опция "Enforce HTTPS". Я её включил.
Теперь мой сайт https://fedorov-dev.ru/ открывается по HTTPS. Зелёный замок на месте. Бесплатно.
Что в итоге получилось
Живой пример: https://fedorov-dev.ru/
Захожу — открывается. Свой домен, HTTPS, зелёный замок. Лендинг работает, портфолио на месте. Ни копейки за хостинг.
Теперь я могу:
- кидать ссылку на это портфолио потенциальным работодателям
- добавлять в резюме
- указывать в откликах на заказы
Выглядит серьёзнее, чем «вот мой гитхаб, сами разбирайтесь».
Кому это может пригодиться
Думаю, такой способ подойдёт:
- тем, кто ищет работу разработчиком или смежную роль
- фрилансерам, которым нужно быстрое портфолио
- студентам для показа проектов
- кому угодно с небольшим статическим сайтом и без бюджета на хостинг
Никакой магии. Всё делается мышкой, кроме DNS настроек — там придётся пару полей заполнить. Но это один раз.
Планы на развитие
Сейчас у меня просто лендинг-визитка. Дальше нужно её дополнять. Но это уже потом. Главное — первый шаг сделан. Сайт есть, домен свой, портфолио работает.
По традиции, всем дочитавшим — пусть ваше портфолио находит заказчиков, а поиск работы не затягивается.
Как-то так. 😌
P.S. Если захотите тоже сделать себе лендинг на GitHub Pages, но что-то пойдёт не так — пишите в комментариях. Я хоть и не эксперт, но теперь сам через это прошёл, может, подскажу.