Foto af rawpixel på Unsplash

Sådan vælges den bedste statiske stedgenerator i 2018

Så.

Mange.

Statiske stedgeneratorer.

Selv for os, der har lavet 15+ (og tæller) demoer & tutorials med dem, kan det blive ganske overvældende.

Jeg kan ikke tro, hvordan det skal være for en udvikler, der bare lærer om JAMstack og det statiske webøkosystem.

Som at lande i freakin 'Wonderland

For at prøve at hjælpe dem besluttede vi at syntetisere vores viden til et omfattende stykke.

Ved udgangen af ​​dette indlæg skal du være i stand til at finde den bedste statiske stedgenerator (SSG) til et bestemt projekt.

Her er hvad du lærer om SSG'er:

  1. Hvad de er (og hvorfor du skal bruge dem).
  2. Hvad er de bedste statiske stedgeneratorer i dag.
  3. Overvejelser at huske på, inden du vælger den.

1. Statiske stedgeneratorer, hvad er de?

Hvis du her er på udkig efter den rigtige SSG, antager jeg, at du har en anstændig forståelse af, hvad de er. Stadig kan en smule kontekst ikke skade.

Statiske websteder er ikke nye. Det var det, vi brugte til at bygge webmåden, før dynamisk CMS (WordPress, Drupal osv.) Overtog.

Hvad er der så nyt?

De moderne værktøjer - hovedsageligt statiske stedgeneratorer - der kom ud i de sidste år, udvidede mulighederne for statiske websteder.

Kort sagt, en statisk stedgenerator tager dit webstedsindhold, anvender det på skabeloner og genererer en struktur af rent statiske HTML-filer klar til at blive leveret til besøgende.

Denne proces bringer sin andel af fordelene sammenlignet med traditionelle CMS'er.

Hvorfor bruge dem?

At skulle dynamisk trække oplysninger fra en database, hver gang en besøgende rammer en side på et indholdstungt websted, kan resultere i forsinkelser, der forårsager frustration og opspring.

SSG'er tjener allerede kompilerede filer til browseren, hvilket skærer belastningstider med stor margin.

→ Sikkerhed og pålidelighed

En af de største trusler ved at udvikle sig med et dynamisk CMS er den manglende sikkerhed. Deres behov for større infrastrukturer på serversiden åbner for mulige overtrædelser.

Med statiske opsætninger er der kun lidt eller ingen funktionalitet på serversiden.

→ Fleksibilitet

Opinionerede og besværlige traditionelle CMS'er begrænser. Den eneste måde at skalere på er med eksisterende plugins og tilpasning er begrænset til tilgængelige tema platforme. Det er sejt, hvis du er en ikke-teknisk bruger, men udviklere finder sig hurtigt fast i hinanden.

SSG'er beder måske om flere tekniske færdigheder, men vil belønne udviklere med frihed. De fleste af dem har også plugin-økosystemer, temaer og let at tilslutte tredjeparts tjenester. Desuden er udvidelsesmulighederne ved hjælp af deres centrale programmeringssprog ubegrænsede.

→ Deres svagheder forsvinder ...

Med et stadigt voksende økosystem omkring udvikling af statisk sted, er mange af dets vigtigste problemer at finde svar gennem nye værktøjer.

Indholdsstyring og administrative opgaver kan være udfordrende for slutbrugere, der ikke har en teknisk baggrund. Gode ​​nyheder er, at der er et imponerende antal hovedløse CMS'er derude, klar til at gennemføre din SSG. Forskellen mellem hovedløs og traditionel CMS er, at du kun bruger den førstnævnte til “indholdsstyring” -opgaver, ikke ved templering og frontend indholdsgenerering. Jeg vedder på, at du finder en, der passer til dine behov.

Nogle statiske CMS'er på stedet understøtter SSG'er lige op. For eksempel Skovbrug for Jekyll & Hugo eller DatoCMS for mange af dem.

Hvad angår dynamiske funktioner, der er nødvendige for en god brugeroplevelse? Der er en masse fantastiske tjenester tilgængelige:

  • Serverløs eller Webtask til backend-funktioner,
  • Netlify til implementering,
  • Algolia til søgning,
  • Snipcart til e-handel,
  • Disqus eller Staticman til brugergenereret indhold.

Dette er blot et par eksempler på, hvad der er derude.

Sælg JAMstack og statiske stedgeneratorer til dine kunder ved at oversætte disse udviklingsfremskridt til forretningsfordele. Læs denne vejledning for at vide mere.

2. Hvilken statisk stedgenerator skal du vælge?

At vide, hvad statiske generatorer er, og hvorfor du skal bruge dem, er en ting. At vide, hvilken man skal vedtage, er en helt anden bestræbelse.

