Statische website generators

Statische sites bevatten geen dynamische content en zijn opgebouwd uit statische bestanden, zoals HTML, CSS en JavaScript, die geen server-side verwerking of een database nodig hebben.

Omdat de bestanden vooraf zijn gemaakt, is er geen verdere verwerking nodig als een gebruiker de site bezoekt en zijn er minder resources nodig om de site te laten draaien. Omdat er geen scripts of database nodig zijn om uit te buiten, is de beveiliging van de site meteen ook verhoogd.

Voordelen van statische website generators

Als je bekend bent met HTML, CSS en JavaScript, kun je een statische site bouwen met een tekst- of code-editor. Je hebt echter technische kennis nodig om de inhoud te schrijven, het kan omslachtig en tijdrovend zijn, en naarmate je site groeit, kan het moeilijker worden om hem te beheren en te onderhouden.

Statische site generators (SSG’s) bieden een efficiëntere optie om je statische site te bouwen. Ze bevatten vaak verschillende tools die het gemakkelijker maken om je inhoud te maken, op te maken, te publiceren en te bewerken als dat nodig is. Enkele van de belangrijkste voordelen van het gebruik van een statische site generator zijn:

• Templating: Met een templatingsysteem kun je de structuur en lay-out van je website definiëren met behulp van herbruikbare templates en componenten die je op meerdere pagina’s kunt gebruiken. Dit betekent dat je gemeenschappelijke elementen op meerdere pagina’s niet handmatig hoeft te dupliceren of bij te werken. Dit scheidt ook je inhoud van de ontwerp- en presentatielaag, zodat je je kunt richten op het schrijven en bijwerken van de inhoud.
• Automatisering: Als je site inhoud uit verschillende resources bevat, zoals Markdown bestanden of gegevensbestanden, kan een statische site generator het proces van het omzetten van je inhoud naar HTML bestanden automatiseren. Taken als minificatie, optimalisatie en asset bundeling kunnen ook worden geautomatiseerd. Dit alles bespaart je tijd en vermindert de kans op fouten, doordat je je site kunt maken en optimaliseren zonder elke taak handmatig uit te voeren.
• Versiebeheer: Statische site generatoren integreren met versiebeheersystemen zoals Git, zodat je wijzigingen kunt bijhouden, kunt samenwerken met anderen en gemakkelijk kunt terugkeren naar vorige versies als dat nodig is.
• Incrementele builds: Met incrementele builds, als je wijzigingen aanbrengt en een nieuwe uitvoer genereert, worden alleen de bestanden geregenereerd die zijn gewijzigd sinds de laatste build. Veel statische site generatoren ondersteunen incrementele builds, waardoor de bouwtijd voor grotere sites en kleine updates wordt verbeterd.

Een statische site generator gebruiken

Elke statische site generator (SSG) heeft zijn eigen features, configuraties en templatingsystemen, maar de stappen om een site te genereren die zal worden gehost met Kinsta’s Statische Site Hosting zijn meestal de volgende:

1. Kies je SSG: Er zijn veel SSG’s om uit te kiezen. De eerste stap is het kiezen van degene die het beste past bij je behoeften. Om de site te bouwen en te hosten met Kinsta’s Statische Site Hosting, kies je er een die Node.js gebruikt voor het bouwproces. Hieronder hebben we een lijst met SSG’s die klaar zijn voor gebruik bij Kinsta.
2. Zet een lokale ontwikkelomgeving op: Installeer de benodigde dependencies, waaronder de SSG zelf, eventueel benodigde programmeertalen en een code-editor.
3. Maak je nieuwe site: Maak in je SSG de nieuwe site aan. Dit genereert de basisdirectorystructuur en configuratiebestanden die nodig zijn voor het project.
4. Configuratie: Stel de configuratie van je site in om de sitestructuur aan te passen en hoe de generator je bronbestanden verwerkt. Dit bestand kan instellingen bevatten zoals de invoer- en uitvoermappen, templatepaden, metadata, pluginconfiguraties, enz.
5. Templates: Maak templates en layouts die gemeenschappelijke elementen en structuur voor je pagina’s definiëren, zoals headers en footers, navigatiemenu’s, enz.
6. Voeg content en resources: Maak inhoud of verzamel bestaande inhoud met Markdown of andere ondersteunde indelingen. Elke pagina komt over het algemeen overeen met een bestand in de content map. Assets worden waarschijnlijk opgeslagen in een aparte map naast de contentbestanden.
7. Styling: Wijzig de CSS of preprocessorbestanden (bijv. SASS of LESS) om custom stijlen toe te passen op je site. Sommige SSG’s hebben ook thema’s beschikbaar die kunnen worden geïnstalleerd en aangepast voor styling.
8. Bouw en bekijk hem lokaal: Voer het build commando uit die wordt geleverd door de SSG om je website te compileren. De SSG verwerkt je templates, converteert je inhoudsbestanden naar HTML en genereert de statische bestanden (HTML, CSS en JavaScript). Indien van toepassing voert het ook taken uit als minificatie, optimalisatie en het bundelen van onderdelen. Gebruik deze setp om er zeker van te zijn dat alles er uitziet en werkt zoals bedoeld.
9. Maak je Git repository: Gebruik Git om je repository aan te maken, commit en push dan je nieuwe site naar je nieuwe Git repository.
   1. Als je de site gaat deployen naar Kinsta zonder de build bij Kinsta uit te voeren, dan moeten de bestanden die je vastlegt op je repository de uitvoer van de build zijn (de HTML, CSS en JavaScript bestanden).
   2. Als de site gebouwd moet worden op Kinsta, dan moeten de bestanden die je commit op je repository de inhoud zijn, assets zoals afbeeldingen of andere media, en de SSG bestanden (of configuratiebestanden die de dependencies voor de build ophalen).

10. Deploy je nieuwe statische site:Voeg een nieuwe statische site toe in MyKinsta en koppel deze aan je Git repository om je site te deployen naar Kinsta’s 260+ CDN locaties.
11. Werk bij en onderhoud: Als je aan je site blijft werken, zorg er dan voor dat je de best practices voor versiebeheer volgt, regelmatig wijzigingen commit en bijgewerkt blijft met de nieuwste versies van de SSG en zijn dependencies. Dit zorgt voor een soepel ontwikkelingsproces en stelt je in staat om te profiteren van nieuwe features en bugfixes.

Compatibiliteit statische site generators

Kinsta’s Statische Site Hosting is voor vooraf gebouwde statische sites of sites gebouwd met moderne JavaScript frameworks die Node.js gebruiken om de site bij Kinsta te bouwen. Landingspagina’s, portfoliosites en zelfs sommige kleine blogs die niet te vaak worden bijgewerkt en geen dynamische inhoud nodig hebben (zoals reacties) zijn meestal een goede fit.

Als je site voldoet aan een van de onderstaande voorwaarden, is hij beter geschikt voor onze Applicatie Hosting:

• Er wordt een andere taal dan Node.js gebruikt om de site te bouwen (bijv. PHP).
• Er is server-rendering nodig om de site geheel of gedeeltelijk te leveren.
• Er is een databaseverbinding nodig.
• Er wordt dynamische content geleverd.
• Er zijn sessies of authenticatie nodig die op de server worden beheerd.

Als je niet helemaal zeker weet welke hosting het beste is voor je site, raden we je aan je site op beide te deployment om elke optie uit te proberen en te bepalen welke het beste bij je behoeften past.

Er zijn veel statische sitegenerators beschikbaar en de build commando’s en publish directory kunnen per site verschillen. Kinsta detecteert automatisch verschillende frameworks en vult de velden Build commando en Publish directory in wanneer je je statische site toevoegt.

De onderstaande tabel laat zien welke build opdracht en publish directory je moet gebruiken voor verschillende populaire statische sitegenerators die compatibel zijn met Statische Site Hosting.

* Gridsome of VuePress 1.x

Dit vereist Node 16, of je kunt het volgende toevoegen in de package.json voor het Build commando:

SET NODE_ OPTIONS =--openssl- legacy -provider && vuepress build src

** Hugo

Voeg het volgende toe aan je project:

npm install hugo-bin serve --save-dev

Voeg het volgende toe of vervang het, afhankelijk van je project:

{
  " scripts ": {
    "build": "hugo"
  }
}

Het is gebruikelijk dat Hugo thema’s installatie via een Git submodule aanbevelen. Op dit moment zijn submodules niet compatibel met Statische of Applicatie Hosting, dus de themabestanden moeten beschikbaar zijn in de repository van de site.