Как создать бесплатный сайт на GitHub Pages

Продолжаем изучать главный сервис для хранения IT-проектов. В этой статье разберёмся, как разместить на GitHub полноценный сайт с бесплатным хостингом и несложным дизайном. Это может быть полезно разработчикам, фрилансерам, бизнесу и всем, кто хочет публично рассказать о своих проектах и услугах.

Что такое GitHub Pages и чем он хорош

GitHub Pages — это часть платформы GitHub, заточенная специально под размещение сайтов в интернете.

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

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

У Pages есть и другие фишки:

• Адаптивность. Сайт одинаково хорошо выглядит на смартфонах и компьютерах.
• Шаблоны оформления. Можно использовать стандартную тему или поискать бесплатные решения от разработчиков на GitHub.
• Поддержка плагинов. Вы можете подключить к сайту комментарии, формы авторизации или слайдер с публикациями.
• Удобный редактор кода. Он позволяет разработать и опубликовать сайт с нуля прямо в веб-версии GitHub — вам не нужно скачивать среду разработки и другой софт.

Как разместить сайт на GitHub Pages

А теперь, как и обещали, подробная инструкция по настройке и публикации сайта. Поехали.

Шаг 0

Регистрируемся на GitHub или заходим под своим логином и паролем

Тут особо и говорить нечего, разберётесь сами 🙂

Шаг 1

Создаём репозиторий

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

Для начала — откройте раздел c репозиториями. Нажмите на иконку аккаунта в правом верхнем углу и выберите Your repositories:

Чтобы добавить новый репозиторий, нажмите кнопку New в правом верхнем углу:

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

Готово! У вас есть репозиторий, куда можно загрузить файлы уже написанного сайта или создать его с нуля. Едем дальше.

Шаг 2

Подключаем GitHub Pages

Настало время превратить ваш репозиторий в настоящий сайт с собственным адресом в интернете. Чтобы это сделать, открываем проект и заходим в настройки:

В меню слева выбираем раздел Pages. Затем переходим к пункту Branch и меняем значение None на Main — это значит, что сайт будет собираться из главной ветки репозитория. После этого нажмите Save и подождите пару минут — когда GitHub сформирует сайт, наверху появится ссылка:

Поздравляем, сайт готов! Можно открыть ссылку и посмотреть, что получилось:

Так как наш сайт состоит пока всего из одного файла, в нём ещё мало чего интересного — только название и описание. Но дальше — больше :)

Финальный штрих. Добавляем тему оформления

Если хотите сделать сайт красивым, но не разбираетесь в сложной разметке, можно использовать бесплатный дизайн от Jekyll. Вот как это сделать:

Шаг 0. Выбираем любую тему на странице поддерживаемых тем GitHub. Например, нам понравилась Cayman — она выглядит современно и минималистично.

Шаг 1. В файле Readme выбранной темы скопируйте строчку remote_theme: название_темы.

Шаг 2. Откройте репозиторий вашего сайта и создайте файл ​​_config.yml. Для этого нажмите: Add file → Create new file.

Шаг 3. Вставьте скопированную строчку и сохраните файл, нажав на кнопку Commit Changes внизу страницы. Подождите несколько секунд и наслаждайтесь мощью современного веб-дизайна:

Важная оговорка: так как Jekyll не понимает обычного человеческого языка, для работы с готовыми темами надо освоить текстовую разметку Markdown. Она очень простая и учится за пару часов — например, чтобы выделить текст жирным, нужно поставить по краям звёздочки — *таким образом*. А заголовки разного уровня оформляются так:

# Заголовок первого уровня #

### Заголовок третьего уровня ###

###### Заголовок шестого уровня ######

Итоги

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

Причём делать это — сплошное удовольствие: GitHub Pages оказался столь же удобным, как и весь GitHub. Как будто блюзу обучаешься: выучил четыре аккорда блюзового квадрата — и можно играть хоть Би Би Кинга, хоть Мадди Уотерса.

А можно пойти ещё дальше, углубиться в тему — и делать совсем уж крутые вещи, чтоб все ахнули и даже деньги платить начали. Хотите разобраться во всём этом больше — почитайте наши статьи про HTML, CSS и JavaScript: на этих языках работает весь современный интернет.