Gatsby vs Hugo, en detaljeret sammenligning

I denne artikel sammenligner jeg to statiske stedgeneratorer, Gatsby og Hugo. Jeg diskuterer rammekendskab, stabilitet, sikkerhed, værktøj, opbygningshastighed, ydeevne og samfundet omkring begge dele. Så lad os komme i gang.

For omkring et år siden ændrede jeg min hjemmeside fra Wordpress til Hugo, som er en statisk stedgenerator skrevet i Go, der bruger Go's skabelonbiblioteker til skabeloner. Jeg har for nylig foretaget en levedygtighedsvurdering af Gatsby, en anden statisk stedgenerator skrevet i React, der bruger React til skabeloner.

I denne artikel sammenligner jeg forskellene mellem Hugo v0.42 og Gatsby v1.93. Til sammenligning brugte jeg dette Hugo-websted og dette Gatsby-websted. Koden for hver kan findes på Github til Hugo-webstedet og til Gatsby-webstedet.

Ramme fortrolighed

Hvis du ikke er fortrolig med React, og du ikke har planer om at lære React, skal du sandsynligvis vælge Hugo. Hvis du kender og kan lide React, skal du vælge Gatsby? Nå, ikke nødvendigvis.

Jeg vil hævde, at du har brug for en anstændig forståelse af React (se Lær Reager med disse ressourcer), hvis du vil bruge Gatsby. Og for at forstå React har du brug for en anstændig forståelse af JavaScript (se Lær JavaScript med disse ressourcer).

Selvom jeg har brugt Hugo i næsten et år, var det ikke nødvendigt for mig at forstå Go. Jeg måtte også kun lære lidt om Go's skabelonbiblioteker. Imidlertid fandt jeg ud af, at jeg måtte henvise til dokumentationen oftere med Hugo på grund af min manglende fortrolighed. Gatsby kræver en dybere forståelse af React, end Hugo forventer af Go. Ikke desto mindre, hvis rammekendskab var de eneste kriterier, ville jeg vælge Gatsby, fordi det er rart ikke at skulle referere til dokumentationen, mens jeg tilføjer nye funktioner til min hjemmeside.

Stabilitet

En måde at vurdere stabilitet på ville være at sammenligne Hugos problemer på GitHub med Gatsbys problemer på GitHub. Du vil se, at Gatsby har flere funktioner (hvilket er spændende) men også har flere bugs (hvilket ikke er så spændende). Jeg betragtede oprindeligt ikke stabilitet som et kriterium, før jeg fandt denne fejl, og det fik mig til at indse vigtigheden af ​​stabilitet i software. Jeg tager muligvis denne personligt på grund af den tid og kræfter, jeg brugte på, og forsøgte at finde den fejl, men jeg synes stadig, Hugo er mere stabil end Gatsby.

Sikkerhed

Gatsby bruger JavaScript, og JavaScript-applikationer er berygtede for at kræve, at mange Node-moduler køres. Der er endda et Node-modul, der sender Hot Pocket tweets, og et andet, der høster kreditkortnumre: D. Statiske websteder har en tendens til at være mere sikre af natur, men jeg synes stadig, det er værd at nævne, at flere afhængigheder resulterer i mere kode, som du måske ikke stoler på.

Værktøj

Gatsby har alle fordelene ved JavaScript-værktøjskæden og alle ulemperne ved JavaScript-træthed. Derudover har Gatsby et rigtig flot plugin-bibliotek. Især gatsby-plugin-offline tillod mig let at tilføje offline kapaciteter til min hjemmeside, som jeg stadig ikke har fundet ud af med Hugo.

På den anden side kommer nogle ting, der kræver et plugin med Gatsby, lige ud af kassen med Hugo. For eksempel er gatsby-plugin-react-hjelm nødvendig for at redigere head-tagget, mens dette kan gøres med simpel HTML i Hugo. Da jeg nød at bruge det værktøj, der fulgte med Gatsby, giver jeg dette til Gatsby.

Byg hastighed

Hugo er i stand til at opbygge min hjemmeside uden yderligere værktøj på mindre end 100 ms. Gatsby er i stand til at opbygge min hjemmeside på cirka 15 sekunder, men dette inkluderer en masse ekstra værktøj. Tilføjelse af PostCSS og Imagemin til Hugo-bygningen støder byggetiden op til ca. 5 sekunder. At se på ændringer under udviklingen var også hurtigere ved hjælp af Hugo. Jeg tror, ​​Hugo er vinderen her.

Dokumentation

Både Gatsby og Hugo har rigtig god dokumentation. Hugo har en hurtig start, og Gatsby har en Kom godt i gang-sektion. Gatsby har også en rigtig god tutorial, der udjævner den stejlere indlæringskurve. Personligt fandt jeg det lettere at komme i gang med Gatsby, men det er fordi jeg allerede har forstået React. Jeg synes det er rimeligt at sige, at både Hugo og Gatsby har stor dokumentation.

Ydeevne

Ved hjælp af Lighthouse var præstationsscoren 100 for mit websted i Hugo og 95 for mit websted i Gatsby. Den første tilfredse maling til en 3G-forbindelse var ca. 1 sekund for Hugo-siden og 1,5 sekunder for Gatsby-siden. Brug af websiden Test var belastningstiden på en 2G-forbindelse 8,7 sekunder i Hugo og 11,7 sekunder i Gatsby.

Men ved at lave en simpel manuel test for at se, hvilket sted der indlæses først, var Gatsby mærkbart hurtigere, så jeg forstår ikke rigtig, hvad fyr eller websides test målte. Da Gatsby er en enkelt side-app, kræver navigering på webstedet desuden ikke en anmodning fra serveren. Sider gengives bare med JavaScript. Under alle omstændigheder kan jeg med sikkerhed sige, at både Hugo og Gatsby er hurtige. Jeg ville være interesseret i at høre dine tanker i kommentarerne nedenfor.

Fællesskab

Gatsby vinder hurtigt popularitet, hvilket kommer med et blomstrende samfund. Det betyder ikke, at Hugos samfund er kedeligt. Hvis GitHub-stjerner er noget at gå forbi, har Hugo mere end 27 tusind og Gatsby har mere end 23 tusind. På Twitter synes Gatsby at være mere aktiv end Hugo.

Afsluttende tanker

Så hvilken skal du vælge? Gatsby bruger React, som jeg er mere fortrolig med, det har bedre værktøjer, og det har et blomstrende samfund. På den anden side er Hugo mere stabil og bruger mindre tid på at bygge. For større websteder bliver byggehastigheder vigtigere, og nogle af jer er måske ikke interesseret i React overhovedet. I mit tilfælde var stabilitet de vigtigste kriterier, så jeg besluttede at holde mig til Hugo. Jeg er meget begejstret for at se, hvad fremtiden bringer i dette rum.

Inden du går ... Tak, fordi du læste artiklen! Jeg skriver om mine professionelle og uddannelsesmæssige oplevelser som selvlært softwareudvikler, så tjek min blog eller abonner på mit nyhedsbrev for mere indhold.

Du kan muligvis også lide:

  • Hvordan jeg frigiver opdateringer til min personlige hjemmeside
  • Læringsmateriale - softwareudvikling (en liste over læringsressourcer startende med introduktion til datalogi)
  • Er fuld stack webudvikling værd at lære?