Wat is de bouwcache van Hugo en hoe werkt deze?

Hugo’s build cache slaat gerenderde inhoud en verwerkte assets op om volgende builds te versnellen. Het bevindt zich in de map resources/_gen en cacheert verwerkte afbeeldingen, CSS, JavaScript en gerenderde sjablonen. Hugo gebruikt deze cache automatisch om herverwerking van onveranderde inhoud te voorkomen, wat de buildtijd aanzienlijk verlaagt voor grote sites.

Hoe schakel ik incrementele builds in bij Hugo in?

Gebruik de --ignoreCache -vlag om de cache uit te schakelen of hugo server met --disableFastRender om volledige opnieuw bouwen te forceren. Voor incrementele bouwen hoeft u eenvoudigweg hugo uit te voeren zonder vlaggen—Hugo gebruikt automatisch gecachte inhoud wanneer bronbestanden niet zijn gewijzigd. De omgevingsvariabele HUGO_CACHEDIR kan een aangepaste cache-locatie specificeren.

Welke HTTP-headers moet ik instellen voor statische Hugo-assets?

Stel agressieve caching in voor statische assets (CSS, JS, afbeeldingen) - Cache-Control: public, max-age=31536000, immutable (1 jaar). Voor HTML-pagina’s moet u kortere cachetijden gebruiken - Cache-Control: public, max-age=3600 (1 uur) met ETag of Last-Modified -headers. Dit stelt browsers in staat om assets langdurig te cachen, terwijl de HTML blijft up-to-date.

Hoe configureer ik CDN-caching voor een Hugo-site?

Stel uw CDN (CloudFront, Cloudflare, enz.) in om statische assets met lange TTL’s (1 jaar) en HTML met kortere TTL’s (1 uur) te cacheën. Stel cache-ongeldigheid in bij implementaties. Voor CloudFront gebruikt u de cloudFrontDistributionID in de implementatieconfiguratie van Hugo. Schakel compressie (gzip/brotli) in en stel geschikte cache-gedragen in op basis van bestandsextensies.

Zou ik service workers moeten gebruiken voor Hugo-sites?

Service workers kunnen offlinefunctionaliteit bieden en de waargenomen prestaties verbeteren, maar zijn voor statische sites optioneel. Ze zijn vooral nuttig voor sites die offline-toegang nodig hebben of geavanceerde cachingstrategieën willen implementeren. Voor de meeste Hugo-sites zijn CDN-caching en correcte HTTP-headers voldoende. Overweeg service workers als je offline-first functionaliteit nodig hebt of kritieke assets wilt precachen.

Hoe configureer ik de bestandsbuffers van Hugo?

Stel bestandsbuffers in in uw config.toml met behulp van de [caches] sectie. Hugo ondersteunt meerdere cache types: assets , images , getjson , getcsv , getresource , misc en modules . Elke cache type heeft opties dir (directorypad) en maxAge (vervaltijd). Gebruik tokens zoals :cacheDir , :resourceDir en :project voor dynamische paden. Stel maxAge in op -1 voor permanente caching, 0 om caching uit te schakelen, of een positief getal voor tijdgebonden verval. Zie de Hugo cache configuratie documentatie voor meer informatie.

Hugo Cachingstrategieën voor prestaties

Optimaliseer het ontwikkelen en uitvoeren van Hugo-sites

Inhoud

Hugo caching strategies zijn essentieel om de prestaties van uw statische site generator te maximaliseren. Hoewel Hugo statische bestanden genereert die inherent snel zijn, kan het implementeren van een correcte caching op meerdere lagen de bouwtijd aanzienlijk verbeteren, de serverbelasting verminderen en de gebruikerservaring verbeteren.

Of u nu een populaire thema gebruikt uit onze Meest populaire thema’s voor Hugo gids of een aangepast thema, deze cachingstrategieën zullen helpen bij het optimaliseren van de prestaties van uw site.

Deze uitgebreide gids behandelt bouwtijdscaching, incrementele bouwen, CDN-optimalisatie, HTTP-headers en strategieën voor het cachen van assets om u te helpen bij het bereiken van optimale prestaties voor uw Hugo-gebaseerde website.

