Как разместить портфолио веб-разработчика на GitHub Pages 

GitHub Pages – это ресурс, где разработчики могут бесплатно публиковать свои проекты, обсуждать и делиться ими. Часто он используется в качестве портфолио. Это удобно, так как можно не только показать готовый результат, но и сам код с файловой структурой. Плюс, это еще бесплатный хостинг, которые работает достаточно неплохо – для публикации небольших проектов или демо-версии больших его вполне достаточно.

Далее рассмотрим, как разместить разработчику свое портфолио на GitHub Pages, как его оформить и как с его помощью получать дополнительные предложения по работе.

Насколько это целесообразно

Для начинающего специалиста определенно, особенно, если нет реальных проектов, которые уже размещены и работают. Уже состоявшемуся специалисту будут тоже полезно добавить на GitHub несколько своих работ. Даже если у вас уже есть завершенные и опубликованные проекты, рекомендации от предыдущих заказчиков и работодателей, на GitHub вы можете не только продемонстрировать конечный результат, но и показать, как именно вы решали ту или иную задачу. Так вы дадите рекрутеру узнать вас получше и увеличите скорость принятия решения по вашему офферу.

Начинающему разработчику размещение портфолио на Гитхаб даст такие плюшки:

• Бесплатный сервер. Если ваши проекты в портфолио еще нигде не опубликованы или вы вообще делали их “чтоб было что показать”, то бесплатный сервер это неплохое предложение. Причем по качеству он не уступает многим платным аналогам. Так вам не нужно покупать сервер для размещения портфолио или под каждый отдельный проект – GitHub может быть неплохой “песочницей” перед публикацией.
• Вы можете получать обратную связь по своим проектам от других разработчиков и рекрутеров. Это полезно, так как вам быстро укажут на ошибки и подскажут как можно было бы решить ту или иную задачу. Также доступна возможность комментирования проектов других разработчиков.
• Доступна демонстрация кода и файловой структуры. Рекрутер видит не только готовую картинку, но и то как вы решаете поставленные задачи, насколько у вас хороший код и логичная структура проектов.

Кстати, если рекрутер видит ваш код, то он может минимизировать количество тестов или вовсе от них отказаться во время собеседования. Это сэкономит вам не только время, но и нервы, так как новички часто нервничают на тестировании во время собеседования, из-за чего его и проваливают. Даже небольшое, но грамотно оформленное портфолио на GitHub Pages может оказаться весомым козырем в рукаве кандидата.

Есть мнения от опытных разработчиков, что портфолио на GitHub и подобных сервисах скорее бесполезная трата времени, так как на них никто не смотрит или смотрит вскользь. Отчасти они могут быть правы, так как для многих тим-лидов важно посмотреть, как вы справитесь с тестовыми заданиями. Однако есть немало и тех, кому важно посмотреть примеры ваших работ и кода, чтобы хотя бы допустить к выполнению тестов.

Все-таки правильно оформленный профиль и несколько репозиториев на GitHub дают ощутимое конкурентное преимущество. Да, возможно, при приеме на работу на ваши примеры не обратят внимание, но часто обращают и часто качество работ в репозитории имеет решающее значение.

Оформление профиля на GitHub Pages

В первую очередь нужно разместить минимальную информацию о себе и несколько наиболее важных с вашей точки зрения репозиториев. Давать ссылку в резюме на пустой Гитхаб – это очень плохой тон. Не нужно волноваться по поводу того, что у вас нет каких-то интересных, уникальных или даже коммерческих проектов. На первое время можно разместить учебные, если они хорошо выполнены. Ревьюер ожидает в первую очередь увидеть ваш уровень написания документации, общий стиль кода, умение пользоваться шаблонами проектирования.

Оцениваются две вещи: навык владения технологиями и коммуникации в среде разработчиков. С первым все более-менее понятно – код либо написан корректно и работает, либо вся конструкция держится на “костылях”. Со вторым не очень. Под коммуникациями подразумевается умение писать понятный для других разработчиков код, сопровождать его комментариями, умение правильно выстраивать иерархию внутри репозитория, да и создавать сами репозитории.

