Як захостити свій сайт

🤔 Що таке хостинг?

Хостинг — це сервер (потужний комп'ютер), який працює 24/7 і показує твій сайт всьому світу. Коли хтось вводить адресу сайту — сервер відправляє йому файли.

🦉

Кудик пояснює:

Уяви, що хостинг — це квартира для сайту. Поки файли на твоєму комп'ютері — їх бачиш тільки ти. А на хостингу — весь світ!

🔄 Як це працює?

👤

Користувач

→

🌐

Браузер

→

📖

DNS

→

🖥️

Сервер

→

✨

Твій сайт!

🏠

Статичний хостинг

Для HTML, CSS, JS файлів. Безкоштовно та просто!

⚙️

Серверний хостинг

Для Node.js, Python, бази даних. Потужніше!

☁️

Хмарний хостинг

AWS, Google Cloud. Для великих проєктів.

🎬 Як відбувається деплой?

Натисни кнопку і подивись як твій код потрапляє в інтернет!

💻

Твій код

→

📦

git push

→

🔨

Build

→

🌐

Deploy!

→

🎉

Онлайн!

🏆 Топ платформ для хостингу

Ось найкращі безкоштовні платформи для початківців:

▲

Vercel

Найкращий для React, Next.js, Vue

Рекомендуємо!

1

Зареєструйся на vercel.com

Увійди через GitHub — це найпростіше!

2

Натисни "Add New Project"

Вибери свій GitHub репозиторій зі списку

3

Натисни "Deploy"

Vercel сам визначить фреймворк і налаштує все!

✓

Готово! Сайт онлайн!

Отримай URL типу my-project.vercel.app

Terminal — Vercel CLI

$npm i -g vercel

$vercel

? Set up and deploy? [Y/n] y

? Which scope? my-account

? Link to existing project? [y/N] n

🔗 Production: https://my-site.vercel.app

✅ Deployed!

✅ Безкоштовно ✅ Auto-deploy з GitHub ✅ HTTPS безкоштовно ✅ Serverless Functions

🔷

Netlify

Drag & Drop деплой!

1

Зайди на netlify.com

Зареєструйся через GitHub

2

Перетягни папку з проєктом

Просто перетягни папку прямо в браузер! Drag & Drop!

✓

Сайт готовий!

URL: my-project.netlify.app

🤯

Drag & Drop — це магія!

Netlify — єдина платформа де можна просто перетягнути папку з файлами і отримати живий сайт за 10 секунд. Ніяких команд!

✅ Drag & Drop ✅ Форми безкоштовно ✅ HTTPS ✅ Edge Functions

🐙

GitHub Pages

Безкоштовно назавжди від GitHub

Terminal — GitHub Pages

$git init

$git add .

$git commit -m "my first site"

$git remote add origin https://github.com/user/repo.git

$git push -u origin main

Потім: Settings → Pages → Branch: main → Save

✅ https://user.github.io/repo

💡

Назви репозиторій username.github.io

Якщо назвати репо username.github.io — отримаєш красиву URL без назви проєкту!

✅ 100% безкоштовно ✅ Прямо з GitHub ⚠️ Тільки статичні сайти

🔥

Firebase Hosting

Хостинг + БД + Auth від Google

Terminal — Firebase CLI

$npm install -g firebase-tools

$firebase login

✅ Logged in as user@gmail.com

$firebase init hosting

? What do you want to use as your public directory? public

$firebase deploy

✅ https://my-project.web.app

✅ CDN від Google ✅ БД Firestore ✅ Auth ✅ Cloud Functions

📊 Порівняння платформ

Яка платформа підходить саме тобі?

Параметр	▲ Vercel	🔷 Netlify	🐙 GitHub Pages	🔥 Firebase
Ціна	Безкоштовно	Безкоштовно	Безкоштовно	Безкоштовно
Drag & Drop	Ні	Так!	Ні	Ні
Auto-deploy	Так	Так	Так	Ні
Serverless	Так	Так	Ні	Так
Свій домен	Так	Так	Так	Так
HTTPS	Авто	Авто	Авто	Авто
Найкраще для	⭐ React, Next.js	⭐ Статичні сайти	⭐ Портфоліо	⭐ Full-stack

🏎️ Швидкість деплою

Натисни кнопку і подивись хто швидше!

Vercel

95%

🥇

Netlify

88%

🥈

Firebase

82%

🥉

GH Pages

70%

🏅

🌐 Домени та DNS

Домен — це адреса твого сайту в інтернеті. Наведи мишку на частини URL:

https://

www.

mysite

.com

👆 Наведи мишку на частини URL

🏷️ Популярні доменні зони

.com

Комерційний

Найпопулярніший. ~$10/рік

.dev

Для розробників

Стильний вибір! ~$12/рік

.ua

Україна

Для українських проєктів. ~$5/рік

.io

Tech / Стартап

Популярний серед стартапів. ~$30/рік

🦉

Кудик радить:

Не купуй домен одразу! Спочатку захости сайт безкоштовно (my-site.vercel.app), а коли будеш впевнений — купи гарний домен.

🔒 HTTPS та безпека

HTTPS захищає дані між браузером і сервером. Натисни на картки, щоб дізнатися більше:

🔒

Що таке HTTPS?

HTTP + SSL сертифікат = HTTPS. Всі дані шифруються і ніхто не може їх перехопити!

🆓

Де взяти?

Vercel, Netlify, Firebase дають HTTPS безкоштовно та автоматично! Нічого робити не потрібно.

⚠️

Чому важливо?

Google знижує рейтинг сайтів без HTTPS. Браузери показують попередження "Не безпечно"!

🛡️

Let's Encrypt

Безкоштовний сервіс SSL сертифікатів. Більшість хостингів використовують саме його!

👆 Натисни на картку, щоб перевернути

📁 Структура проєкту для деплою

Перед деплоєм переконайся, що твій проєкт має правильну структуру:

📁 my-awesome-site/

📄 index.html ← Головна сторінка (обов'язково!)

📄 style.css

📄 script.js

📁 images/

🖼️ logo.png

🖼️ hero.jpg

📁 pages/

📄 about.html

📄 contact.html

📄 .gitignore ← Ігнорує непотрібні файли

📄 README.md ← Опис проєкту

⚠️

Важливо!

Файл index.html повинен бути в корні проєкту! Інакше сервер не знатиме, яку сторінку показувати першою.

📝 Прикл��д .gitignore

.gitignore

# Залежності
node_modules/
# Змінні середовища (секрети!)
.env
.env.local
# Build файли
dist/
.next/
# OS файли
.DS_Store
Thumbs.db

💰 Скільки це коштує?

Вибери, що тобі потрібно, і дізнайся ціну:

💸 Калькулятор вартості

Хостинг:

Домен:

Загальна вартість на рік:

$0

Повністю безкоштовно! 🎉

✅ Чеклист перед деплоєм

Пройди по кожному пункту перед тим, як публікувати сайт:

index.html є в корні проєкту

Всі посилання працюють (немає 404)

Картинки оптимізовані (не більше 500KB)

Сайт добре виглядає на мобільному

.gitignore створений (node_modules, .env)

Немає секретів у коді (API ключі, паролі)

Код закомічений в Git

README.md написаний

0 / 8 готово

⚡ Швидкий старт за 5 хвилин

Найшвидший шлях захостити свій перший сайт:

1

Створи проєкт з index.html

Напиши HTML, CSS, JS — будь-що!

2

Створи GitHub репозиторій

git init → git add . → git commit → git push

3

Зайди на vercel.com

Увійди через GitHub

4

Import Project

Вибери свій репозиторій

5

Натисни Deploy!

Через 30 секунд сайт буде онлайн! 🎉

🦉

Кудик радить:

Тепер кожен git push автоматично оновлюватиме сайт! Це називається Continuous Deployment — зміни з'являються на сайті через кілька секунд після пушу.

📊 Цікаві факти

🌍

1.9 млрд

Сайтів існує в інтернеті

⚡

30 сек

Час деплою на Vercel

🆓

$0

Мінімальна ціна хостингу

🔒

95%

Сайтів використовують HTTPS