chef-in-a-white met Caching Strategies Deze mooie afbeelding is gegenereerd door AI model Flux 1 dev.

Begrijpen van de bouwcache van Hugo

Hugo onderhoudt een interne bouwcache die verwerkte inhoud en assets opslaat om volgende bouwen te versnellen. Deze cache bevindt zich in de resources/_gen map en bevat:

Geverifieerde sjablonen: Voorverwerkte sjabloonuitvoer
Verwerkte afbeeldingen: Geresized, geoptimaliseerde en omgezette afbeeldingen
Gecompileerde assets: Geminificeerde CSS en JavaScript
Resource metadata: Bestandshashes en verwerkingsresultaten

Hoe de bouwcache werkt

Wanneer u hugo uitvoert, voert de generator uit:

De cache controleert op bestaande verwerkte resources
Het vergelijkt bestandswijzigingstijden en inhoudshashes
Het overslaat het verwerken van ongewijzigde bestanden
Het bouwt alleen gewijzigde of nieuwe inhoud opnieuw

Dit betekent dat voor een site met 1000 artikelen het bewerken van één artikel alleen vereist dat Hugo dat ene artikel verwerkt en de beïnvloede pagina’s opnieuw genereert, niet de hele site.

Beheren van de bouwcache

U kunt het gedrag van de cache van Hugo beheren met behulp van verschillende opdrachtregelvlaggen. Voor een uitgebreid overzicht van Hugo-commands, zie de Hugo Cheat Sheet:

# Leeg de cache en bouw alles opnieuw
hugo --ignoreCache

# Gebruik een aangepaste cache-map
export HUGO_CACHEDIR=/pad/naar/cache
hugo

# Schakel de snelle weergave modus uit (dwang volledige herbouw)
hugo server --disableFastRender

Voor CI/CD-pijplijnen, overweeg het behouden van de cache-map tussen bouwen om de implementaties te versnellen. Als u Gitea Actions gebruikt voor implementatie, zie dan onze gids over Gebruik van Gitea Actions om een Hugo website te implementeren op AWS S3 voor een volledige CI/CD-setup:

# Voorbeeld GitHub Actions workflow
- name: Cache Hugo resources
  uses: actions/cache@v3
  with:
    path: resources/_gen
    key: ${{ runner.os }}-hugo-${{ hashFiles('**/content/**') }}

Configureren van bestands caches

Hugo biedt granulaire controle over verschillende cache-types via de [caches] configuratiereferentie. Volgens de Hugo documentatie, kunt u meerdere cache-types configureren:

[caches]
  [caches.assets]
    dir = ':resourceDir/_gen'
    maxAge = -1
  [caches.getcsv]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.getjson]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.getresource]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.images]
    dir = ':resourceDir/_gen'
    maxAge = -1
  [caches.misc]
    dir = ':cacheDir/:project'
    maxAge = -1
  [caches.modules]
    dir = ':cacheDir/modules'
    maxAge = -1

Uitleg van cache-types

assets: Cachet verwerkte CSS, JavaScript en andere assets van Hugo Pipes
getcsv: Cachet geparseerde CSV-bestanden geladen via de getCSV functie
getjson: Cachet geparseerde JSON-bestanden geladen via de getJSON functie
getresource: Cachet externe resources geladen via de getResource functie
images: Cachet verwerkte afbeeldingen (gescalde, geoptimaliseerde, omgezette)
misc: Algemene cache voor diverse operaties
modules: Cachet Hugo modules en hun afhankelijkheden

Configuratieopties

Elk cache-type ondersteunt twee configuratieopties:

dir: Het absolute bestandssysteempad waarin de gecachte bestanden worden opgeslagen. U kunt tokens gebruiken:
- :cacheDir - vervangen door de geconfigureerde cache-map
- :resourceDir - vervangen door de resource-map (meestal resources/_gen)
- :project - vervangen door de basisdirectorynaam van het huidige Hugo-project
maxAge: De duur waarin een gecachte invoer geldig blijft voordat deze wordt verwijderd:
- 0 - De cache is uitgeschakeld
- -1 - De gecachte invoer verloopt nooit (standaard)
- Positief getal - De cache verloopt na de opgegeven duur (bijvoorbeeld 3600 voor 1 uur)

