Generatorer til statiske sider

Statiske sider indeholder ikke dynamisk indhold og er sammensat af statiske filer som HTML, CSS og JavaScript, der ikke kræver behandling på serversiden eller en database.

Fordi filerne er færdigbyggede, kræves der ikke yderligere behandling, når en bruger besøger webstedet, og der er brug for færre ressourcer til at køre webstedet. Uden scripts eller en database, der kan udnyttes, øges sidens sikkerhed også.

Fordele ved statiske webstedsgeneratorer

Hvis du er fortrolig med HTML, CSS og JavaScript, kan du oprette et statisk websted ved hjælp af en tekst- eller kodeditor. Men du har brug for den tekniske viden til at skrive indholdet, det kan være uhåndterligt og tidskrævende, og når dit websted vokser, kan det blive sværere at administrere og vedligeholde.

Static site generators (SSG) tilbyder en mere effektiv mulighed for at opbygge dit statiske site. De indeholder ofte forskellige værktøjer, der gør det lettere at oprette, style, publicere og redigere dit indhold efter behov. Nogle af de vigtigste fordele ved at bruge en statisk site generator er:

• Templating: Et templating-system lader dig definere strukturen og layoutet på din hjemmeside ved hjælp af genanvendelige skabeloner og komponenter, der kan bruges på tværs af flere sider. Det betyder, at du ikke behøver at duplikere eller opdatere fælles elementer på tværs af flere sider manuelt. Det adskiller også dit indhold fra design- og præsentationslaget, så du kan fokusere på at skrive og opdatere indholdet.
• Automatisering: Hvis din side indeholder indhold fra forskellige kilder, såsom Markdown-filer eller datafiler, kan en statisk sidegenerator automatisere processen med at konvertere dit indhold til HTML-filer. Opgaver som minificering, optimering og asset bundling kan også automatiseres. Alt dette sparer dig tid og reducerer risikoen for fejl ved at give dig mulighed for at oprette og optimere din hjemmeside uden at skulle udføre hver enkelt opgave manuelt.
• Versionskontrol: Static site generators integreres med versionskontrolsystemer som Git, så du kan spore ændringer, samarbejde med andre og nemt vende tilbage til tidligere versioner, hvis det er nødvendigt.
• Inkrimentelle builds: Med inkrimentelle builds er det kun de filer, der har ændret sig siden sidste build, der regenereres, når du foretager ændringer og genererer et nyt output. Mange static site-generatorer understøtter inkrimentelle builds, hvilket forbedrer build-tiden for større sites og små opdateringer.

Brug af en statisk webstedsgenerator

Hver statisk site generator (SSG) har sine egne funktioner, konfigurationer og templating-systemer, men opsætningen til at generere et site, der vil blive hostet med Kinstas Static Site Hosting, involverer normalt følgende:

1. Vælg din SSG: Der er mange SSG’er tilgængelige. Det første skridt er at vælge den, der passer bedst til dine behov. For at opbygge og hoste webstedet med Kinstas Static Site Hosting skal du vælge en, der bruger Node.js til byggeprocessen. Nedenfor har vi en liste over SSG’er, der er klar til brug på Kinsta.
2. Opsæt et lokalt udviklingsmiljø: Installer de nødvendige afhængigheder, herunder selve SSG, alle nødvendige programmeringssprog og en kodeeditor.
3. Opret dit nye websted: I din SSG skal du oprette det nye site. Dette genererer den grundlæggende mappestruktur og konfigurationsfiler, der kræves til projektet.
4. Konfiguration: Opsæt din sides konfiguration for at tilpasse sidens struktur, og hvordan generatoren behandler dine kildefiler. Denne fil kan indeholde indstillinger som input- og outputmapper, skabelonstier, metadata, plugin-konfigurationer osv.
5. Templating: Opret skabeloner og layouts, der definerer fælles elementer og struktur for dine sider, såsom headers, footers, navigationsmenuer osv.
6. Tilføj indhold og aktiver: Opret eller saml eksisterende indhold ved hjælp af Markdown eller andre understøttede formater. Hver side svarer generelt til en fil i indholdsbiblioteket. Assets vil sandsynligvis blive gemt i en separat mappe fra indholdsfilerne.
7. Styling: Ændr CSS- eller præprocessorfilerne (f.eks. SASS eller LESS) for at anvende tilpassede stilarter på din side. Nogle SSG’er har også temaer til rådighed, som kan installeres og tilpasses til styling.
8. Byg og preview lokalt: Kør build-kommandoen fra SSG’en for at kompilere din hjemmeside. SSG’en behandler dine skabeloner, konverterer dine indholdsfiler til HTML og genererer de statiske filer (HTML, CSS og JavaScript). Hvis det er relevant, vil den også udføre opgaver som minificering, optimering og asset bundling. Brug dette setp til at sikre, at alt ser ud og fungerer efter hensigten.
9. Opret dit Git-repository: Brug Git til at oprette dit repository, og commit og push derefter dit nye site til dit nye Git-repository.
   1. Hvis du vil distribuere webstedet til Kinsta uden at køre build på Kinsta, skal de filer, du forpligter dig til dit arkiv, være output fra build (HTML-, CSS- og JavaScript-filerne).
   2. Hvis webstedet skal bygges på Kinsta, skal de filer, du forpligter dig til dit depot, være indholdet, aktiver som billeder eller andre medier og SSG-filerne (eller konfigurationsfiler, der trækker afhængighederne til buildet ind).

