>
← Повернутися на головну

Налаштування хостингу та деплоймент статичних сайтів

Повний практичний посібник з безкоштовного розміщення вашого проекту

📅 Оновлено: 7 лютого 2026 ⏱️ Час читання: 35 хв 🎯 Рівень: Початківець — Середній
📘 Що ви дізнаєтесь:
  • Порівняння хостинг-платформ: GitHub Pages, Netlify, Vercel
  • Покрокове налаштування кожної платформи
  • Підключення custom domain та SSL сертифікатів
  • Автоматичний CI/CD деплоймент
  • Налаштування redirects, headers, caching
  • Моніторинг, аналітика та performance оптимізація

Вступ

Статичні сайти (HTML/CSS/JavaScript без серверного коду) можна розмістити безкоштовно на кількох популярних платформах. Це ідеальний варіант для:

Частина 1: Порівняння хостинг-платформ

GitHub Pages vs Netlify vs Vercel

Характеристика GitHub Pages Netlify Vercel
Ціна Безкоштовно Free tier: 100GB/міс, 300 build min Free tier: 100GB/міс
Build time — 300 хв/місяць (Free) 6000 хв/місяць (Free)
Bandwidth 100 GB/місяць 100 GB/місяць (Free) 100 GB/місяць (Free)
Custom domain ✓ ✓ ✓
SSL (HTTPS) ✓ (безкоштовно) ✓ (Let's Encrypt) ✓ (автоматично)
Авто-деплой з Git ✓ (GitHub тільки) ✓ (GitHub, GitLab, Bitbucket) ✓ (GitHub, GitLab, Bitbucket)
Build frameworks Jekyll (вбудований) React, Vue, Next, Hugo, Gatsby... Next.js (оптимізовано), React, Vue...
Redirects/Rewrites Обмежені ✓ (_redirects файл) ✓ (vercel.json)
Serverless Functions ✗ ✓ (125k req/міс) ✓ (100GB-hrs)
Form handling ✗ ✓ (100 sub/міс) ✗
Preview deploys ✗ ✓ ✓
Analytics ✗ (потрібен GA) ✓ (платно $9/міс) ✓ (вбудована аналітика)
CDN ✓ (Fastly) ✓ (Global CDN) ✓ (Edge Network)

Рекомендації вибору платформи

🟢 GitHub Pages — коли використовувати:

  • ✅ Простий статичний сайт без build-процесу
  • ✅ Open-source проект або документація
  • ✅ Ви вже використовуєте GitHub
  • ✅ Не потрібні serverless функції
  • ❌ НЕ підходить для SPA з роутингом (обмежені redirects)

🔵 Netlify — коли використовувати:

  • ✅ React/Vue/Angular SPA з client-side роутингом
  • ✅ Потрібні form submissions
  • ✅ Потрібні serverless functions (Lambda)
  • ✅ Складні redirects та rewrite rules
  • ✅ A/B testing та split testing

⚫ Vercel — коли використовувати:

  • ✅ Next.js проекти (найкраща оптимізація)
  • ✅ Serverless functions з високою продуктивністю
  • ✅ Edge functions (виконання на CDN)
  • ✅ Потрібна вбудована аналітика
  • ✅ Команда розробників (preview deploys, comments)

Частина 2: Налаштування GitHub Pages

1 Створення GitHub репозиторію
  1. Перейдіть на https://github.com та увійдіть в акаунт
  2. Натисніть New repository
  3. Введіть назву репозиторію:
    • username.github.io — для user site (головний сайт)
    • project-name — для project site (окремий проект)
  4. Виберіть Public (приватні репо тільки в Pro плані)
  5. Натисніть Create repository
2 Завантаження файлів сайту

Ваша структура файлів повинна містити index.html в корені:

# Ініціалізація Git у вашому проекті cd /path/to/your/project git init git add . git commit -m "Initial commit" # Підключення remote репозиторію git remote add origin https://github.com/username/repository-name.git # Push коду git branch -M main git push -u origin main
⚠️ Важливо: Файл index.html повинен бути в корені репозиторію або в папці /docs, якщо налаштовуєте деплой з docs.
3 Активація GitHub Pages
  1. Перейдіть у налаштування репозиторію: Settings → Pages
  2. Source: виберіть Deploy from a branch
  3. Branch: виберіть main та папку /(root) або /docs
  4. Натисніть Save
  5. Зачекайте 1-2 хвилини. Сайт буде доступний за адресою:
    • https://username.github.io — для user site
    • https://username.github.io/repository-name — для project site
📸 Скріншот: Settings → Pages → Source: Deploy from branch
4 Підключення Custom Domain

A. Налаштування DNS (у реєстратора домену):

Додайте A-записи для GitHub Pages IPs:

Type: A Host: @ Value: 185.199.108.153 Type: A Host: @ Value: 185.199.109.153 Type: A Host: @ Value: 185.199.110.153 Type: A Host: @ Value: 185.199.111.153 # Для www піддомену (опціонально): Type: CNAME Host: www Value: username.github.io

B. Налаштування в GitHub:

  1. Settings → Pages → Custom domain
  2. Введіть ваш домен: example.com
  3. Натисніть Save
  4. Почекайте DNS propagation (до 24 годин, зазвичай 1-2 години)
  5. Увімкніть Enforce HTTPS (після підтвердження домену)
💡 Перевірка DNS: Використовуйте nslookup example.com або dig example.com для перевірки налаштувань DNS.

Частина 3: Налаштування Netlify

1 Реєстрація та підключення репозиторію
  1. Зайдіть на https://app.netlify.com
  2. Зареєструйтесь через GitHub (рекомендовано) або email
  3. Натисніть Add new site → Import an existing project
  4. Виберіть Git provider: GitHub
  5. Авторизуйте Netlify у GitHub (дайте доступ до репозиторіїв)
  6. Виберіть репозиторій з вашим проектом
2 Налаштування Build Settings

Для статичного сайту (HTML/CSS/JS):

Branch to deploy: main Build command: (leave empty) Publish directory: / or . (root)

Для React/Vue/Gatsby проектів:

# React (Create React App) Build command: npm run build Publish directory: build # Vue Build command: npm run build Publish directory: dist # Gatsby Build command: gatsby build Publish directory: public # Next.js (статичний експорт) Build command: next build && next export Publish directory: out
  1. Введіть налаштування (або залиште порожніми для статичного сайту)
  2. Натисніть Deploy site
  3. Netlify автоматично:
    • Склонує репозиторій
    • Виконаєте build команду
    • Опублікує сайт на random-name-123.netlify.app
📸 Скріншот: Build settings — Branch, Build command, Publish directory
3 Налаштування Custom Domain на Netlify

Опція A: Використання Netlify DNS (рекомендовано):

  1. Site settings → Domain management → Add custom domain
  2. Введіть ваш домен: example.com
  3. Netlify запропонує Set up Netlify DNS
  4. У вашого реєстратора домену (GoDaddy, Namecheap, etc.) змініть nameservers на:
    dns1.p01.nsone.net dns2.p01.nsone.net dns3.p01.nsone.net dns4.p01.nsone.net
  5. Почекайте DNS propagation (до 24 годин)
  6. SSL сертифікат активується автоматично (Let's Encrypt)

Опція B: Використання власного DNS провайдера:

# Для root domain: Type: A Host: @ Value: 75.2.60.5 # Для www піддомену: Type: CNAME Host: www Value: your-site.netlify.app
💡 Порада: Netlify DNS автоматично налаштує всі необхідні записи (A, AAAA для IPv6, SSL) та забезпечить найшвидший DNS resolution.
4 Налаштування Redirects та Rewrites

Створіть файл _redirects у вашій Publish directory:

# SPA fallback (для React Router, Vue Router) /* /index.html 200 # Redirect з www на non-www https://www.example.com/* https://example.com/:splat 301! # Перенаправлення старих URL /old-page /new-page 301 /blog/* /news/:splat 301 # Проксі API запити /api/* https://backend-api.com/:splat 200 # Custom 404 page /* /404.html 404

Або використовуйте netlify.toml:

[build] publish = "build" command = "npm run build" [[redirects]] from = "/*" to = "/index.html" status = 200 [[redirects]] from = "/api/*" to = "https://backend-api.com/:splat" status = 200 force = true [[headers]] for = "/*" [headers.values] X-Frame-Options = "DENY" X-XSS-Protection = "1; mode=block" X-Content-Type-Options = "nosniff" Referrer-Policy = "strict-origin-when-cross-origin"

Частина 4: Налаштування Vercel

1 Імпорт проекту з Git
  1. Зайдіть на https://vercel.com
  2. Зареєструйтесь через GitHub (рекомендовано)
  3. Натисніть New Project
  4. Виберіть Import Git Repository
  5. Авторизуйте Vercel у GitHub
  6. Виберіть репозиторій
2 Configure Project

Vercel автоматично визначає framework:

  • Next.js — автоконфігурація
  • Create React App — build: npm run build, output: build
  • Vue.js — build: npm run build, output: dist
  • Статичний HTML — без build команди, output: .
# Приклад для статичного сайту: Framework Preset: Other Build Command: (leave empty) Output Directory: public # або . для root Install Command: (leave empty)
  1. Перевірте налаштування (Vercel зазвичай визначає автоматично)
  2. Додайте Environment Variables (якщо потрібно):
    NEXT_PUBLIC_API_URL=https://api.example.com DATABASE_URL=postgresql://...
  3. Натисніть Deploy
  4. Сайт буде опублікований на project-name.vercel.app
3 Підключення域名 на Vercel
  1. Відкрийте проект → Settings → Domains
  2. Натисніть Add
  3. Введіть ваш домен: example.com
  4. Vercel покаже DNS records для налаштування:
    # Для root domain (example.com): Type: A Name: @ Value: 76.76.21.21 # Для www піддомену: Type: CNAME Name: www Value: cname.vercel-dns.com
  5. Додайте ці записи у DNS налаштуваннях вашого реєстратора
  6. Почекайте DNS propagation (зазвичай 5-30 хвилин)
  7. SSL сертифікат активується автоматично
💡 Порада: Vercel підтримує wildcard domains (*.example.com) та автоматичні redirects з www на non-www.
4 Налаштування vercel.json

Створіть файл vercel.json у корені проекту:

{ "version": 2, "builds": [ { "src": "package.json", "use": "@vercel/static-build", "config": { "distDir": "build" } } ], "routes": [ { "src": "/(.*)", "dest": "/$1" } ], "rewrites": [ { "source": "/:path*", "destination": "/index.html" } ], "redirects": [ { "source": "/old-page", "destination": "/new-page", "permanent": true } ], "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-XSS-Protection", "value": "1; mode=block" } ] } ] }