Voorbeeld van aangepaste cacheconfiguratie

U kunt cache-instellingen aanpassen voor specifieke gebruiksscenario’s:

[caches]
  # Houd verwerkte afbeeldingen permanent in cache
  [caches.images]
    dir = ':resourceDir/_gen/images'
    maxAge = -1
  
  # Cache JSON API-antwoorden voor 1 uur
  [caches.getjson]
    dir = ':cacheDir/:project/json'
    maxAge = 3600
  
  # Cache externe resources voor 24 uur
  [caches.getresource]
    dir = ':cacheDir/:project/resources'
    maxAge = 86400

Deze configuratie stelt u in staat:

Verwerkte afbeeldingen permanent in cache te houden (aangezien ze deterministisch zijn)
JSON-gegevens elke uur te vernieuwen (voor dynamische inhoud)
Externe resources 24 uur in cache te houden (balans tussen frisheid en prestaties)

De :project token zorgt ervoor dat elk Hugo-project gescheiden caches heeft, dus hugo --gc (garbage collection) beïnvloedt alleen de cache van het huidige project.

Incrementele bouwen

Het incrementele bouwsysteem van Hugo is een van de krachtigste functies. Het volgt wijzigingen op bestandsniveau en bouwt alleen wat nodig is.

Het inschakelen van incrementele bouwen

Incrementele bouwen zijn standaard ingeschakeld. Hugo doet automatisch:

Volgt bestandsafhankelijkheden
Bouwt alleen gewijzigde pagina’s en hun afhankelijkheden opnieuw
Blijft afhankelijkheidsgrafieken bijhouden voor efficiënte updates

Tips voor bouwprestaties

Gebruik hugo server voor ontwikkeling: De ontwikkelingsserver gebruikt incrementele bouwen automatisch
Gebruik --minify alleen in productie: Minificatie voegt overhead toe; gebruik het alleen voor eindbouwen
Optimaliseer afbeeldingsverwerking: Gebruik de afbeeldingsverwerking van Hugo efficiënt:

[imaging]
  bgColor = '#ffffff'
  hint = 'photo'
  quality = 75
  resampleFilter = 'box'

Beperk resourceverwerking: Verwerk alleen afbeeldingen en assets die daadwerkelijk worden gebruikt

CDN-cachestrategieën

Content Delivery Networks (CDNs) zijn essentieel voor wereldwijde prestaties. Bij het implementeren van Hugo-sites op CDNs zoals CloudFront, Cloudflare of Netlify, configureer caching correct. Voor gedetailleerde instructies over het implementeren van uw Hugo-site naar AWS S3 met CloudFront, zie onze gids over Implementeer een door Hugo gegenereerde website naar AWS S3.

CloudFront-configuratie

Voor implementaties met AWS CloudFront, configureer cachegedrag:

# config.toml
[[deployment.targets]]
name = "production"
URL = "s3://your-bucket?region=us-east-1"
cloudFrontDistributionID = "E1XIDGUJGD9BU9"

Maak CloudFront-cache-gebruiksstrategieën:

Statische assets (.css, .js, .jpg, .png, etc.):
- TTL: 1 jaar (31536000 seconden)
- Cachebeleid: CachingOptimized
- Comprimeren: Ja
HTML-pagina’s (.html):
- TTL: 1 uur (3600 seconden)
- Cachebeleid: CachingDisabled (met originele headers)
- Comprimeren: Ja

Cache-ongeldigheid

Automatiseer cache-ongeldigheid bij implementaties:

# Ongeldigheid van CloudFront-cache na implementatie
aws cloudfront create-invalidation \
  --distribution-id E1XIDGUJGD9BU9 \
  --paths "/*"

Of gebruik de implementatiefunctie van Hugo:

[[deployment.targets]]
name = "production"
URL = "s3://your-bucket"
cloudFrontDistributionID = "E1XIDGUJGD9BU9"

Hugo zal automatisch de cache ongeldig maken bij implementatie.

Assetoptimalisatie en caching

Hugo biedt ingebouwde assetverwerking die samenwerkt met caching.

Resourcehashing

