Як налаштувати сайт за допомогою GitHub і Cloudflare: ілюстроване керівництво


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Ця стаття буде для Вас корисною, якщо Ви:

  • хочете налаштувати переадресацію та інші серверні функції безкоштовно;
  • збираєтеся використати протокол HTTPS, але не знаєте, що треба робити;
  • сумніваєтеся у виборі інструмента для налаштування сайту.

 

Вступ

Чому саме GitHub?

  • за допомогою GitHub Pages легко налаштувати сайт;
  • GitHub миттєво реагує на зміни коду.

Чому саме Cloudflare?

  • сервіс безкоштовний;
  • він поставляється з підтримкою SSL (HTTPS);
  • дуже просто управляти DNS;
  • є можливість установки розширення для контролю за кешем браузера;
  • автоматично скорочує трафік;
  • завжди можна налаштувати переадресацію;
  • є HTTP2/SPDY для підтримуваних браузерів;
  • дозволяє налаштувати HSTS (HTTP Strict Transport Security).

Що знадобиться перед початком роботи?

  • акаунт в Github;
  • акаунт в Cloudflare;
  • доступ до користувацького домена – його Ви можете придбати в таких реєстраторах, як Namecheap, GoDaddy, BigRock і т. д.

Якщо все готово, то давайте приступимо!

Покроковий план-шпаргалка

  1. Створити репозиторій на Github.
  2. Налаштувати GitHub Pages для репозиторія.
  3. Додати власний домен.
  4. Налаштувати домен у Cloudflare.
  5. Налаштувати записи DNS для Вашого домена.
  6. Вибрати безкоштовний план у Cloudflare.
  7. Оновити імена серверів у реєстраторі.
  8. Налаштувати мініфікацію.
  9. Налаштувати термін дії кеша браузера.
  10. Налаштувати правила для сторінок.
  11. Налаштувати HSTS.

Крок 1. Створити репозиторій на Github

Перейдіть на головну сторінку GitHub Pages і виберіть опцію “Project site”, щоб знайти інструкції зі створення базової сторінки з нуля:

Крок 2. Налаштувати GitHub Pages для репозиторія

Перейдіть у налаштування для свого репозиторія (вкладка “Settings”):

У розділі “Github Pages” виберіть провідну гілку для обслуговування Вашого веб-сайту (master branch) :

Після цього можете перейти на https://<назва Вашого сайту>.github.io/repository, щоб побачити сайт у дії, як показано на зображенні нижче:

Крок 3. Додати власний домен

Додайте домен, який Ви купили, і натисніть на кнопку “Save”:

Тепер треба налаштувати Cloudflare для використання всіх приємних фішок, про які згадувалося на початку статті.

Крок 4. Налаштувати домен у Cloudflare

Залогінтесь у Cloudflare. Якщо Ви там уперше, то побачите таку ж картинку, як на зображенні нижче. Якщо Ви вже використали сервіс, то можете відразу натиснути на опцію “Add Site” в рядку навігації (вгорі праворуч), потім додати новий домен. Введіть ім’я домена, з яким працюватимете, і натисніть на “Begin Scan”:

Крок 5. Налаштувати записи DNS для Вашого домена

На цьому етапі Ви вказуєте Cloudflare на Ваший домен на GitHub, використовуючи два записи A (адресні записи, відповідність між ім’ям і IP-адресою):

  1. 192.30.252.153
  2. 192.30.252.154

Після налаштування всі запити до Вашого домена (наприклад, Ваший власний домен.com) будуть перенаправлені на Ваш сайт на GitHub, налаштований на крок 3.

І є ще дещо. Наприклад, Вам хочеться використати субдомен типу www для свого веб-сайту, тобто www.Ваший власний домен.com. Для цього Вам треба буде додати запис CNAME, який вкаже кореневому домену (@) на Ваший піддомен (www).

Примітка. Не намагайтеся відразу перейти до свого користувацького домена. Це не спрацює, адже Ви виконали тільки налаштування Cloudflare для GitHub.

Натисніть “Continue” для переходу до наступного кроку.

Крок 6. Вибрати безкоштовний план у Cloudflare

Безкоштовний план для Cloudflare надає багато опцій, які перераховані на початку статті. Виберіть план:

Натисніть “Continue”, щоб перейти до наступного кроку.

Крок 7. Оновити сервери імен у реєстратора

