Як зробити свій сайт з 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, налаштуйте його згідно інструкції.
Якщо у вас виникнуть додаткові питання чи складності з налаштуванням, пишіть нам на підтримку.
