S rastom JAMstack.org zajednice, Generatori statičkih web stranica postaju sve popularniji.
U ovom ćemo članku pogledati najvažnije generatore statičkih web stranica iz 2020. godine!
Sadržaj:
Zašto koristiti generatore statički web stranica
Kako da koristim generatore statickog webmjesta?
Zašto koristiti generatore statički web stranica
Prvo, razgovarajmo o prednostima generatora statički web stranica.
Brzina izvođenje
Statični generatori web stranica generiraju stranice vašeg web mjesta u vremenu izrade, umjesto u stvarnom vremenu. To znači da kada korisnik zatraži stranicu s vašeg web mjesta, nema kašnjenja. Nema zahtjeva prema bazi podataka. Nema generiranja HTML-a. Jednostavno odgovara servira samu datoteku.
Zbog toga je hosting vaših datoteka nevjerojatno jednostavan. Smještanjem vaše web stranice u mrežu za isporuku sadržaja (CDN), vaše se datoteke mogu replicirati širom svijeta za maksimalnu brzinu.
Sigurnost
Prije generatora statičkih web stranica, programeri bi koristili popularne sustave za upravljanje sadržajem (CMS). Zbog svoje popularnosti često su bili na meti hakera. Sa statičkim generatorima web stranica više vam nije potreban CMS. To znači da ne morate brinuti hoće li vaše web mjesto / podaci biti ciljani od hakera i spamera općenito loši momaka.
Procedura razvoja
Pomoću generatora statičkih web stranica ne trebate graditi ili upravljati vlastitim pozadinskim serverom. Također ne morate pokretati vlastitu bazu podataka. Kad se instalira lokalno svi generatori pokreću lokalno web aplikacije odnosno ono što gradite. To rade nevjerojatno lako na lokalnom serveru, pokretanje lokalnog web servera, automatizaciju izrade, prebacivanje na drugi hosting/server itd.
Mnogo je više prednosti, ali krenimo na popis!
I na kraju, evo popisa najpopularnijih staticki generatora!
1 Gatsby
Gatsby je na vrhu ovog popisa. Gatsby se doista proslavio tijekom proteklih nekoliko godina, uspješno osiguravši više krugova financiranja. Možete pronaci dodatak ( plugin) za sve što vam treba! Ono što me najviše raduje kod Gatsbyja je ekosustav dodataka/plugins. Za gotovo svaki problem koji vam nastane obično možete pronaći dodatak koji će vam pomoći u rješavanju istog.
Gatsby je također nedavno pušten Gatsby Cloud koji se reklamira kao “najbolji način za izradu i postavljanje web stranica sa Gatsby”. Vrijedno je pogledati ako gradite web stranice sa Gatsby.
Rekapitulacija:
- Koristi React i GraphQL
- Gatsby Cloud za optimizirane gradnje
- Veliki izbor dodataka/plugins
- Jaka zajednica
- Podrška za PWA (Progressive Web Apps)
- Nevjerojatna dokumentacija
2 Next.js
Next.js je još jedna nevjerojatna opcija koja je izgrađena na React-u. Također je izuzetno popularan u zajednici i u osnovi je drugi generator statičkih mjesta koji koristi React.
Iako ga navodimo kao statički generator web stranica, važno je napomenuti da to nije sve što je. Next.js prije svega podržava generiranje poslužitelja. Funkcije bez poslužitelja možete definirati i kao krajnje točke API-ja. To vam daje puno kontrole nad načinom izrade i implementacije vaših aplikacija Next.js.
Rekapitulacija:
- generiranje poslužitelja s opcijom izvoza statičnih web stranica
- API rute za funkcije bez poslužitelja
- iza kojeg stoji Zeit
- lako integriranje Zeit
- PWA (Progressive Web Apps) podrška
3 Gridsome
Do sada smo razgovarali o dva generatora statičkih web mjesta koja se temelje na React-u. Sada, prijeđimo na nekoliko izgrađenih na Vue tehnologiji, počevši od Gridsome.
Iako Vue nema baš sljedeće što React trenutno ima, važno je znati da je zajednica Vue nastavila neizmjerno rasti. Bazirano na State of JavaScript anketi, sve više i više ljudi koristi Vue i voli ga.
Usprkos tome, Gridsome je najusporedljiviji s Gatsbyem. Slično kao i Gatsby, pokreće ga GraphQL, koji je trenutno omiljeni alat u zajednici programera. Također ima podršku za PWA-ove i razdjeljivanje koda. Govore puno dobrih stvari o Gridsomeu, pa ako imate Vue iskustva, ovo je izvrsno mjesto za početak.
Rekapitulacija:
- sagrađena na tehnologiji Vue, sve veće zajednice
- usporediv s Gatsbyem
- pokreće GraphQL
- PWA (Progressive Web Apps) podrška
- automatsko dijeljenje koda
4 Nuxt.js
Iako se Gridsome lijepo uspoređuje s Gatsbyjem, naša sljedeća stavka, Nuxt.js, povoljno se uspoređuje sa Next.js. Zapravo je Nuxt.js bio inspiracija za Nuxt.js.
Na primjer, oba generatora podržavaju generiranje poslužitelja kao i statički generirani sadržaj. Nuxt.js navodi da ima “najbolje od oba svijeta” sa svojom sposobnošću koja snažno kombinira to dvoje.
Evo još jednog dodatnog priloga, koji Nuxt.js spominje. Programeri ne trebaju iskorištavati generiranje poslužitelja ili statički generirani sadržaj da bi pronašli razlog za upotrebu Nuxt.js. Kao i kod gore spomenutih okvira, Nuxt.js dodaje neke stvari povrh Vue-a (razmislite o automatskim konfiguracijama ruta) koje bi vrijedilo razmotriti.
Rekapitulacija:
- poslužiteljski prikazan i statički generiran sadržaj
- izgrađena s Vueom, neprestano rastućom zajednicom
- automatsko dijeljenje koda
- PWA (Progressive Web Apps) podrška
5 11ty
Do sada smo razgovarali o statičkim generatorima web stranica koji su izgrađeni na platformi JavaScript. 11ty, s druge strane, jednostavno je izgrađen na JavaScript-u. To znači da ne trebate već biti upoznati s platformama kao što su React ili Vue. Ako ste upoznati s JavaScriptom, spremni ste za početak.
11ty se brendira kao “jednostavniji statički generator web stranica”. To olakšava usvajanje i prilagodbu. Jedna od omiljenih značajki o kojoj drugi govore je činjenica da sami odabirete jezik predložaka. Ako ste već upoznati s nečim poput upravljača, samo naprijed i upotrijebite ga.
Rekapitulacija:
- izgrađeno na Vanilla JavaScript (no frameworks)
- ne treba prethodno razumijevanje React-a ili Vue-a
- odaberite jezik predloška
- jednostavno i izravno
6 Hugo
Hugo je prvi generator statičke web stranice koji ćemo obraditi, a koji ne koristi JavaScript. Izgrađen je s Go-om, jezikom otvorenog koda koji je izradio Google. Go nije toliko popularan kao JavaScript, ali sve više programera / tvrtki koji ga usvajaju.
Jedna od sjajnih značajki Huga su ugrađeni predlošci. Oni su korisni za brzo usvajanje i razvijanje s Hugom. Koriste se prečaci/shortcuts koji se mogu koristiti u Markdown-u za veću fleksibilnost i ponovnu upotrebu.
Rekapitulacija:
- izrađen s programskim jezikom Go
- izuzetno brz
- Go dobiva na jeziku kao jezik
- ugrađeni predlošci za brzi početak
- korisni prečaci/shortcuts u Markdown-u
7 Jekyll
Jekyll je još jedna izuzetno popularna opcija, a izgrađena je s Rubyjem. Ruby je bio nevjerojatno popularan programski jezik, ponajviše s okvirom/framework Ruby on Rails. Dakle, ako poznajete Ruby/Ruby on Rails, vrijeme je da počinjete koristiti Jekyll. To je jedan od generatora statičkih mjesta koji postoji najduže.
Jekyll kombinira Markdown datoteke s vrlo popularnim Tekućinatemplating engine. Zanimljivo je također napomenuti da Github stranice pokreće Jekyll. To znači da svoju Jekyll stranicu možete jednostavno besplatno rasporediti na GitHub!
Rekapitulacija:
- izgrađen s programskim jezikom Ruby
- ogromna zbirka dodataka / ecosystem of Ruby gems
- lako se hostira na Github stranicama
8 Scully
Iznad smo spomenuli nekoliko statičkih generatora web stranica izrađenih s JavaScriptom, ali nikada nismo spomenuli Angular framework. Dobro, Scully je Angularov odgovor na pomamu generatora statičkih web stranica. Scully je još uvijek relativno nov u usporedbi s ostalim opcijama o kojima smo do sada razgovarali.
Iako Angular možda nema tip zajednice koju ima React, i dalje je izuzetno popularan. Angular-ov CLI je nevjerojatan i pomoću njega možete Scully veoma lako dodati postojećem projektu jednom naredbom. Angular je učinio neke nevjerojatne stvari na svojim nadogradnjama u posljednjih nekoliko verzija, a ovo je samo još jedan primjer toga. Angular CLI također ima ugrađene neke nevjerojatne naredbe koje generiraju datoteke projekata za vas.
Rekapitulacija:
- izgrađena s Angular
- Angular CLI dodaje Scully veoma lako postojećem projektu
- Angular CLI alati za scaffolding su sjajni
9 Sculpin
PHP je još jedan nevjerojatno popularan jezik o kojem još nismo razgovarali. Ako vam je PHP najprikladniji, tada ćete htjeti provjeriti Sculpin. Koristi Markdown datoteke i mehanizam za predloške nazvan Twig.
Rekapitulacija:
- izgrađen s PHP-om i Symfony framework-om
- koristi Markdown i Twig mehanizam za predloške
10 Middleman
Middleman je posljednji generator statičkih stranica na našem popisu, a koristi Ruby kao svoj jezik. Sličan je Jekyll-u gore navedenom, i prije uskoka u Middlemana poželjeli biste biti upoznati s Rubyem i ekosustavom RubyGems. Jedna od stvari koje su dobre za učenje ovog framework-a je da su u njihovoj dokumentaciji ugrađeni videozapisi. Ovaj način učenja je naširoko prihvaćen i cjenjen.
Middleman koristi ERB kao zadani jezik predložaka, nešto što bi vam moglo biti poznato ako ste u prošlosti radili s Ruby on Rails. Middleman vam također daje pristup nekolicini drugih jezika za izradu predložaka.
Rekapitulacija:
- izgrađena s Ruby
- ERB kao zadani predložak
- mnoštvo paketa, RubyGems
- YAML za frontmatter