Конечно же, проекты в репозитории позволяют рекрутеру наглядно соотнести ваши реальные навыки с тем, что написано в резюме или было сказано на собеседовании. Выберите два-три варианта, которые максимально подробро отражают ваши навыки. Учебные тоже подойдут, но они должны быть приведены в порядок и полностью завершены. Не обязательно делать их оригинальными, но лучше если вы сделаете хотя бы одну фишку “от себя”. Достаточно будет добавить в дизайн дополнительные картинки или разместить дополнительный блок.

Отлично, если вы участвовали в каких-то открытых проектах, например, хакатонах. Так вы приобретаете и реальный опыт, и получаете в копилку законченную работу, над которой, возможно, трудилась команда разработчиков. Указание хакатонов в резюме покажет не только то, что у вас есть реальный опыт, но и то, что вы заинтересованы в своей профессии.

Добавление и оформление репозитория

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

Создание репозитория

На репозитории содержится весь код, документация и полезные ссылки для вашего проекта. Вот как он создается на стороне GitHub:

• Войдите в свой аккаунт. Если его нет, то зарегистрируйте. В регистрации аккаунта нет ничего сложного – просто укажите почту.
• Теперь перейдите непосредственно к созданию репозитория. Это можно сделать, нажав на кнопку “New repository” или “Start a project”.

Кнопка создания репозитория

• Вас перебросит на страницу создания репозитория. В верхней части находятся поля “Owner” и “Repository name”. “Owner”, то есть владелец, по умолчанию ваш логин в GitHub. Меняйте его только в том случае, если добавляете какой-нибудь командный проект. В “Repository name” указывайте название проекта латиницей и без пробелов.
• Далее выберите тип репозитория. Есть публичный и приватный. В последнем случае вы сами выбираете, кто может смотреть его содержимое и оставлять комментарии. По умолчанию рекомендуется оставить “Public”, так как его требуется меньше настраивать.
• Перед созданием репозитория, рекомендуется поставить галочку у “Initialize this repository with a README”. С помощью README-файла проще составлять документацию и проводить инициализацию репозитория.
• Также в настройках есть пункты добавления файла .gitignore и лицензии на проект. По умолчанию ничего не добавляйте.
• Теперь жмите кнопку “Create repository”. Репозиторий создан и вы можете его редактировать, добавляя файлы проекта, описание, документацию.

Рекомендуемые настройки создаваемого репозитория

Составление описания

Блок с описанием находится в верхней части вашего репозитория. Это первое, что видит человек, перешедший по ссылке. В этом блоке опишите, о чем ваш проект, какие технологии использовали, что было необычного во время выполнения и так далее. Не нужно слишком много текста – хватит одного абзаца на 3-5 предложений. В конце расположите ссылку на работающий проект (веб-страницу, например).

Чтобы начать писать описание, просто нажмите кнопку Edit, что расположена справа.

Кнопка редактирования описания репозитория

Кстати, описание индексируется поисковыми системами. Вряд ли это привлечет каких-то дополнительных работодателей, но все таки.

Заполнение документации

Она указывается в файле README.md, который создается вместе с репозиторием, если в условиях не было отключено его создание. По умолчанию в нем только написано название репозитория.

Вот рекомендации по минимальному заполнению данного файла:

1. Напишите о чем проект. Можно обойтись одним предложением.
2. Содержание. Этим пунктом можно пренебречь, если проект небольшой и с ним очень легко взаимодействовать. Если же вам требуется прописать продвинутую инструкцию, то содержание в начале файла README.md обязательно.
3. Зачем был сделан этот проект и какие задачи он преследует. Тут можно обойтись как одним предложением, так и несколькими абзацами.
4. Продублируйте из основного описания ссылку на демонстрационную страницу.
5. Напишите инструкцию сборки проекта. Желательно написать ее и для графического интерфейса и для терминала.
6. Распишите общую структура проекта, его архитектуру и подключаемые API.

Пример полностью заполнено файла README

Оформление текста происходит с помощью синтаксиса markdown. Используйте его, чтобы документация не выглядела как полотно текста. Он чем-то похож на оформление текста в HTML и XML. Вот более подробный гайд на английском языке на Github.

