Поиск по сайту Поиск

Пошаговая инструкция: как сделать бесплатный сайт на GitHub Pages

Если вам нужен сайт, состоящий из статических HTML-страниц, то необязательно приобретать хостинг — можете воспользоваться GitHub Pages. В статье расскажем, что это за сервис, какие у него преимущества, и поделимся пошаговой инструкцией, которая поможет вам разместить сайт на GitHub.

GitHub Pages — что это?

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

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

И здесь важно разобраться с терминами, потому что GitHub Pages очень тесно связаны с такими понятиями как «Git» и «GitHub».

Git — это самая популярная система контроля версий в мире. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux.

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

GitHub Pages — это бесплатный хостинг для статических файлов. 

У GitHub Pages есть своя специфика работы (спойлер: она же и является главным преимуществом сервиса). Как мы сказали выше, обычный хостинг размещает файлы вашего сайта на своих серверах и скрывает всю его техническую часть от посторонних пользователей. GitHub Pages — бесплатен, поэтому технические файлы вашего сайта будут открыты. Для чего это нужно? Для того, чтобы все смогли насладиться красотой вашего кодинга 😉 . 

Поэтому GitHub — это настоящий круговорот креативных идей. Кстати, многие работодатели просят в резюме указать ссылку на ваш аккаунт на этом ресурсе, чтобы посмотреть дату регистрации и проекты, которыми вы там занимались.

Из других преимуществ:

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

За статическим сайтом не нужно следить,а значит не нужно отслеживать версионность CMS и другого ПО, которое легче взломать.

Возможность деплоя через Git. Благодаря тому, что это децентрализованная система, всегда есть резервная локальная версия сайта. 

Так как же добавить сайт на GitHub, украсив им своё портфолио? Сейчас расскажем. 

github pages что это

Инструкция: как сделать сайт на GitHub Pages с нуля

Шаг 1. Создаём новый репозиторий

Репозиторий — место, где будет «жить» ваш проект. Здесь вы сможете создать структуру проекта и хранить нужные для него файлы: наборы данных, фотографии, видео и так далее. 

Для создания репозитория заходим на официальный сайт и заходим в созданный аккаунт. 

Далее в блоке «Your repositories» нажимаем кнопку «New repository», чтобы создать новый репозиторий. Ему можно задать имя в формате «login.github.io», где login — это ваш ник на ресурсе.

Также можете дать ему краткое описание. После отметьте галочкой «Initialize this repository with a README» и нажмите «Create repository».

Шаг 2. Настраиваем сайт

Перед нами открывается такое окно:

В верхней панели нажимаем на правую кнопку «Settings». Прокручиваем вниз до раздела «GitHub Pages». Открываем выпадающее меню и меняем значение с «None» на «branch: Main».

После нажимаем на кнопку «Save». Перед вами появится синее поле, на котором будет отображена ссылка на ваш сайт. 

И…это всё — ваш сайт готов:

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

Шаг 3. Редактируем страницу

Как же залить сайт на GitHub? Чтобы внести изменения для файла, возвращаемся из вкладки «Setting» во вкладку «Code».

И здесь начинается ваше творчество — подкорректируйте README и добавьте туда все, что сочтете нужным. Вы также можете залить уже сделанный вами сайт, нажав на кнопку «Add file». Или попробовать создать сайт с нуля. Для этого кликните по иконке с карандашом и начните изменять README.

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

В качестве примера давайте напишем приветствие и добавим простую картинку:

И не забывайте, что при добавлении изображений в файл README, вы должны обязательно загружать их в репозиторий, чтобы GitHub не поймет, о чём речь.

Теперь прокручиваем страницу вниз и нажимаем на зелёную кнопку «Commit changes». 

Вы можете перейти по вашей ссылке, чтобы оценить результат, или увидеть его в предпросмотре во вкладке «Code». Вот, что получилось у нас:

Шаг 4. Привязываем домен

Чтобы подключить свой домен к проекту на GitHub Page, нужно снова открыть настройки и перейти в раздел «GitHub Pages».

