Netlify

Зачем нужно

Netlify — платформа для деплоя статических сайтов и JAMstack-приложений. Подключаешь GitHub → push → сайт обновлён. Бесплатный план включает 100 GB bandwidth, формы, редиректы и preview deploys. Отлично подходит для лендингов, портфолио и SPA.

Где используется

  • Статические сайты — HTML/CSS/JS, Gatsby, Hugo, 11ty
  • SPA — React, Vue, Angular, Svelte
  • Портфолио — персональный сайт разработчика
  • Документация — сайты с документацией
  • RS School — деплой учебных проектов

Static Site Deployment

Подключение GitHub

  1. Зайди на netlify.com → Sign up with GitHub
  2. Add new site → Import from Git → GitHub
  3. Выбери репозиторий
  4. Настрой Build settings:
Branch to deploy: main
Build command:    npm run build
Publish directory: dist
  1. Deploy site → готово!

Drag & Drop деплой

Для быстрого деплоя — просто перетащи папку dist/ на дашборд Netlify.

Netlify CLI

# Установка
npm i -g netlify-cli

# Логин
netlify login

# Инициализация проекта
netlify init

# Деплой preview
netlify deploy --dir=dist

# Деплой в production
netlify deploy --dir=dist --prod

# Локальная разработка
netlify dev

Forms — формы без бэкенда

Netlify автоматически обрабатывает HTML-формы.

<!-- Добавь атрибут netlify к форме -->
<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />

  <label>Имя: <input type="text" name="name" required /></label>
  <label>Email: <input type="email" name="email" required /></label>
  <label>Сообщение: <textarea name="message" required></textarea></label>

  <button type="submit">Отправить</button>
</form>

<!-- Для SPA (React/Vue) добавь скрытую форму в index.html -->
<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>

// React-компонент формы
function ContactForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams(formData).toString(),
    })
      .then( => alert('Отправлено!'))
      .catch((error) => alert(error));
  };

  return (
    <form name="contact" method="POST" data-netlify="true" onSubmit={handleSubmit}>
      <input type="hidden" name="form-name" value="contact" />
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Отправить</button>
    </form>
  );
}

Ответы форм: Site Dashboard → Forms → выбрать форму.

Redirects и Rewrites

Файл _redirects

# Поместить в public/ или корень publish directory

# Редирект
/old-page    /new-page    301

# Rewrite (для SPA — все роуты на index.html)
/*    /index.html    200

# Проксирование API
/api/*    https://api.example.com/:splat    200

# Редирект по стране
/    /ru/    302    Country=ru

Файл netlify.toml

# netlify.toml — в корне проекта

[build]
  command = "npm run build"
  publish = "dist"

# Редиректы
[[Роутинг]]
  from = "/api/*"
  to = "https://api.example.com/:splat"
  status = 200

[[Роутинг]]
  from = "/*"
  to = "/index.html"
  status = 200

# Заголовки
[[headers]]
  for = "/api/*"
  [headers.values()]
    Access-Control-Allow-Origin = "*"

# Environment-специфичные настройки
[context.production]
  environment = { NODE_ENV = "production" }

[context.deploy-preview]
  environment = { NODE_ENV = "staging" }

Plugins

# netlify.toml

# Плагин для кэширования
[[Webpack plugins]]
  package = "netlify-plugin-cache"
  [plugins.inputs]
    paths = ["node_modules"]

# Плагин для проверки ссылок
[[Webpack plugins]]
  package = "@netlify/plugin-lighthouse"

Популярные плагины:

  • Lighthouse — аудит производительности при каждом деплое
  • Sitemap — автогенерация sitemap.xml
  • Cache — кэширование между билдами
  • Checklinks — проверка битых ссылок

Build Settings

Через Dashboard

Site Settings → Build & deploy:

Repository:       github.com/user/project
Branch:           main
Build command:    npm run build
Publish dir:      dist

Через netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"
  NPM_VERSION = "10"

# Отдельный build для веток
[context.staging]
  command = "npm run build:staging"

[context.deploy-preview]
  command = "npm run build:preview"

Environment Variables

Dashboard → Site Settings → Environment Variables:

VITE_API_URL = https://api.example.com
VITE_GA_ID = G-XXXXX
NODE_VERSION = 20

Preview Deployments

Каждый PR получает уникальный URL:

PR #15: feature/about-page
→ https://deploy-preview-15--my-site.netlify.app

Netlify добавляет статус-чек и комментарий в PR.

Custom Domain

  1. Domain Settings → Add custom domain
  2. Добавь DNS-записи:
Type    Host    Value
A       @       75.2.60.5
CNAME   www     my-site.netlify.app
  1. Netlify автоматически выпустит SSL-сертификат (Let's Encrypt)

Частые ошибки

Ошибка Проблема Решение
404 на SPA-роутах Нет rewrite правила Добавь /* /index.html 200 в _redirects
Build fails Разные версии Node Укажи NODE_VERSION в env
Формы не работают Нет атрибута data-netlify Добавь атрибут + hidden form для SPA
_redirects не работает Файл не в publish dir Положи в public/ или настрой копирование
Долгий build Нет кэширования Используй cache-плагин

Практика

  1. Задеплой статический сайт на Netlify из GitHub
  2. Добавь контактную форму с data-netlify
  3. Настрой SPA-redirect через _redirects
  4. Создай netlify.toml с настройками сборки
  5. Подключи кастомный домен и проверь HTTPS

Связанные темы

Ресурсы