Hugo kan automatisch inhoudshashes toevoegen aan bestandsnamen:

{{ $css := resources.Get "css/main.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Dit genereert bestandsnamen zoals main.min.abc123def456.css, wat lange termijn caching mogelijk maakt omdat de hash verandert wanneer de inhoud verandert.

Afbeeldingsverwerking en caching

Verwerk afbeeldingen efficiënt met behulp van de ingebouwde afbeeldingsverwerking van Hugo. Hugo cache verwerkte afbeeldingen, dus het herschalen van dezelfde afbeelding meerdere keren verwerkt het alleen een keer. Voor geavanceerde afbeeldingsbehandeling, inclusief het genereren van OpenGraph-afbeeldingsmetadata, zie onze gids over OpenGraph-afbeeldingsmetadata in Hugo statische site generator:

{{ $image := resources.Get "images/photo.jpg" }}
{{ $resized := $image.Resize "800x600" }}
<img src="{{ $resized.RelPermalink }}" alt="Foto">

Assetbundeling

Bundel en minificeer assets:

{{ $css := slice 
    (resources.Get "css/reset.css")
    (resources.Get "css/main.css")
    (resources.Get "css/components.css")
  | resources.Concat "css/bundle.css"
  | minify
  | fingerprint
}}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Dit maakt een enkel gecachte, geminificeerde en gefingerprintde CSS-bestand.

Service worker caching (optioneel)

Voor geavanceerde cachingstrategieën, overweeg het implementeren van service workers:

Basis service worker

// sw.js
const CACHE_NAME = 'hugo-site-v1';
const urlsToCache = [
  '/',
  '/css/main.css',
  '/js/main.js',
  '/images/logo.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Service worker registreren

<!-- In uw Hugo sjabloon -->
<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
</script>

Monitoring en optimalisatie

Bouwtijd monitoring

Volg bouwprestaties:

# Tijd uw bouwen
time hugo

# Gebruik uitgebreide uitvoer om te zien wat verwerkt wordt
hugo --verbose

Cache hit rates

Volg CDN cache hit rates via de analytics dashboard van uw CDN. Strebe naar:

Statische assets: >95% cache hit rate
HTML-pagina’s: 60-80% cache hit rate (afhankelijk van de frequentie van updates)

Prestatietesten

Gebruik tools zoals:

Lighthouse: Test cachingeffectiviteit
WebPageTest: Analyseer cacheheaders
GTmetrix: Monitor prestatie-indicatoren

Samenvatting van beste praktijken

Schakel de bouwcache van Hugo in: Laat Hugo verwerkte resources cachen
Gebruik incrementele bouwen: Bouw alleen wat gewijzigd is
Configureer CDN correct: Lang TTL voor assets, korter voor HTML
Stel juiste HTTP-headers in: Gebruik immutable voor gecachte assets
Fingerprint assets: Voeg inhoudshashes toe aan bestandsnamen
Ongeldigheid van cache bij implementaties: Zorg dat gebruikers updates zien
Volg prestaties: Volg bouwtijden en cache hit rates
Optimaliseer afbeeldingen: Gebruik de afbeeldingsverwerking van Hugo efficiënt
Bundel assets: Verminder HTTP-aanvragen met gebundelde CSS/JS
Overweeg service workers: Voor offline-first of geavanceerde cachingbehoeften

Conclusie

Effectieve cachingstrategieën voor Hugo-sites omvatten meerdere lagen: bouwtijdscaching voor snellere ontwikkeling, CDN-caching voor wereldwijde prestaties en juiste HTTP-headers voor browsercaching. Door deze strategieën te implementeren, kunt u bereiken:

Snellere bouwen: Incrementele bouwen en bouwcache verminderen bouwtijden
Beter prestaties: CDN en browsercaching verbeteren laadtijden
Minder serverbelasting: Statische assets worden op de rand gecached
Verbeterde gebruikerservaring: Snellere paginaladen en offlinefunctionaliteit

Onthoud dat caching een balans is tussen prestaties en frisheid. Statische assets kunnen agressief worden gecached, terwijl HTML korte cachetijden moet hebben om ervoor te zorgen dat inhoudupdates snel zichtbaar zijn.