Здесь всё просто. Если у вас уже есть доменное имя для проекта, вставьте его в строку свой адрес и нажмите «Save».

Если же домена нет, нужно зарегистрировать его и вернуться к шагу выше ;). Сделать это можно в REG.RU. Не забывайте, что домен правильно подобранное доменное имя влияет по меньшей мере на три показателя:

  • запомнят ли пользователи название вашего сайта;
  • как быстро найдут его в интернете;
  • будет ли сайт «в топе» в поисковых системах.

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

Шаг 5 (опциональный). Добавляем тему

С учетом, что это заняло буквально пару минут времени, выглядит уже хорошо, но даже такую простую страницу можно сделать лучше :). 

Если вы совершенно не разбираетесь в CSS, но хотите красивый сайт — воспользуйтесь встроенными темами Jekyll. Они помогут изменить внешний вид страницы без каких-либо усилий — нужно только нажать на пару кнопок. 

Для этого возвращаемся в раздел настроек на верхней панели («Settings»), снова переходим в раздел «GitHub Pages» и нажимаем «Choose a theme». Перед вами открывается несколько доступных тем.

Выберите понравившуюся и кликните на зелёную кнопку «Select theme». Не пугайтесь, если тема не обновляется сразу — подождите пару минут и ещё раз откройте свой сайт.

Вот и всё! Вот так быстро и просто можно создать статичный сайт и разместить его в GitHub-репозитории.

⌘⌘⌘

Надеемся, что наша пошаговая инструкция помогла вам разобраться с сервисом GitHub Pages. Обязательно поделитесь в комментариях отзывом о GitHub Pages и бесплатном хостинге от GitHub.

И, конечно же, регистрируйте красивые и лаконичные доменные имена для ваших проектов. 

Собственный магазин или маркетплейс: где выгоднее продавать?

58% всех интернет-заказов в 2023 году совершили на маркетплейсах.  Популярность маркетплейсов активно растет. При этом рост количества продавцов снижается: в...
Read More

SEO для бизнеса: поисковики — тоже реклама

Что такое SEO-оптимизация, как она приносит выгоду собственному бизнесу и как ее настроить — в блоге Рег.ру
Read More

Какие показатели нужно отслеживать новому бизнесу? 10 главных метрик

Полный список финансовых показателей, которые нужно учитывать при запуске и развитии бизнеса. С формулами, комментариями и понятными примерами расчета. (далее…)
Read More

Драма Microsoft и Apple: от вражды до сотрудничества

Техногиганты всё время своего существования судились, обменивались колкостями и пытались обогнать друг друга по уровню новаторства в разработках. Наши коллеги...
Read More

Как компании меняли свой бренд из-за испорченной репутации: три кейса

В бизнесе нет страховки от ошибок — любой промах отражается на репутации. И иногда исправить ситуацию может только ребрендинг и...
Read More

Запускаем email-рассылку: как не попасть в спам при отправке писем

В статье рассказываем, почему рассылки попадают в спам, и делимся советами, как сделать так, чтобы письма всегда доставлялись до адресатов....
Read More

Ключ к успешному продвижению: что такое SMM-стратегия и как ее составить

Разберем, что такое SMM-стратегия, зачем она нужна и как эффективно использовать социальные сети для решения бизнес-задач. (далее…)
Read More

Новогодний маркетинг: лучшие приемы праздничной рекламы

Для бизнеса Новый год и Рождество — время всплеска продаж и увеличения прибыли. А способствуют этому всем знакомые персонажи: от...
Read More

Россияне предпочитают .ru вместо .com, а Дональд Трамп проиграл доменный спор за mar-a-lago.com

Рассказываем самые интересные новости доменного мира. (далее…)
Read More

Прокрастинация: что такое, виды и как бороться

Прокрастинатор полон идей и амбиций, но ему часто не хватает самодисциплины и силы воли, чтобы начать действовать. Что заставляет нас...
Read More