GitHub как хостинг для сайтов

Проекты бывают разного типа, это сложные системы с базами данных,  сервисы, разнообразные API. Так же есть простенькие, которые предполагают всего лишь несколько статичных страничек, например сайты визитки или портфолио. Для таких проектов можно не покупать виртуальный хостинг или VPS, просто за ненадобностью, ведь их можно просто выложить на замечательный сервис GitHub Pages. Об этом сейчас и пойдет речь.

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

Зарегистрироваться на GitHub

Думаю этот шаг объяснять не нужно, тут всё довольно просто, переходите на сайт, регистрируетесь подтверждаете аккаунт и т.д. От себя могу добавить что лучше для каждого сайта создавать новый аккаунт, так как сервис требует создать репозиторий с названием username.github.io, где username это название вашего аккаунта на GitHub.

Создать новый репозиторий

1) Нужно добавить новый репозиторий в своем аккаунте GitHub. Для этого щёлкаем на плюсик в правом верхнем углу и выбираем new repository.

Создать новый репозиторий GitHub
Создать новый репозиторий GitHub

2) Вводим название нового репозитория. Как уже говорилось выше, вида username.github.io, где username это название вашего аккаунта на GitHub. В моём случае это sizovilya.github.io. Далее нажимаем кнопку Create repository.

Вводим название нового репозитория
Вводим название нового репозитория

3) Инициируем git в новой папке на своей машине. Конечно же сам git должен быть уже установлен. Для этого просто выполняем инструкции которые появились на экране:

Инструкции
Инструкции

В двух словах всё таки распишу. Создаём новую папку в удобном месте, я сейчас пользуюсь ОС Windows, поэтому просто создам новую папку на диске C, назову её sneg. Если вы пользуетесь другой ОС, то я думаю что вы без труда сможете создать новую папку и объяснять это не нужно. Далее переходим в эту папку с помощью консоли или терминала, для этого вводим команду:

 

переходим в папку
переходим в папку

Далее иницализируем git в папке, для этого вводим команду:

git init

 

Теперь копируем файлы нашего сайта(html странички) в эту папку, после этого, когда файлы уже в папке, добавляем их под контроль версий командой:

Проверяем что файлы добавлены под контроль версий командой:

 

Файлы под контролем версий
Файлы под контролем версий

Далее коммитим наш сайт в созданный на GitHub репозиторий, используя следующие команды(естественно нужно заменить ссылку на мой репозиторий ссылкой на ваш):

После последней команды вас попросят ввести в терминал логин и пароль, нужно ввести данные для входа на GitHub. Итак, ваш статический сайт-визитка уже на GitHub! Можете проверить, перейдя в свой репозиторий, в моём случае это https://github.com/sizovilya/sizovilya.github.io .

готовый репозиторий с файлами сайта на GitHub
готовый репозиторий с файлами сайта на GitHub

 Испытать чудо и почувствовать магию

Сайт стал доступен по ссылке username.github.io ! Просто перейдите по ней, в моём случае это http://sizovilya.github.io/ . Магия! Если не верите, скрин в подтверждение:

Сайт который хостится на GitHub Pages
Сайт который хостится на GitHub Pages

 

Вот собственно и всё! Теперь вы знаете как использовать преимущества бесплатного хостинга GitHub Pages. В следующей статье я расскажу как прикрепить домен к сайту на GitHub на примере Reg.ru. Хотя инструкция подойдёт для любого сервиса регистрации доменов. И да, надеюсь вы поняли что использовать GitHub как хостинг для сайтов очень просто!

Также можно почитать:

  • Pingback: Как добавить домен к GitHub Pages - Сизов Илья()

  • Yuri Drabik

    Не думал, что все так просто 🙂 Спасибо!

  • Саша Черных

    Спасибо большое!
    Раз уж на то пошло, также подробно расписали бы, как неопытным пользователям Git Large File Storage начать пользоваться 🙂 .

  • Саша Черных

    Спасибо большое!
    Раз уж на то пошло, также подробно расписали бы, как новичкам Git Large File Storage начать пользоваться 🙂 .

  • Сергей Бабаев

    Спасибо вам огромное! Сто раз перечитывал статью на git pages, постоянно упускал момент что нужно просто новый аккаунт под проект создавать.

    • Ринат

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

      • Сергей Бабаев

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

        P.S Я так понимаю это потому что, раз ты целый сайт запилил и готов его выложить, не поленись и аккаунт под него сделать,

  • Максим Газевич

    Спасибо огромное!!!

  • Максим Газевич

    Как обновить файлы ? После первой строки (немного изменил)
    git commit -m «second commit»
    у меня пишет про изменеия, и в конце no changes added to commit
    Вопш я хз, помоите

    • Ann Darina

      та же самая проблема. скажите, вы нашли решение?

      • наверно уже не актуально но все же попробуйте через
        git commit -a -m»commit»
        с элементом ( -а ) если пишет что нет изменений для коммита то с ключом должно все выбрать.

  • Kostya Netrebenko

    Илья, извините за глупый вопрос. Что посоветуете если хочется залить несколько простых сайтов, но не плодить аккаунты?

    • Ivan Enzhaev

      Я так понимаю, что у github один аккаунт — одно доменное имя. Но можно создавать папки для каждого сайта «flowers», «cars». А в каждой такой папке будет файл index.html. Тогда можно давать ссылку, не указывая index.html, а так: http://www.username.github.io/flowers или http://www.username.github.io/cars Так пойдёт?

      • Kostya Netrebenko

        Спасибо, Иван, я так и поступил)

      • Иван, и что по этим ссылкам, можно привязать настоящие домены?

  • Инна

    Когда пишу в к.строке «git init» — пишет «»git» не является внутренней или внешней
    командой, исполняемой программой или пакетным файлом.»

    • Инна

      Вопрос отпал. Другой вопрос — адблок ссылки блокирует на будущем сайте (внутри него).

  • Александр Шилович

    Спасибо огромное! Яснее и подробнее всех видосов! Для самых слабых вообще АГОНЬ получилось. Молодцом!

  • Danil Sizov

    Мне кажется gitlab в этих целях удобнее

  • Просто и понятно, спасибо!

  • OlegKV

    Не подскажите, могу ли я использовать подобный сайт как адрес для настройки webhook для telegram бота, при условии, что я оформлю сертификат ssl?

  • Как вносить изменения на сайт?

    • Просто комитить обновленные файлы на github, либо редактировать прямо через интерфейс гитхаба.

  • Dominick Burman

    >Для самых слабых вообще АГОНЬ получилось.
    Для совсем новичков можно мобирайз попробывать — у него есть опция залить сайт на гитхаб, вообще без команд и коммитов.
    https://uploads.disquscdn.com/images/0564afb9ea5bb21b33a44930ec10e03de3474a1c8ae1564b7d1455fcea9908ab.png

    https://mobirise.com/help/github-pages-tutorial-301.html