Der er over 400 af dem der strejfer rundt på nettet i disse dage. Hvis du kun starter med statisk webudvikling, hjælper det følgende med din beslutningsproces!

Jeg vil dække nogle af de bedste derude, men husk, at det stadig er en lille del af alle eksisterende SSG'er. For en komplet liste foreslår jeg, at du besøger staticgen.com.

2.1 Bedste statiske stedgeneratorer i 2018

I dette afsnit præsenterer jeg dem, som jeg betragter som du BØR kende, og som vil imødekomme behovene i de fleste projekter. Disse valg er baseret på generel popularitet, men også på vores teams erfaring med at opbygge snesevis af JAMstack-demoer.

Jekyll

Stadig den mest populære SSG med en stor brugerbase og et stort bibliotek med plugins. Det er fantastisk til blogs og også meget brugt af e-handelswebsteder.

Et af Jekylls vigtigste salgssteder for nykommere er dens brede udbud af importører. Det gør det muligt at migrere et eksisterende sted til Jekyll med relativ lethed. Hvis du f.eks. Har et WordPress-sted, kan du skifte til Jekyll ved hjælp af et af dem.

Jekyll giver dig derefter mulighed for at fokusere på indholdet uden at bekymre dig om databaser, opdateringer og kommentere moderering, mens du bevarer permalinks, kategorier, sider, indlæg og tilpassede layout.

Det er bygget med Ruby og integreret i GitHub Pages, så der er en meget lavere risiko for at blive hacket. Teming er enkel, SEO er bagt ind, og Jekyll-samfundet tilbyder en masse plugins til tilpasning.

→ Jekyll Tutorials:

  • Static Site E-Commerce: Integration af Snipcart med Jekyll
  • CloudCannon CMS til Jekyll: Bygning af et flersproget sted
  • Staticman til brugergenereret indhold på et Jekyll Statisk websted

Gatsby

Gatsby bringer statiske sider til frontend-stakke, udnytter JavaScript fra klientsiden, genanvendelige API'er og forudbyggede Markup. Det er en brugervenlig løsning, der opretter en SPA (applikation med én side) med React.js, Webpack, moderne JavaScript, CSS og mere.

Gatsby.js er en statisk PWA (Progressive Web App) generator. Det trækker kun de kritiske HTML, CSS, data og JavaScript, så dit websted kan indlæses så hurtigt som muligt.

Dets rige dataplugin-økosystem giver et websted mulighed for at hente data fra en række kilder, herunder hovedløse CMS'er, SaaS-tjenester, API'er, databaser, filsystemer og mere.

Gatsby har en bred vifte af applikationer og er et solidt valg til websteder, der har brug for at bruge data fra mange kilder. Det er på vej til toppen, ikke blive overrasket, hvis det bliver nummer 1 SSG i de næste par måneder.

Åh, og det kan muligvis også løse en af ​​de største dev-smerter med SSG'er: (lange) atom builds. Skaber Kyle Matthews oprettede for nylig et firma på toppen af ​​sit open source-projekt. Gatsby Inc. bygger en skyinfrastruktur til Gatsby-websteder, der muligvis muliggør inkrementelle builds - en spilskifter for SSG'er.

→ Gatsby-vejledninger:

  • ReactJS E-handel uden backend ved hjælp af Snipcart & Gatsby
  • Grav som hovedløs CMS bundet til Gatsby med GraphQL-skema
  • Statiske formularer, Auth og serverløse funktioner (Gatsby + Netlify-demo)

Hugo

En let at installere, brugervenlig SSG, der ikke har brug for meget konfiguration, før du starter webstedet og kører.

Hugo er kendt for sin opbygningshastighed, mens dens datadrevne indholdsfunktioner gør det let at generere HTML baseret på JSON / CSV-feeds. Du kan også skrive dine egne kortkoder og bruge de forudbyggede skabeloner til hurtigt at oprette SEO, kommentarer, analyser og andre funktioner.

Derudover tilbyder Hugo fuld i18n-support til flersprogede websteder, hvilket gør det nemt at nå et internationalt publikum. Dette er især nyttigt for e-handelshandlere, der ønsker at lokalisere deres websteder.

Plus, de annoncerede for nylig en avanceret temafunktion, der tilbyder en effektiv måde at opbygge Hugo-websteder med genanvendelige komponenter.

→ Hugo Tutorials:

  • Sådan bygger og hostes et (meget hurtigt) statisk e-handelswebsted
  • Statisk e-handel på Hugo med produktstyring i Forestry.io
  • En fantastisk, hurtig statisk e-handelsoplevelse med 6 nemme værktøjer

