Как сделать свой сайт с GitHub Pages
В одной из прошлых заметок я рассказывала о том, какие интересные подарки можно сделать с доменом. Один из них — свой сайт. Не всегда есть силы и желание настраивать хостинг, поэтому если нужен простой статический сайт или блог, к которому можно подобрать хорошие шаблоны, советую попробовать GitHub Pages.
Для начала зарегистрируйтесь на сайте http://github.com. Это бесплатно. Чтобы было удобней работать с будущим сайтом, поставьте себе приложение GitHub для Mac или GitHub для Windows. Если вы умеете работать с репозиториями из терминала, можете ничего не ставить.
- Создайте в своем аккаунте на GitHub репозиторий с именем username.github.io, где username — это ваш юзернейм на GitHub (если они не будут совпадать, то сайт не будет работать).
-
После того, как вы создали репозиторий, клонируйте его из своего аккаунта себе на компьютер — это не так сложно, как звучит :) Фактически у вас на компьютере появится папка, в которой будут храниться копии страниц сайта.
Для этого нажмите кнопку Set up in Desktop, и у вас откроется приложение GitHub. Оно спросит, куда и под каким именем клонировать репозиторий.
- Откройте любимый текстовый редактор и создайте в папке репозитория файл с именем index.html и с таким содержанием:
<!DOCTYPE html><html>
<body>
<h1>Hello World</h1>
<p>My website on GitHub Pages. It works!</p>
</body>
</html>
Сохраните файл.
- Теперь нужно залить изменения на сервер. Откройте приложение GitHub, найдите там свой репозиторий, нажмите Commit и Sync (или Publish).
- Готово. Теперь зайдите на свой сайт http://username.github.io.
У GitHub Pages есть свои простые маркдаун-страницы для сайтов, но можно поискать красивые бесплатные шаблоны других фреймворков, например, для Bootstrap.
Свой домен на GitHub Pages
Не всегда хочется давать ссылку на свой сайт в виде http://username.github.io, поэтому советую направить его на красивый личный домен. Для начала зарегистрируйте домен, если его у вас еще нет :)
Для того чтобы направить свой домен на сайт в GitHub Pages, нужно указать этот домен в файле CNAME в репозитории GitHub и правильно настроить DNS-записи самого домена.
Сделаем все по порядку.
Файл CNAME в репозитории
- Зайдите в репозиторий своего проекта на сайте GitHub.
- Создайте в корне репозитория файл с названием CNAME (имя большими буквами).
- Добавьте в первую строку файла имя своего домена или поддомена без http://. Например, blog.example.com или bestblog.co.ua. В этом файле может быть только один домен.
- Нажмите Commit changes внизу страницы.
Теперь проверим, все ли правильно получилось настроить. Зайдите в свой репозиторий и нажмите на Settings в правой панели сайта.
В разделе GitHub Pages вы должны увидеть такую строчку: Your site is published at http://blog.example.com.
Настройка 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, настройте его согласно инструкции.
Если у вас возникнут дополнительные вопросы или сложности с настройкой, пишите нам в поддержку.