Частина 5: CI/CD та Автоматичний Деплоймент

GitHub Actions для GitHub Pages

Створіть .github/workflows/deploy.yml:

name: Deploy to GitHub Pages on: push: branches: - main permissions: contents: read pages: write id-token: write jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: ./build deploy: needs: build runs-on: ubuntu-latest environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4

Netlify CI/CD (автоматично)

Netlify автоматично створює CI/CD pipeline:

Налаштування в netlify.toml:

[build] command = "npm run build" publish = "build" [build.environment] NODE_VERSION = "18" NPM_VERSION = "9" [context.production] command = "npm run build:production" [context.deploy-preview] command = "npm run build:preview" [context.branch-deploy] command = "npm run build"

Vercel CI/CD (автоматично)

Vercel також автоматично налаштовує CI/CD:

Частина 6: Моніторинг та Аналітика

Google Analytics Integration

Додайте у <head> вашого HTML:

<!-- Google Analytics 4 --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script>

Netlify Analytics

  1. Site settings → Analytics → Enable Analytics
  2. Вартість: $9/місяць на сайт
  3. Можливості:
    • Server-side трекінг (не блокується ad blockers)
    • Page views, unique visitors
    • Top pages, referrers, locations
    • Bandwidth usage

Vercel Analytics

Vercel надає безкоштовну Web Analytics (Core Web Vitals):

  1. Project → Analytics
  2. Встановіть @vercel/analytics:
    npm install @vercel/analytics
  3. Додайте у ваш код (Next.js приклад):
    // _app.js import { Analytics } from '@vercel/analytics/react'; function MyApp({ Component, pageProps }) { return ( <> <Component {...pageProps} /> <Analytics /> </> ); }
  4. Metrics:
    • FCP — First Contentful Paint
    • LCP — Largest Contentful Paint
    • FID — First Input Delay
    • CLS — Cumulative Layout Shift

