Hugo na CloudFlare Pages

#

CloudFlare Pages to doskonała platforma do hostingu statycznych stron internetowych, idealnie nadająca się dla projektów Hugo.

Dlaczego CloudFlare Pages?

#

Zalety

#

• Darmowy hosting dla projektów osobistych
• Globalny CDN - szybkie ładowanie na całym świecie
• Automatyczne SSL - bezpieczeństwo out-of-the-box
• Integracja z Git - automatyczne wdrożenia z GitHub/GitLab
• Custom domeny - wsparcie dla własnych domen
• Edge functions - serverless computing na brzegu sieci

Wymagania wstępne

#

Przed rozpoczęciem upewnij się, że masz:

• Projekt Hugo gotowy do wdrożenia
• Konto CloudFlare (darmowe)
• Repozytorium Git (GitHub, GitLab, lub Bitbucket)

Krok po kroku: Wdrożenie

#

1. Przygotowanie projektu Hugo

#

# Sprawdź czy projekt się buduje lokalnie
hugo server

# Stwórz produkcyjną wersję
hugo --minify

2. Wgranie na Git

#

# Inicjalizacja repozytorium (jeśli jeszcze nie istnieje)
git init
git add .
git commit -m "Initial Hugo site"

# Połączenie z GitHub
git remote add origin https://github.com/username/your-hugo-site.git
git push -u origin main

3. Konfiguracja CloudFlare Pages

#

1. Zaloguj się do panelu CloudFlare
2. Przejdź do sekcji “Pages”
3. Kliknij “Create a project”
4. Wybierz “Connect to Git”
5. Autoryzuj dostęp do swojego repozytorium
6. Wybierz repozytorium z projektem Hugo

4. Ustawienia budowania

#

Build command: hugo --minify
Build output directory: public
Root directory: /

5. Zmienne środowiskowe

#

Dodaj zmienne środowiskowe w ustawieniach projektu:

HUGO_VERSION=0.120.0
NODE_VERSION=18

Zaawansowana konfiguracja

#

Custom domena

#

1. Przejdź do “Custom domains”
2. Kliknij “Set up a custom domain”
3. Wprowadź swoją domenę
4. Skonfiguruj rekordy DNS zgodnie z instrukcjami

Automatyczne wdrożenia

#

CloudFlare Pages automatycznie buduje i wdraża stronę przy każdym push do głównej gałęzi:

# Każda zmiana automatycznie uruchamia nowe wdrożenie
git add .
git commit -m "Update content"
git push origin main

Preview deployments

#

Gałęzie inne niż główna tworzą preview deployments:

# Stwórz gałąź preview
git checkout -b feature/new-post
git add .
git commit -m "Add new blog post"
git push origin feature/new-post

Troubleshooting

#

Częste problemy

#

Problem: Build fails z błędem Hugo version Rozwiązanie: Ustaw zmienną HUGO_VERSION na właściwą wersję

Problem: 404 po wdrożeniu Rozwiązanie: Sprawdź czy baseURL w config.toml jest poprawny

Problem: CSS/JS nie ładuje się Rozwiązanie: Upewnij się, że używasz relative paths lub prawidłowy baseURL

Logi budowania

#

Sprawdź logi w sekcji “Deployments” dla szczegółów błędów.

Najlepsze praktyki

#

1. Używaj Hugo modules dla lepszego zarządzania dependency
2. Minifikuj assets dla lepszej wydajności
3. Testuj lokalnie przed push na production
4. Używaj preview deployments dla review zmian
5. Skonfiguruj 404 page dla lepszego UX

Monitoring i analityka

#

CloudFlare oferuje wbudowane narzędzia do monitoringu:

• Analytics - statystyki odwiedzin
• Speed insights - metryki wydajności
• Security events - monitoring bezpieczeństwa

Podsumowanie

#

CloudFlare Pages to idealna platforma dla projektów Hugo - darmowa, szybka i łatwa w konfiguracji. Integracja z Git sprawia, że proces wdrażania jest w pełni zautomatyzowany.

Korzyści

#

• Darmowy hosting z globalnym CDN
• Automatyczne SSL i bezpieczeństwo
• Zero-config deployment dla Hugo
• Preview environments dla każdej gałęzi
• Custom domeny i DNS management

CloudFlare Pages to dobry wybór zarówno dla projektów osobistych jak i komercyjnych!