DevOps2 хв читання

Статичний сайт на Cloudflare Workers за п’ять хвилин

Без сервера, без FTP і зазвичай без рахунків. Конфігурація wrangler, заголовки кешу, переадресації та власна сторінка 404.

workers

Ілюстративне фото: Unsplash

Цей блог пишеться у WordPress, але ви читаєте його як звичайні HTML-файли з Cloudflare Workers. Для сайту, якому не потрібна база даних на кожен візит, це найшвидший і найдешевший шлях: файли лежать на краю мережі, близько до читача.

Конфігурація

Потрібен один файл. Секція [assets] вказує, з якої теки віддавати файли — скрипт Worker писати взагалі не треба.

name = "my-site"
compatibility_date = "2026-10-01"

[assets]
directory = "./dist"
not_found_handling = "404-page"

Опція not_found_handling = "404-page" для неіснуючих адрес поверне ваш 404.html з кодом 404, а не порожню відповідь.

Деплой

npx wrangler login     # один раз, відкриває браузер
npm run build
npx wrangler deploy

За кілька секунд сайт працює за адресою my-site.<акаунт>.workers.dev. Власний домен підключається в панелі одним кліком, якщо DNS у Cloudflare.

Кеш і заголовки

Файл _headers у теці зі збіркою задає заголовки для шляхів. Файли з хешем у назві можна кешувати «назавжди», HTML — недовго, щоб нова версія з’являлася одразу.

/assets/*
  Cache-Control: public, max-age=31536000, immutable

/*.html
  Cache-Control: public, max-age=300

Переадресації

Змінили адресу статті? Файл _redirects обробить це без коду, а пошуковик перенесе позицію на нову URL-адресу.

/old-url/   /new-url/   301

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

На безкоштовному плані запити до самих статичних файлів не рахуються в ліміт викликів Worker. Для блогу чи сайту-візитки рахунок зазвичай нульовий. Ліміти й ціни змінюються, тож перед великим проєктом зазирніть в актуальну документацію.

Коли не статика Живі коментарі, вхід у кабінет, кошик із залишками на складі — тут уже потрібен бекенд. Тоді той самий Worker може отримати код і базу D1, але це тема для окремого тексту.

STOS

Блог про фронтенд, DevOps та інструменти

Зроблено на WordPress: власна блокова тема, Polylang, Yoast SEO. Подивитися адмінку WordPress у Playground ↗

STOS — вигаданий блог, концепт-проєкт для портфоліо. Авторка й тексти — приклади.