Vercel — це hosting-платформа що спеціалізується на frontend-проектах. Безкоштовний план покриває 99% особистих і портфоліо-проектів. Найголовніша перевага: деплой займає буквально 3 хвилини після першого налаштування.
Що ви отримуєте з Vercel безкоштовно
- Живий URL для кожного деплою (vercel.app піддомен)
- Автоматичний деплой при кожному пуші в GitHub
- Preview URL для кожного Pull Request
- HTTPS автоматично (не треба налаштовувати сертифікат)
- CDN — сайт завантажується швидко з будь-якої точки світу
- Підключення власного домену
Крок 1: Підготуйте проект
У вас має бути React-проект з Vite (або Next.js, Astro, Nuxt — Vercel підтримує все). Переконайтеся що npm run build відпрацьовує без помилок. Ця команда генерує папку dist/ з оптимізованою версією сайту.
Крок 2: Завантажте на GitHub
Якщо проект ще не на GitHub:
- Створіть новий репозиторій на github.com
- У папці проекту:
git init→git add .→git commit -m "Initial commit" - Зв'яжіть з GitHub і запушіть:
git remote add origin YOUR_URL→git push -u origin main
Крок 3: Підключіть Vercel
- Зайдіть на vercel.com → "Sign up" через GitHub-акаунт
- Натисніть "Add New Project"
- Знайдіть ваш репозиторій у списку і натисніть "Import"
- Vercel автоматично визначить що це Vite-проект і налаштує команди build
- Натисніть "Deploy"
Через 60–90 секунд — ваш сайт живий на yourproject.vercel.app.
Магія CI/CD: тепер при кожному git push Vercel автоматично перебудовує і деплоїть сайт. Пушнули зміни — через 2 хвилини живий сайт оновлений. Без жодних ручних дій.
Підключення власного домену
У налаштуваннях проекту на Vercel → Domains → Add Domain. Введіть ваш домен (наприклад, myportfolio.com). Vercel покаже DNS-записи які потрібно додати у вашому реєстраторі домену (GoDaddy, Namecheap, Ukraine.com.ua тощо). Після додавання DNS-записів — HTTPS налаштується автоматично протягом декількох хвилин.
Environment Variables: якщо потрібні секрети
Якщо проект використовує API-ключі або інші секрети — ніколи не хардкодьте їх у код. Vercel має вбудований менеджер Environment Variables: Settings → Environment Variables. Змінні доступні в коді через import.meta.env.VITE_MY_KEY (для Vite) — але не потрапляють у GitHub.
Preview deploys: показуйте роботу до мерджу
Кожен Pull Request на GitHub автоматично отримує унікальний preview URL від Vercel. Ідеально для: показу клієнту нової фічі до випуску, QA від команди, ревʼю від дизайнера без доступу до коду.
Перший деплой на Vercel — це момент коли "я вчуся кодити" перетворюється на "ось посилання, дивіться". І це відчуття варте того.