Після того, як Ви потрапили на цю сторінку, відкрийте її в одній вкладці, а реєстратор доменних імен (місце, де Ви купили свій домен) – в іншій.

Тепер Вам треба замінити наявні сервери імен (nameservers) у налаштуваннях Вашого домена на сторінку реєстратора тими, що показує Cloudflare. Ось приклад того, як реєстратор поводиться після успішної заміни:

Чудово! Ви майже налаштували власний домен, щоб використати Cloudflare як DNS-провайдер. Тепер якщо Ви перейдете до пункту “Overview” згори, то виявите, що сервіс все ще чекає зміни серверів імен:

Треба дочекатися, поки статус на вкладці “Overview” зміниться на “Active”:

Тепер можете спробувати зайти на свій сайт, він повинен запрацювати.

Крок 8. Налаштувати мініфікацію

У налаштуваннях швидкості (“Speed”), розділі “Auto Minify” поставте галочку для автоматичної мініфікації біля всіх пунктів: JavaScript, CSS, HTML.

Ці налаштування застосовуються Cloudflare “на льоту” один раз, а потім кешуются. Щоразу, коли будь-яке з Ваших особистих налаштувань змінюватиметься, Cloudflare все кешуватиме.

Перевага мініфікації полягає в тому, що розмір вихідного коду істотно зменшиться, оскільки Cloudflare видалить усі непотрібні пропуски і коментарі.

Крок 9. Налаштувати термін дії кеша браузера

Якщо Ви прокрутите вниз ту саму сторінку, де знаходиться “Auto Minify”, то знайдете розділ “Browser Cache Expiration”. В ідеалі термін дії має бути встановлений на 30 днів / 1 місяць, щоб WebpageTest не видавав ніяких попереджень:

Цей час показує, що після завантаження Вашого сайту в будь-якому браузері останній не проситиме дані вдруге, поки період кешування не сплине.

До того як виконати наступний крок, перевірте криптографічні налаштування (“Crypto”) на Cloudflare. У розділі SSL повинен з’явитися зелений напис “Active Certificate”:

Примітка: Спробуйте перезавантажити сторінку, іноді вона не оновлюється.

Далі треба налаштувати постійне використання HTTPS на Вашому сайті. Щоб все працювало без проблем, знадобиться активний сертифікат на Cloudflare.

Крок 10. Налаштувати правила для сторінок

На цьому кроці Ви зробите дві важливі речі:

  • переадресацію всіх запитів з www.Ваший власний домен.com на Ваший власний домен.com;
  • переадресацію всіх запитів з http://Ваший власний домен.com на https://Ваший власний домен.com.

Зайдіть у вкладку “Page Rules” і натисніть на “Create Page Rule”:

Для обробки переадресації з www.Ваший власний домен.com на Ваший власний домен.com замініть tweetify.io на картинці нижче на Ваший власний домен.com. Натисніть “Save and Deploy”:

Для обробки переадресації з http:/www.Ваший власний домен.com на https:/Ваший власний домен.com, замініть tweetify.io на Ваший власний домен.com. Натисніть “Save and Deploy”:

Нагадаємо, що у березні цього року популярність протоколу HTTPS підвищилась: частка HTTPS-запитів перетнула позначку в 50 %, а число сайтів, що використовують цей протокол, за останній рік подвоїлося. Використання HTTPS – це норма, а не виняток, тому радимо не нехтувати необхідними налаштуваннями.

Крок 11. Налаштувати HSTS

Тепер треба знову зайти в криптографічні налаштування (“Crypto”), після чого прокрутити сторінку вниз до “HTTP Strict Transport Security (HSTS) “. Кликніть “Enable HSTS”. Вас запитають про те, чи точно Ви знаєте, що робите. До того як Ви натиснете на “I understand”, прочитайте, навіщо нам взагалі вмикати HSTS.

Якщо користувач раніше вже відкривав Ваш сайт, то тепер він завжди автоматично прямуватиме на HTTPS- версію сайту. Це прискорює завантаження сайту при подальших відвідуваннях, оскільки перенаправлення з HTTP на HTTPS відбувається на клієнтській стороні, а не за допомогою правила в Cloudflare, яке ми створили на попередньому кроці.

Залишилося активувати ті самі опції, що й на скриншоті:

Такі заголовки Cloudflare додаватиме до запитів до Вашого домена після того, як Ви налаштували HSTS:

От і все, сайт готовий.

Переклад статті “An illustrated guide to setting up your website using GitHub and Cloudflare”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *