Найлегший спосіб створити сайт

Задача

Ви хочете створити нескладний сайт. Це може бути сайт-візитка з формою зворотнього зв'язку. Зробити хочеться швидко, легко, платити за хостінг мінімум. Давайте розбиратися.

Власне сайт 15 хв

Почнемо з простого. Один файл - index.html.

Створювати інтерфейс будемо з Bootstrap і JQuery. Цих засобів нам вистачить не тільки для елементарних, але й для середньої складності веб додатків. Включаємо посилання на ці бібліотеки в наш файл.

index.html може виглядати наступним чином:

    <!DOCTYPE html>
    <html lang="uk">
    <head>
            <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
            
    </head>
    <body>
            <div class="container">
                <div class="jumbotron">
                    <h1 class="display-4">My site works!</h1>
                </div>
            </div>
    </body>
    </html>
    

Коли ми захочемо удосконалити наш сайт, він буде складатися з великої кількості файлів, виникне проблема із завантаженням файлів в браузер. Тому я рекомендую встановити простий сервер npm install -g http-server, що віддаватиме статичний контент. Запускається http-server з директорії, де знаходиться index.html. Після, просто відкриваємо localhost:8080 в браузері.

Доменне ім'я 30 хв

Ми хочемо мати красиве ім'я/домен нашого сайту який легко запам'ятовується, а не IP-адреса. Наприклад, java4beginners.com.ua.

  1. Йдемо на imena.ua або подібний сайт, не принципово.
  2. Шукаємо домен
  3. Оплачуємо
  4. Вуаля! Ми власники домену!
Переходимо в налаштування. І лишаємо це місце. Ми ще сюди повернемось!

Google Cloud 30 хв

  1. Реєструємося в GCP. Отримуємо бонуси при першій реєстрації.
  2. Переходимо в Storage. Створюємо Bucket.
  3. Вводимо назву нашого домену, починаючи з www., а-ля www.my-domain.com.
  4. Стоп! Треба довести Гуглу що ви власник. Сам Гугл вам це підкаже в формі створення бакету.

Валідація Домену 1 година

  1. Переходимо на сторінку. Слідуємо інструкціям.
  2. Власне саму перевірку домену робимо на сторінці Search Console.
  3. Копіюємо код, що видасть Search Console і вставляємо в налаштування домену на сайті imena.ua.
  4. Перевіряємо. Це може зайняти певний час.
  5. Вуаля! Гугл зрозумів що ви є власником домену!

Повертаємося до Storage 40 хв

  1. Створюємо бакет. Після валідації домену Гугл не дозволить це зробити. Вибираємо найдешевші опції.
  2. Завантажуємо index.html
  3. Робимо файли доступними публічно. У вкладці Permissions Даємо права для allUsers.
  4. Налаштовуємо бакет, вказуємо дефолтну сторінку - index.html.

DNS налаштування 20 хв

  1. Повертаємося до налаштування домену в imena.ua
  2. Додаємо наступні записи. Приклад для java4beginners.com.ua :
  3. Після того як записи оновляться, ми будемо мати сайт. Оновлення DNS записів в гіршому варіанті може зайняти 24 години. В реальності 5-30 хв.

Теми що не ввійшли до статті

Якщо є тема зі списку, вам цікава - напишіть, будь-ласка, про це в коментарях!