Частина 7: Performance Оптимізація

Caching Strategies

Netlify Headers (_headers файл):

# Cache CSS/JS/images for 1 year /static/* Cache-Control: public, max-age=31536000, immutable # Cache HTML for 5 minutes /*.html Cache-Control: public, max-age=300, must-revalidate # No cache for API responses /api/* Cache-Control: no-cache, no-store, must-revalidate

Vercel Headers (у vercel.json):

{ "headers": [ { "source": "/static/(.*)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] } ] }

Image Optimization

Compression

Всі три платформи автоматично стискають контент (Gzip/Brotli), але ви можете налаштувати:

# netlify.toml [[headers]] for = "/*" [headers.values] Content-Encoding = "br" # Brotli compression

Частина 8: Troubleshooting

Проблема 1: Сайт не відкривається після деплою

Рішення:

  1. Перевірте, чи існує index.html у publish directory
  2. Перевірте консоль браузера на JavaScript помилки
  3. Переконайтесь, що всі шляхи до файлів відносні (не абсолютні)
  4. Для GitHub Pages project sites використовуйте <base href="/repository-name/">

Проблема 2: 404 помилка на SPA роутах

Рішення:

Проблема 3: Custom domain не працює

Рішення:

  1. Перевірте DNS записи: nslookup example.com
  2. Почекайте DNS propagation (до 24 годин)
  3. Очистіть DNS кеш: ipconfig /flushdns (Windows) або sudo dscacheutil -flushcache (Mac)
  4. Переконайтесь, що домен додано у налаштуваннях платформи

Проблема 4: SSL сертифікат не активується

Рішення:

  1. Переконайтесь, що DNS records налаштовані правильно
  2. Почекайте 5-30 хвилин після налаштування DNS
  3. Видаліть та додайте домен знову
  4. Перевірте, чи немає CAA records у DNS, які блокують Let's Encrypt

Частина 9: Cloudflare Pages

9.1. Чому Cloudflare Pages?

✅ Переваги Cloudflare Pages:
  • 🌍 Global CDN — 300+ локацій по всьому світу
  • ⚡ Fastest performance — edge computing
  • 🔒 DDoS захист — вбудований безкоштовно
  • 💰 Unlimited bandwidth — без обмежень трафіку
  • 🚀 Serverless Functions — Cloudflare Workers
  • 📊 Web Analytics — приватна аналітика без cookies

9.2. Deployment на Cloudflare Pages

1 Створення проекту
  1. Перейдіть на pages.cloudflare.com
  2. Натисніть "Create a project"
  3. Connect GitHub/GitLab
  4. Виберіть репозиторій
  5. Build settings:
    Build command: npm run build Build output directory: build Root directory: / Branch: main
  6. Натисніть "Save and Deploy"

9.3. Cloudflare Pages Features

# wrangler.toml для Cloudflare Workers name = "scientific-calculators" type = "javascript" account_id = "your-account-id" [site] bucket = "./build" [build] command = "npm run build" cwd = "./" [build.upload] format = "service-worker"

9.4. Serverless Functions з Cloudflare Workers

// functions/api/calculate.js export async function onRequest(context) { const { request } = context; // Parse request const { operation, a, b } = await request.json(); // Calculate let result; switch (operation) { case 'add': result = a + b; break; case 'subtract': result = a - b; break; case 'multiply': result = a * b; break; case 'divide': result = b !== 0 ? a / b : null; break; default: return new Response(JSON.stringify({ error: 'Invalid operation' }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } return new Response(JSON.stringify({ result }), { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }); }

Частина 10: Render.com для Full-Stack Apps

10.1. Render Static Site

1 Deploy статичного сайту
  1. Signup на render.com
  2. Натисніть "New +" → Static Site
  3. Connect GitHub repository
  4. Build settings:
    Build Command: npm run build Publish Directory: build Branch: main
  5. Create Static Site

10.2. Render Web Service (Node.js Backend)

# render.yaml services: - type: web name: calculator-api env: node buildCommand: npm install startCommand: node server.js envVars: - key: NODE_ENV value: production - key: DATABASE_URL fromDatabase: name: calculator-db property: connectionString - type: static name: calculator-frontend buildCommand: npm run build staticPublishPath: ./build databases: - name: calculator-db databaseName: calculators user: calcuser

10.3. Render PostgreSQL Database

Створення бази даних:

  1. New + → PostgreSQL
  2. Оберіть план (Free tier доступний)
  3. Підключення до бази:
    # Internal connection string (для Render services) postgresql://user:password@hostname/database # External connection string (для локальної розробки) postgresql://user:password@hostname.render.com/database
  4. Використовуйте у коді:
    // Node.js + PostgreSQL const { Pool } = require('pg'); const pool = new Pool({ connectionString: process.env.DATABASE_URL, ssl: { rejectUnauthorized: false } }); // Query const result = await pool.query('SELECT * FROM calculations'); console.log(result.rows);

Частина 11: Railway.app

11.1. Railway Features

✨ Можливості Railway:
  • 🚂 One-click deploy — з GitHub
  • 📦 All-in-one — frontend + backend + database
  • 🔄 Auto-scaling — автоматичне масштабування
  • 💾 Databases — PostgreSQL, MySQL, MongoDB, Redis
  • 📊 Metrics — вбудований моніторинг
  • 💰 $5 free credit/month

11.2. Deploy на Railway

  1. Signup на railway.app
  2. New Project → Deploy from GitHub repo
  3. Виберіть репозиторій
  4. Railway автоматично визначить:
    • Node.js → npm install && npm start
    • Python → pip install -r requirements.txt && python app.py
    • Static → просто serve файли
  5. Додайте database якщо потрібно:
    # New → Database → PostgreSQL # Railway автоматично встановить env vars: # DATABASE_URL, PGHOST, PGPORT, PGUSER, PGPASSWORD, PGDATABASE

11.3. Railway.toml конфігурація

# railway.toml [build] builder = "nixpacks" buildCommand = "npm run build" [deploy] startCommand = "npm start" restartPolicyType = "on_failure" restartPolicyMaxRetries = 10 [[services]] name = "web" domains = ["calculators.up.railway.app"] [services.healthcheck] path = "/health" timeout = 300 interval = 30

Частина 12: Firebase Hosting

12.1. Firebase Setup

1 Встановлення Firebase CLI
# Встановлення npm install -g firebase-tools # Login firebase login # Ініціалізація проекту firebase init # Виберіть: # (*) Hosting: Configure files for Firebase Hosting # (*) Use an existing project (або Create a new project) # # What do you want to use as your public directory? build # Configure as a single-page app (rewrite all urls to /index.html)? Yes # Set up automatic builds and deploys with GitHub? Yes

12.2. firebase.json конфігурація

{ "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ], "headers": [ { "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)", "headers": [ { "key": "Cache-Control", "value": "max-age=31536000" } ] }, { "source": "**/*.@(js|css)", "headers": [ { "key": "Cache-Control", "value": "max-age=31536000" } ] }, { "source": "/sw.js", "headers": [ { "key": "Cache-Control", "value": "no-cache" } ] } ], "cleanUrls": true, "trailingSlash": false } }

12.3. Deployment

# Build проекту npm run build # Deploy firebase deploy # Deploy тільки hosting (без functions) firebase deploy --only hosting # Preview перед deployment firebase hosting:channel:deploy preview # Rollback до попередньої версії firebase hosting:channel:list firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

Частина 13: Surge.sh — Ultra Fast Deployment

13.1. Deploy за 30 секунд

# Встановлення npm install --global surge # Build проекту npm run build # Deploy (настільки просто!) cd build surge # Або з custom domain surge --domain calculators.surge.sh

13.2. CNAME файл для custom domain

# Створити CNAME файл у build/ echo "calculators.example.com" > build/CNAME # Deploy surge build/ calculators.example.com # DNS налаштування: # CNAME record: calculators → na-west1.surge.sh

13.3. Surge конфігурація (CORS.json)

{ "CORS": { "*": { "origins": ["*"], "methods": ["GET", "POST", "PUT", "DELETE"], "headers": ["Content-Type", "Authorization"] } }, "rewrites": { "/api/*": "https://api.example.com/:splat" }, "redirects": { "/old-url": "/new-url" }, "cleanUrls": true, "trailingSlash": false }

Частина 14: Self-Hosted на VPS (Ubuntu + Nginx)

14.1. Налаштування VPS

1 Підключення до VPS
# SSH підключення ssh root@your-server-ip # Оновлення системи apt update && apt upgrade -y # Встановлення Nginx apt install nginx -y # Встановлення Certbot для SSL apt install certbot python3-certbot-nginx -y # Створення non-root користувача adduser deploy usermod -aG sudo deploy su - deploy

14.2. Nginx конфігурація

# /etc/nginx/sites-available/calculators server { listen 80; server_name calculators.example.com; root /var/www/calculators; index index.html; # Gzip compression gzip on; gzip_vary on; gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript; gzip_min_length 1000; # Security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; # SPA routing location / { try_files $uri $uri/ /index.html; } # Кешування статичних файлів location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control "public, immutable"; } # Service Worker не кешувати location /service-worker.js { add_header Cache-Control "no-cache"; expires 0; } }

14.3. SSL сертифікат з Let's Encrypt

# Створити symlink sudo ln -s /etc/nginx/sites-available/calculators /etc/nginx/sites-enabled/ # Перевірити конфігурацію sudo nginx -t # Перезапустити Nginx sudo systemctl restart nginx # Отримати SSL сертифікат sudo certbot --nginx -d calculators.example.com # Certbot автоматично: # 1. Отримає сертифікат від Let's Encrypt # 2. Оновить Nginx конфігурацію # 3. Налаштує авто-оновлення (cron job) # Перевірити авто-оновлення sudo certbot renew --dry-run

14.4. Deployment Script

#!/bin/bash # deploy.sh set -e # Exit on error echo "🚀 Starting deployment..." # Git pull latest changes cd /var/www/calculators git pull origin main # Install dependencies (якщо потрібно build) npm ci # Build проекту npm run build # Copy build файли sudo cp -r build/* /var/www/calculators/ # Перезапустити Nginx sudo systemctl reload nginx echo "✅ Deployment completed!"

Частина 15: Performance Optimization

15.1. CDN Integration (Cloudflare)

Налаштування Cloudflare CDN:

  1. Signup на cloudflare.com
  2. Додайте ваш домен
  3. Змініть nameservers у вашого domain registrar:
    Nameserver 1: alice.ns.cloudflare.com Nameserver 2: bob.ns.cloudflare.com
  4. Увімкніть оптимізації:
    • ✅ Auto Minify (HTML, CSS, JS)
    • ✅ Brotli compression
    • ✅ Rocket Loader (async JS)
    • ✅ HTTP/3 (QUIC)

15.2. Caching Strategy

// Cloudflare Page Rules /* /assets/* Cache Level: Cache Everything Edge Cache TTL: 1 month Browser Cache TTL: 1 month /* /api/* Cache Level: Bypass Security Level: Medium /* / Cache Level: Standard Browser Cache TTL: 4 hours

15.3. Image Optimization

Description Description

Висновок

Ви тепер знаєте, як розмістити статичний сайт на трьох найпопулярніших платформах безкоштовно:

🚀 Наступні кроки:
  1. Виберіть платформу відповідно до ваших потреб
  2. Налаштуйте автоматичний CI/CD деплоймент
  3. Підключіть custom domain та SSL
  4. Налаштуйте аналітику та моніторинг
  5. Оптимізуйте performance (caching, compression, images)
📚 Додаткові ресурси:

Як користуватися шпаргалкою

Ця шпаргалка зосереджує найважливіші формули, правила та визначення теми в компактному форматі для швидкого пошуку та підготовки до іспитів. Матеріал систематизований від базових понять до просунутих результатів.

Ефективне використання

Використовуйте шпаргалку поряд з розв'язуванням задач — не для списування, а як довідник формул. Спершу спробуйте пригадати формулу самостійно, потім звіртеся з довідником. Регулярне повторення формує стійку пам'ять.

Часті запитання (FAQ)

Які ключові формули та правила містить шпаргалка з налаштування хостингу та деплоймент статичних сайтів?
Ця шпаргалка з 'Налаштування хостингу та деплоймент статичних сайтів' включає: основні означення, головні формули у компактному вигляді, правила обчислень, типові підстановки та приклади застосування. Все систематизовано для швидкого пошуку.
Для кого призначена ця шпаргалка з налаштування хостингу та деплоймент статичних сайтів?
Шпаргалка з 'Налаштування хостингу та деплоймент статичних сайтів' орієнтована на студентів університетів та учнів старшої школи, а також на всіх, хто хоче швидко освіжити знання перед іспитом або при вирішенні практичних задач.
Як використовувати шпаргалку з налаштування хостингу та деплоймент статичних сайтів при підготовці до іспиту?
Оптимальна стратегія: спершу вивчіть теорію, потім використовуйте шпаргалку як довідник при розв'язанні задач. За 1–2 дні до іспиту перегляньте шпаргалку цілком, звертаючи увагу на формули, які ви плутаєте.
Чи охоплює ця шпаргалка всю програму курсу з налаштування хостингу та деплоймент статичних сайтів?
Шпаргалка з 'Налаштування хостингу та деплоймент статичних сайтів' охоплює стандартну університетську програму: всі ключові теореми, формули та методи. Матеріал структурований від базових понять до просунутих результатів.
Де ще можна попрактикуватися з налаштування хостингу та деплоймент статичних сайтів після вивчення шпаргалки?
Після роботи зі шпаргалкою рекомендуємо: тренажери вправ на calculator.party (миттєвий зворотний зв'язок), розв'язані задачі (показують метод покроково) та онлайн-калькулятори для перевірки власних результатів.