10. Implementer dit nye statiske site: I MyKinsta skal du tilføje et nyt statisk websted og forbinde det til dit Git-arkiv for at distribuere dit websted til Kinstas 260+ CDN-placeringer.
11. Vedligehold og opdater: Når du fortsætter med at arbejde på dit websted, skal du sørge for at følge bedste praksis for versionskontrol, regelmæssigt forpligte ændringer og holde dig opdateret med de nyeste versioner af SSG og dens afhængigheder. Det sikrer en smidig udviklingsproces og giver dig mulighed for at drage fordel af nye funktioner og fejlrettelser.

Kompatibilitet med statisk webstedsgenerator

Kinstas Static Site Hosting er til forudbyggede statiske websteder eller websteder bygget med moderne JavaScript-frameworks, der bruger Node.js til at bygge webstedet på Kinsta. Landingssider, brochuresider og endda nogle små blogs, der ikke opdateres for ofte og ikke kræver dynamisk indhold (som kommentarer), er normalt en god pasform.

Hvis dit websted opfylder nogen af følgende betingelser, vil det være bedre egnet til vores Applikation Hosting:

• Den bruger et andet sprog end Node.js til at opbygge siden (f.eks. PHP).
• Det kræver server-rendering for at betjene noget af eller hele webstedet.
• Det kræver en databaseforbindelse.
• Den serverer dynamisk indhold.
• Det kræver sessioner eller autentificering, der administreres på serversiden.

Hvis du ikke er helt sikker på, hvilken hosting der er bedst til dit site, anbefaler vi, at du implementerer dit site på begge for at afprøve hver mulighed og finde ud af, hvad der passer bedst til dine behov.

Der er mange statiske webstedsgeneratorer tilgængelige, og build-kommandoen og publiceringsmappen kan variere fra websted til websted. Kinsta registrerer automatisk flere frameworks og udfylder Build-kommandoen og Publish directory-felterne, når du tilføjer dit statiske websted.

Tabellen nedenfor viser build-kommandoen og publiceringsmappen, der skal bruges til forskellige populære statiske webstedsgeneratorer, der er kompatible med Statisk Webstedshosting.

* Gridsome eller VuePress 1.x

Dette kræver Node 16 eller tilføjelse af SET NODE_OPTIONS=--openssl-legacy-provider && vuepress build src i package.json for Build-kommandoen.

** Hugo

• Tilføj npm install hugo-bin serve --save-dev til dit projekt.
• Tilføj eller erstat følgende, afhængigt af dit projekt:

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

• Det er almindeligt, at Hugo-temaer anbefaler installation via et Git-undermodul. I øjeblikket er undermoduler ikke kompatible med Static eller Applikation Hosting, så temafilerne skal være tilgængelige i webstedets repository.

Relateret dokumentation

• Tilføj en statisk side
• Eksempler på hurtig start af statisk side
• Interne forbindelser

Refereret indhold

• Hvad er en statisk hjemmeside?
• de 13 bedste teksteditorer til at fremskynde din arbejdsgang
• Top 5 generatorer til statiske hjemmesider i 2023
• Hosting af applikationer