Next.js

Selvom det ikke nødvendigvis er en SSG i sig selv, er Next.js en letvægtsramme til statiske og server-gengivne React-applikationer.

Det bygger Universal JavaScript-apps, hvilket betyder, at JS kører både på klient og server. Denne proces har øget disse apps præstationer inden for belastning på første side og SEO-muligheder. Next.js 'sæt funktioner inkluderer automatisk kodespaltning, enkel klientside-routing, webpakkebaseret dev-miljø og enhver Node.js-serverimplementering.

JavaScript findes overalt i dag, og reaktion er den mest trendy JS-frontend-ramme i dag, så det er bestemt værd at se på.

→ Next.js Tutorial:

  • Next.js Tutorial: SEO-venlig React E-Commerce SPA
  • Introduktion Byg en server-gengivet ReactJS-applikation med Next.js

Nuxt.js

Tilsvarende i navn og formål som Next.js, Nuxt er en ramme til oprettelse af Universal Vue.js-applikationer. Det muliggør UI-gengivelse, mens abstrahering af klient / server distribution. Det fik også en installationsindstilling kaldet nuxt-generering til at oprette statiske genererede Vue.js-applikationer.

Denne minimalistiske ramme for at gå serverløs er ligetil og enkel, men er uden tvivl rettet mere mod programmatisk implementering i stedet for et traditionelt DOM-stillads.

Da Nuxt er en Vue-ramme, anbefales fortrolighed med Vue stærkt, men udviklere, der har arbejdet med Vue før, vil føle sig hjemme. Med den hurtige stigning af Vue.js i JavaScript-økosystemet - og i betragtning af vores kollektive kærlighed til det - er det ikke underligt, at det ender på denne liste.

Hvis du er en Vue.js-fan, kan du også tjekke VuePress.

→ Nuxt-vejledninger:

  • En tutorial til at bundle cockpit CMS & Nuxt.js i en fuld JAMstack
  • Simpel serverudgivelse, routing og sideovergange med Nuxt.js

2.2 Hovedovervejelser

Dette afsnit tager en anden tilgang til at hjælpe dig med at opdage din soulmate SSG. Du finder et par nye her, som jeg ikke har nævnt i det sidste afsnit.

Her er nogle spørgsmål, du skal stille dig selv, før du vælger det rigtige værktøj:

1. Har du brug for masser af dynamiske funktioner og udvidelser ud af boksen?

Der er to tankeskoler her.

  1. Vælg en statisk stedgenerator, der tilbyder et stort antal funktioner uden for boksen. Du har ikke brug for tonsvis af plugins eller bygge alt selv. I dette tilfælde præsenterer Hugo et stort sæt indbyggede funktionaliteter, som du kan komme direkte på arbejde. Gatsby passer også til regningen her.
  2. Vælg en SSG, der kommer med færre funktioner, men tilbyder et bredt plugin-økosystem, der giver dig mulighed for at udvide og tilpasse din opsætning efter behov. Dette repræsenterer sandsynligvis en af ​​Jekylls største styrker. Det faktum, at det har været så populært så længe, ​​har oversat til et stort samfund og et bredt udvalg af plugins. For at skubbe denne opfattelse yderligere over lader Metalsmith eller Spike alle manipulationer til plugins, hvilket gør dem meget tilpasselige og i stand til at bygge noget. Afvejningen her er, at dette beder om et højere niveau af teknisk dygtighed til at håndtere brugssager. Men dette kan være et sølvfor, hvis du prøver at lære det sprog, din SSG kører på!

2. Hvor vigtig er din build & implementeringstid?

Som jeg allerede har nævnt, er statiske websteder generelt en stor forbedring med hensyn til hastighed, men nogle SSG'er skubber baren yderligere.

Den klare vinder her er Hugo. Det er kendt for sine lynrige hurtige byggetider. Det kan sammensætte et simpelt sted fra markering og skabeloner i millisekunder og gå gennem tusinder af sider på sekunder.

Reaktive rammer som Nuxt er også gode til forestillinger og SEO-formål.

Dette er et område, hvor Jekyll faktisk ser dårligt ud - mange udviklere klager over dens opbygningshastighed.

3. Hvad er den type projekt, du vil håndtere med en SSG?

Overvej dit projekts slutmål. Ikke alle generatorer er oprettet til de samme resultater, og du sparer en masse smerter ved at vælge en, der er specialiseret til det, du prøver at opnå.

→ Blog eller små personlige websteder:

Jekyll er den åbenlyse, man kan nævne her. Det præsenterer sig selv som en blogbevidst SSG, der abstraherer alt, hvad der kan komme i vejen for, hvad der virkelig betyder noget på en blog: indholdet. Hexo er en anden, du skal overveje til at opbygge en enkel blogplatform. I sidste ende vil de fleste SSG'er dog gøre jobbet på dette område.