Цель написания документации к репозиторию не только в том, чтобы показать читателю, что это за проект и как с ним взаимодействовать, но и чтобы показать сам факт того, что вы умеете составлять документацию. Для потенциального работодателя в IT-сфере это очень полезный навык.

Что можно добавить в документацию дополнительно:

• Скрины и скринкасты. Если у приложения или сайта есть нормальный интерфейс и дизайн, то в документации можно показать несколько скриншотов. Еще, кстати, некоторые добавляют гифки для лучшей иллюстрации. Это необязательно, но выглядит интересно и запоминается, что дает дополнительное конкурентное преимущество перед другими кандидатами.

Пример скрина в файле README

• Сделайте topics. По-сути, это теги, с помощью которых проект лучше ранжируется во внутренней поисковой системе Github. В них пишите технологии, которые использовали, ключевые слова о самом проекте.

Как загрузить файлы и папки проекта

Вы создали репозиторий и написали документацию, но без файлов проекта вы не сможете ничего толком продемонстрировать рекрутеру. Удобнее всего управлять файлами с помощью приложения Github Desktop. Скачайте его для своей операционной системы. Он есть для Mac, Windows и Linux. В нем потребуется войти в свой аккаунт на Github и клонировать созданный репозиторий на компьютер. Программа сама предложит вам выполнить клонирование одного из доступных репозиториев. Вам останется только выбрать подходящий и указать, в какую папку нужно поместить его.

Инструмент по работе с репозиториями в GitHub Desktop

Далее перейдите в папку созданного репозитория и просто перетащите файлы проекта в нее. Изменения сразу же отобразятся в интерфейсе GitHub Desktop во вкладке “Changes”. В ней показываются добавленные файлы и изменения в самих файлах. Чтобы изменения появились и в удаленном репозитории (тот что на серверах Гитхаба), нажимайте Push Origin.

Отображение изменений в репозитории

Если потребуется внести изменения в уже размещенный проект, то изначально их придется вносить на компьютере, а потом уже подтверждать в приложении. После чего изменения будут внесены в основной репозиторий, что находится на серверах Github.

Чтобы окончательно завершить публикацию, нужно проделать следующие действия на стороне веб-версии Гитхаба:

1. Откройте репозиторий, с которым работаете. Перейдите во вкладку “Settings”.

Вкладка Settings

2. В левом меню откройте раздел “Options”.

Переход в Options

3. Найдите раздел “GitHub Pages”. Установите в качестве источника файлов вашей страницы ветку master созданного репозитория. После этого по ссылке на ваш репозиторий можно будет попасть непосредственно на сайт, который был размещен в портфолио.

Установка источника файлов репозитория

Оформление профиля на GitHub

Также нужно уделить время оформлению профилю на GitHub, особенно, если в резюме вы даете ссылку именно на него, а не какой-то конкретный репозиторий. Рекомендации здесь минимальны:

• Установите аватар профиля. Желательно, чтобы он совпадал с той фотографией, которая приложена к вашему резюме.
• Укажите имя и фамилию. По умолчанию там ставится просто логин.
• Напишите, чем занимаетесь. Например, “Front-end developer (React, Node.js)”.
• Добавьте какую-нибудь дополнительную информацию: город проживания, ссылку на резюме и так далее.
• Укажите несколько проектов, с которых вы бы хотели, чтобы посетитель начал изучение ваших работ. Для этого нажмите кнопку “Customize your pins” и выберите среди ваших репозиториев те, которые хотите показать на главной странице профиля.

Пример хорошо оформленного профиля на GitHub

Заключение

GitHub Pages – полезный инструмент, которым пользуются практически все разработчики. Он отлично подходит для публикации работ – есть бесплатный сервер, можно быстро просмотреть файловую структуру, документацию и даже код проекта. Правильно оформленные гит-репозитории и профиль способны помочь найти начинающему разработчику первых крупных работодателей.

Спасибо за прочтение! Пожалуйста, поделитесь своим отзывом в комментариях и подпишитесь на меня в социальных сетях, если вам понравилась статья. Я также создал сообщество Telegram, где мы можем собираться и обсуждать интересные темы, связанные с криптовалютой. Вы можете присоединиться к нам и принять участие в обсуждении → Telegram: Contact @razgules