Gatsby Och SYLT Stack

Recently jag återupptagit min fru fotografering portfölj, KNW Fotografering, med hjälp av en kombination av Gatsby, Contentful och Netlify. Denna grupp av verktyg utgör ett nytt och spännande webbutveckling arkitektur kända som SYLT stack (Javascript-Api: er och Uppmärkning). I detta inlägg kommer jag att dela mina personliga tankar om var och en av dessa nya verktyg och varför de utgör den “heliga graalen” av statisk webbplats världen.

Varför Andra Statisk Webbplats Generatorer fungerade inte För Mig

om du inte hade märkt webben rör sig i en vansinnig hastighet. Med nya ramar och verktyg introduceras nästan dagligen kan det vara skrämmande även för de mest erfarna utvecklarna. Kanske har du hoppat på tåget för tidigt bara för att ångra det senare. Eller kanske har du gett upp nya verktyg och är glada att nöja sig med föråldrad …err jag menar… betrodda – lösningar. 😉 Visserligen det är en balansgång men jag tror att för att vara relevanta måste vi utvecklas med webben samtidigt som utvalda verktyg är starka nog att hålla.

Det var av dessa skäl som jag var tveksam till att dra igång på en statisk webbplats generator. Jag var rädd för att välja fel man skulle resultera i slöseri med tid, antingen omedelbart eller senare på vägen. Medan statisk webbplats generatorer har funnits i någon form för en stund, se Hugo, Jekyll och Mellanhand, de har för det mesta varit som används av utvecklare eller kod-kunniga bloggare. Även om dessa verktyg erbjuder förmåner sådana som en högre hastighet, bättre säkerhet och enklare kod vad de flesta av dem saknar i min mening är en bra lösning för icke-tekniska användare att uppdatera webbplatsens innehåll. Fråga en icke-utvecklare för att redigera en wiki-filen och sänder in den till GitHub är helt enkelt inte realistiskt för de flesta kunder. En del företag började till och med att fylla denna nisch till exempel Siteleaf och Skogsbruk som ger ett CMS för statiska webbplatser byggda med Jekyll. Även om dessa lösningar till att lösa en del av problemet de kände alltför begränsande för min smak och att skapa något annat än en enkel blogg är som passar en fyrkantig pinne i ett runt hål.

Gatsby Och Vägen Till Framgång

Foto via KNW Fotografering

En dag efter att vädra mitt missnöje om det aktuella tillståndet för statisk webbplats generatorer på Slack en kollega utvecklare rekommenderar jag att kolla in Gatsby. Gatsby är ännu en statisk webbplats generator, men vad som verkligen skiljer det för mig var hur det var byggt med Reagera och betonade en rik plugin-system. Detta var ett stort plus för mig som jag längtar efter att lära sig mer om att Reagera och plugin-system lindras några inledande smärta som jag skulle ha haft att göra med vardagliga uppgifter. I rutan du får en fantastisk utveckling miljö med live ladda om att det krävs nästan ingen konfiguration. Med Gatsby specifika plugins och komponenter Reagerar den kan hantera ganska mycket allt du slänger på den.

Nästa kom integrera statiskt genererade webbplats med data som lagras i ett CMS. Igen Gatsby var väl lämpad för detta och jag kunde lätt integreras med Contentful via plugin. Contentful är ett exempel på en huvudlös CMS, vilket innebär att det är inte knuten till någon särskild teknik eller språk. Contentful gör att du kan lagra innehåll med hjälp av en trevlig användargränssnitt och det kan då mata ut data via ett API. Det bästa av allt Contentful sätter dig i förarsätet och kan du definiera ditt eget innehåll modell men du tycker passar. Tänk Avancerade WordPress Egna Fält på steroider. Med innehåll som lagras i Contentful Gatsby använder sedan Contenful API tillsammans med den otroliga kraften i GraphQL för att hämta data vid kompileringen. Coola grejer!

Den sista pusselbiten var att bestämma var värd för webbplatsen. Jag hade nyligen experimenterat med Netlify på en något meningslöst webbplats och jag var imponerad av dess användarvänlighet och hur de erbjöd en fullfjädrad utvecklare nivå gratis. I ingen tid jag kunde få min Gatsby som drivs webbplats igång på Netlify. Sedan, med hjälp av webhooks jag kunde ha Contentful berätta Netlify att “bygga” på webbplatsen när ett nytt inlägg har publicerats. Slutligen med Netlify form hantering funktionalitet jag hakade upp ett kontaktformulär för alla utan en enda rad av backend-kod eller ens en databas.

slutprodukten

Foto via min personliga portfölj. En annan webbplats som drivs av de verktyg som beskrivs här.

Efter lite över en månad för att mixtra främst på design jag hade en fullt fungerande webbplats är redo att lanseras. Under denna process har jag lärt mig en hel del av hur koden med att Reagera och Gatsby community verkade genuint trevliga och glada att hjälpa mig att lära mig. Slutprodukten var en webbplats som kändes som om den tillhörde 2018 medan det fortfarande så att min fru att enkelt uppdatera innehållet utan hjälp. Inte bara att webbplatsen var oerhört snabbare än tidigare WordPress-version, via HTTPS, används ett CDN och kostade mig $0 dollar i månaden tack vare den extremt generösa gratis nivåer som erbjuds av Netlify och Contentful. 😍

Om du är närvarande på staketet om statisk webbplats generatorer eller SYLT stack i allmänhet har det aldrig funnits en bättre tid att hoppa i. I min ödmjuka mening med dessa verktyg är det äntligen har nått den nivå av mognad att inte bara vara möjligt för klienten att arbeta, men faktiskt ganska jäkla fantastiskt

Gatsby Och SYLT Stack

En Ljus Framtid För Webben

We will be happy to hear your thoughts

Leave a reply