Tjek også ud: Hugo, Pelican, Gatsby.

→ Dokumentation:

GitBook gør det nemt at skrive og vedligeholde dokumentation af høj kvalitet og er let det mest populære værktøj af denne art.

Tjek også ud: Docusaurus, MkDocs.

→ E-handel:

Du kan også nemt integrere en butik på de fleste statiske stedgeneratorer (som det ses i tidligere tutorials). E-handel kan dog være vanskelig, da mange aspekter kommer i betragtning. Tænk på brugeroplevelsesrelaterede aspekter såsom hastighed og brugerdefineret brugergrænseflade. SEO er også noget, du ikke ønsker at se bort fra, når du udvikler en virksomhed online.

For større butikker, hvor du muligvis har brug for et CMS til produktstyring, skal du spørge dig selv, hvilken SSG der passer bedst til det hovedløse CMS efter eget valg.

Med disse i tankerne, ud fra vores egne oplevelser, foreslår vi, at vi ser på reaktive rammer som Gatsby & Nuxt. Men det betyder ikke, at du skal lægge venligere indstillinger som Jekyll eller Hugo til side, hvis du har brug for at holde alt enkelt.

→ Marketingwebsted:

En, som jeg stadig ikke nævner endnu, er Middleman. Hvad der adskiller denne fra gruppen er, at den sigter mod at give fleksibiliteten til at udforme enhver form for websted, i stedet for at være stærkt rettet mod en bloggingmotor. Det er dejligt for avancerede marketingwebsteder og virksomheder som MailChimp og Vox Media har brugt det til deres egne.

Tjek også ud: Gatsby, Hugo, Jekyll.

4. Hvis du selv er villig til at ændre webstedet og / eller generatoren, har du brug for det for at være på et bestemt sprog, du er velbevandret i?

Hvis ja, her skal du se på følgende sprog:

  • JavaScript: Next.js & Gatsby (for React), Nuxt & VuePress (for Vue), Hexo, GitBook, Metalsmith, Harp, Spike.
  • Python: Pelican, MkDocs, Cactus.
  • Ruby: Jekyll, Middleman, Nanoc, Octopress.
  • Gå: Hugo, InkPaper.
  • .NET: Wyam, kringle.

5. Arbejder ikke-tekniske brugere på dette websted?

Når udviklingsdelen er færdig og webstedet er bygget, hvem skal køre det og redigere dets indhold? I de fleste tilfælde falder dette i hænderne på ikke-tekniske brugere, der har svært ved at navigere gennem kodereposer.

Her skal du kraftigt overveje at parre din SSG med en hovedløs CMS. Ikke kun valget af CMS er vigtigt, men også at finde den rigtige SSG til at fastgøre på fronten er afgørende.

Gatsby har skubbet denne tankegang fremad med en af ​​deres nyeste funktion, en GraphQL-implementering. Jeg vil ikke gå ind på at forklare, hvad GraphQL er, men kort sagt muliggør det hurtigere mindre oppustede dataforespørgsler.

6. Er samfund og hjælp fra kolleger vigtig for dig?

Hvis det er tilfældet, skal du overveje en af ​​de øverste statiske stedgeneratorer, der er nævnt tidligere. Disse er de mest populære lige nu og støttes af de mest aktive lokalsamfunds gydende plugins, casestudier og ressourcer af alle slags.

Husk, at moderne statiske steder og JAMstack stadig er en del af et relativt nyt økosystem, og hvis du starter med mindre kendte værktøjer, vil du hurtigt opdage den manglende hjælp der er til rådighed.

Lukende tanker

Jeg vil ikke afslutte dette indlæg med at fortælle dig, hvilken statisk stedgenerator er den bedste, og hvilken du skal vælge. Primært fordi jeg simpelthen ikke har svaret, men også fordi du nu skulle have nok information til at ringe til det selv.

Alt hvad du skal gøre nu er at gå ud og udforske enhver mulighed, der synes attraktiv for dig. En ting er helt sikkert, det er, at du skal have det sjovt, da SSG'er endelig giver frihed og fleksibilitet tilbage til udviklere.

Hvilken statisk stedgenerator vil du anbefale? Hvad er det næste for JAMstack-økosystemet? Jeg vil virkelig høre fra dig, så vær med til diskussionen i kommentarerne herunder!

Hvis du har haft dette indlæg, skal du tage et øjeblik for at dele det på Twitter.

Jeg udgav oprindeligt dette på Snipcart-bloggen og delte det i vores nyhedsbrev.