Настройка пайплайнов для статики: Hugo, Jekyll, Next.js

Настройка пайплайнов для статики: Hugo, Jekyll, Next.js

После деплоя статического сайта в S3 пользователи получают 404 на Next.js маршрутах, а кеш CloudFront показывает устаревший контент. Это типичные последствия неверной конфигурации CI/CD: отсутствие инвалидации, неправильные Cache-Control, неучтённые особенности генераторов. За годы настройки пайплайнов для Hugo, Jekyll и Next.js Export мы выработали схемы, которые гарантированно работают: без сюрпризов с кешем, с автодеплоем и preview-окружениями. Один клиент сократил расходы на CloudFront на 35% после внедрения нашей схемы кеширования — экономия около $200 в месяц. Среднее время сборки Hugo на 2000 страниц — 5 секунд, Jekyll без кеша — 3 минуты, с кешем — 5 секунд. Ниже — как мы это делаем и что входит в работу.

Проблемы CI/CD для статики

Инвалидация CDN-кеша. Вы залили новый файл в S3, а пользователи видят старую версию. Без create-invalidation CloudFront кеширует HTML на часы. Мы используем двухпроходный s3 sync с разными Cache-Control: для статики — max-age=31536000, для HTML — no-cache. Это сокращает количество инвалидаций и расходы.

Next.js Export без конфигурации. next export не поддерживает getServerSideProps, API routes и Image Optimization. Если у вас есть динамические маршруты, нужно либо переходить на ISR, либо настраивать output: 'export' с trailingSlash: true и unoptimized: true. Иначе сборка упадёт.

Медленная сборка Jekyll. Без кеша bundle install тянет гемы 2–3 минуты. Включаем bundler-cache: true — время падает до 5 секунд. Это типичная ошибка начинающих.

Как мы проектируем пайплайн

Для каждого проекта — свой конфиг, но общий шаблон:

• Сборка: фиксированная версия генератора (Hugo extended, Ruby 3, Node 20).
• Оптимизация: минификация, сжатие, content hash в именах.
• Деплой: rsync через S3 или прямая загрузка на Cloudflare Pages / Netlify.
• Инвалидация: CloudFront, либо автоматическая на Netlify/Cloudflare.
• Preview: для PR — временный URL.

Кейс: Hugo + S3 + CloudFront. Используем peaceiris/actions-hugo с extended режимом для SCSS. Сборка 5 секунд на 2000 страниц. Деплой двумя aws s3 sync — для статики и HTML отдельно. После — инвалидация корня (/*). Для preview — отдельный префикс s3://bucket/previews/PR-42/.

- uses: peaceiris/actions-hugo@v3
  with:
    hugo-version: '0.124.0'
    extended: true
- name: Build
  run: hugo --minify --baseURL "https://example.com"
- name: Deploy to S3
  run: |
    aws s3 sync public/ s3://my-bucket/ \
      --delete \
      --cache-control "public, max-age=31536000" \
      --exclude "*.html" \
      --exclude "*.xml"
    aws s3 sync public/ s3://my-bucket/ \
      --delete \
      --cache-control "no-cache" \
      --include "*.html" \
      --include "*.xml"
- name: Invalidate CloudFront
  run: |
    aws cloudfront create-invalidation \
      --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
      --paths "/*"

Jekyll на GitHub Pages. Используем официальный workflow через actions/deploy-pages — не нужно пушить в gh-pages ветку. Кешируем гемы.

- uses: ruby/setup-ruby@v1
  with:
    ruby-version: '3.3'
    bundler-cache: true
- name: Build Jekyll
  run: bundle exec jekyll build --destination _site
- name: Deploy to GitHub Pages
  uses: actions/deploy-pages@v4

Next.js Export на Cloudflare Pages. Cloudflare Pages автоматически разворачивает npm ci && npm run build, но для экспорта важна конфигурация. Мы добавляем next.config.js с output: 'export' и отключаем оптимизацию изображений.

module.exports = { output: 'export', trailingSlash: true, images: { unoptimized: true } } 

- uses: actions/setup-node@v4
  with:
    node-version: '20'
    cache: 'npm'
- run: npm ci
- run: npm run build
- name: Deploy to Cloudflare Pages
  uses: cloudflare/wrangler-action@v3
  with:
    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    command: pages deploy out/ --project-name=my-site

Как выбрать платформу для хостинга?

При выборе платформы учитывайте стоимость, производительность и встроенные функции. S3 + CloudFront даёт полный контроль над кешем и CDN, но требует ручной настройки инвалидации и preview. Cloudflare Pages дешевле при больших объёмах (бесплатно до 500 сборок в месяц) и предоставляет preview из коробки. Netlify удобен для команд, но дороже. Для большинства проектов рекомендуем Cloudflare Pages из-за баланса цены и функциональности. Свяжитесь с нами для выбора оптимальной платформы под ваш проект.

Почему важна инвалидация CDN-кеша?

Без инвалидации пользователи увидят старую версию до истечения TTL — от минут до суток. Мы используем стратегию: статика (CSS/JS/images) — долгий кеш с content hash, HTML — без кеша. Это снижает нагрузку на CDN и гарантирует свежесть контента. Согласно документации CloudFront, необходимо выполнять инвалидацию после каждого деплоя. Правильная стратегия кеширования позволяет некоторым клиентам экономить до $500 в месяц на расходах CDN.

Когда нужны preview environments?

Отметим: когда в проекте несколько разработчиков. Preview позволяет увидеть изменения в изоляции до вливания в main. Netlify и Cloudflare Pages дают это из коробки. Для S3+CloudFront мы создаём префиксы по номеру PR.

- name: Deploy preview
  if: github.event_name == 'pull_request'
  run: |
    aws s3 sync public/ s3://my-bucket/previews/pr-${{ github.event.number }}/
    echo "Preview URL: https://d1w2x3.cloudfront.net/previews/pr-${{ github.event.number }}/"

Процесс работы

1. Аналитика — разбираем текущий пайплайн, репозиторий, хостинг.
2. Проектирование — выбираем стэк: S3+CloudFront, Cloudflare Pages или Netlify.
3. Реализация — настраиваем CI/CD, кеши, preview.
4. Тестирование — проверяем сборку, деплой, инвалидацию.
5. Деплой — вкатываем на продакшен.

Что входит в работу

• Конфигурация CI/CD (GitHub Actions / GitLab CI)
• Настройка хостинга и CDN
• Интеграция preview environments
• Документация по пайплайну
• Обучение команды
• Поддержка 1 месяц после запуска

Закажите настройку пайплайна — и забудьте о проблемах с деплоем.

Ориентиры по срокам

Цены рассчитываем индивидуально после анализа вашего проекта. Свяжитесь с нами — оценим задачу. Получите консультацию по настройке CI/CD: стабильный деплой, гарантированная работа кеша и интуитивные preview. Наш опыт — множество успешных проектов.