Как сделать свой сайт с GitHub Pages

10 февраля 2016, Марина Зайцева

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

github-logo

Для начала зарегистрируйтесь на сайте http://github.com. Это бесплатно. Чтобы было удобней работать с будущим сайтом, поставьте себе приложение GitHub для Mac или GitHub для Windows. Если вы умеете работать с репозиториями из терминала, можете ничего не ставить.

  1. Создайте в своем аккаунте на GitHub репозиторий с именем username.github.io, где username — это ваш юзернейм на GitHub (если они не будут совпадать, то сайт не будет работать).

    Новый репозиторий на GitHub

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

    github-pages-infonic-set-up

    Для этого нажмите кнопку Set up in Desktop, и у вас откроется приложение GitHub. Оно спросит, куда и под каким именем клонировать репозиторий.

  3. Откройте любимый текстовый редактор и создайте в папке репозитория файл с именем index.html и с таким содержанием:
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Hello World</h1>
    <p>My website on GitHub Pages. It works!</p>
    </body>
    </html>
    

    Сохраните файл.

  4. Теперь нужно залить изменения на сервер. Откройте приложение GitHub, найдите там свой репозиторий, нажмите Commit и Sync (или Publish).

    github-pages-infonic-sync

  5. Готово. Теперь зайдите на свой сайт http://username.github.io.

У GitHub Pages есть свои простые маркдаун-страницы для сайтов, но можно поискать красивые бесплатные шаблоны других фреймворков, например, для Bootstrap.

Свой домен на GitHub Pages

Не всегда хочется давать ссылку на свой сайт в виде http://username.github.io, поэтому советую направить его на красивый личный домен. Для начала зарегистрируйте домен, если его у вас еще нет 🙂

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

Сделаем все по порядку.

Файл CNAME в репозитории

  1. Зайдите в репозиторий своего проекта на сайте GitHub.
  2. Создайте в корне репозитория файл с названием CNAME (имя большими буквами).

    github-pages-infonic-new-file

  3. Добавьте в первую строку файла имя своего домена или поддомена без http://. Например, blog.example.com или bestblog.co.ua. В этом файле может быть только один домен.

    github-pages-infonic-cname-file

  4. Нажмите Commit changes внизу страницы.

    github-pages-infonic-commit-cname

Теперь проверим, все ли правильно получилось настроить. Зайдите в свой репозиторий и нажмите на Settings в правой панели сайта.

github-pages-infonic-settings

В разделе GitHub Pages вы должны увидеть такую строчку: Your site is published at http://blog.example.com.

github-pages-infonic-domain-ok

Настройка DNS-записей для GitHub Pages на NIC.UA

Чтобы направить свой домен на GitHub Pages, зайдите в свой кабинет на NIC.UA в раздел Мои заказы → Серверы имен (NS), поставьте галочку возле нужного домена и нажмите кнопку Изменить. В DNS-записях*:

  • для основного домена типа bestblog.co.ua создайте с именем “@”, типом CNAME и укажите в данных username.github.io. (с точкой в конце), где username — это ваш юзернейм на GitHub.
  • для поддомена типа blog.example.com добавьте CNAME-запись с именем поддомена (например, “blog”) и укажите в данных username.github.io. (с точкой в конце), где username — это ваш юзернейм на GitHub.

*  если в ваших DNS-записях уже есть А-запись с именем, которое вы хотите указать в новой DNS-записи CNAME (например,“@” или “blog”), сперва нужно удалить существующую А-запись.

Если ваш домен ещё не обслуживают серверами имён NIC.UA, настройте его согласно инструкции.

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

Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

  • Евгений Поляков

    Ну наконец то, рассказали как использовать github в роли хранилища и подключить домен. Очень полезно! Спасибо большое

  • А там выполняется PHP? И как быть с MySQL?

  • PHP? О чем это вы — github STATIC pages. STATIC pages generator: https://www.staticgen.com/

  • Спасибо

  • Спасибо за ваш отзыв!

  • Aleksandr Sid’ko

    Ну почему нельзя было заскринить и выложить вашу настройку DNS-записей? Это же самое важное в статье.

  • Sergiy Antonyuk

    Полезная статья: все четко описано и, главное, все работает.
    Спасибо автору

  • БлагоДарю

Подпишитесь на новости: