in blog

Τι είναι οι Static Site Generators – και γιατί το Jamstack είναι η νέα τάση του web development

Σε αυτό το άρθρο θα κάνουμε μια εισαγωγή στο θέμα των μοντέρνων Static Site Generators και στο Eleventy – μαζί με τους λόγους που είναι η προσωπική μου επιλογή.

Όταν ένας χρήστης επισκέπτεται ένα site, ο browser ζητάει από τον server τα δεδομένα της σελίδας. Συνήθως, αυτά θα είναι τα αρχεία html, μαζί με css για την εμφάνιση του περιεχομένου και Javascript κώδικα για πιθανές client-side λειτουργίες. Έτσι λειτουργεί το web με πολύ απλά λόγια, όσον αφορά τη μεταφορά περιεχομένου από site.

Παλιότερα, όταν ακόμη έφτιαχνα τα πρώτα μου site στο geocities, τα πράγματα ήταν πολύ απλά, αφού όλα ακολουθούσαν αυτή τη βασική αρχή: Κάθε ξεχωριστή σελίδα ήταν ένα html αρχείο, το οποίο το έφτιαχνε κανείς μόνος του, γράφοντας "με το χέρι" το markup και το περιεχόμενο. Ήταν απλό, γιατί ο server είχε πάντα διαθέσιμο και έτοιμο όλο το περιεχόμενο για να το μοιράσει στους επισκέπτες. Το μόνο που έπρεπε να γίνει ήταν να δώσει κάθε φορά το κατάλληλο html αρχείο.

Αυτός ο τρόπος web development, όμως, είχε προβλήματα scaling: Με το που ένα site αποκτούσε πολλές σελίδες, εάν ήθελες να αλλάξεις π.χ. το όνομα του τίτλου του site, έπρεπε να πας και να το αλλάξεις σε κάθε ένα από τα html αρχεία σου. Μια φορά για κάθε άρθρο, σε ένα site με 1000 άρθρα. Αυτό, προφανώς, ήταν σοβαρό πρόβλημα.

Γι’ αυτό, ακόμη και από εκείνη την "πρωτόγονη εποχή", υπήρχαν προγράμματα όπως το Microsoft Frontpage, που έλυναν ακριβώς αυτό το πρόβλημα: Σου επέτρεπαν να σχεδιάσεις μια γενική σελίδα, και μετά εκείνα γέμιζαν αυτόματα το περιεχόμενό της, παράγοντας από μόνα τους τα αναγκαία html αρχεία.

Αυτά ήταν και η πρώτη γενικά static site generators, αφού παρήγαγαν στατικά html sites, χρησιμοποιώντας, όμως, αν χρειάζεται, και δυναμικά δεδομένα από τον υπολογιστή του web designer. Μόλις έκανες build, όμως, και ανέβαζες τα αρχεία στον server, μετά δεν άλλαζε τίποτα αυτόματα.

Τι γίνεται όμως με το δυναμικό περιεχόμενο;

Γρήγορα, εμφανίστηκε ένα άλλο πρόβλημα. Το internet εξελισσόταν γρήγορα και η ανάγκη για δυναμικό περιεχόμενο ήταν όλο και μεγαλύτερη. Ας πούμε ότι κάποιος ήθελε να προσθέσει σχόλια σε μια σελίδα. Αυτό δεν γινόταν με στατικές html σελίδες. Μπορούσε, όμως, να λυθεί με server-side scripting και με γλώσσες όπως η PHP. Όπου χρειαζόταν δυναμικό περιεχόμενο, ο προγραμματιστής πρόσθετε ένα μικρό scriptάκι στις κατάλληλες θέσεις του html αρχείου και πριν γίνει serve η κάθε σελίδα, ο server "έτρεχε" το μικρό script και πρόσθετε στη θέση του το οποιοδήποτε δυναμικό περιεχόμενο.

Έτσι, το web από στατικές σελίδες, έδωσε τη θέση του σε δυναμικά blogs και e-shops. Και όσο οι ανάγκες μεγάλωναν, τόσο οι μικρές και εύκολες scripting γλώσσες, άρχισαν να δίνουν τη θέση τους σε περίπλοκα frameworks, που πατούσαν πάνω σε εκείνες και πρόσθεταν μια σειρά από έξτρα εργαλεία ευκολίας, αλλά και συγκεκριμένες (opionated) μεθόδους για να στήνεται και να τρέχει ένα site.

Ένα τέτοιο framework είναι και το WordPress, που ξεκίνησε ως εργαλείο για blogs και εξελίχθηκε σε ένα τεράστιο σύστημα για να στήνεις κάθε είδους δυναμικά site. Το WordPress είναι γραμμένο σε php, αλλά είναι πια τόσο μεγάλο και περίπλοκο, που περισσότερο πρέπει κανείς να μάθει το ίδιο το WordPress και τον τρόπο που λειτουργεί, παρά php.

Τι αρνητικά έχει το WordPress;

Στο WordPress, κάθε σελίδα που ζητείται από έναν επισκέπτη, περνάει από μια διαδικασία επεξεργασίας, όπου "γεμίζει" με το κατάλληλο περιεχόμενο. Αν, ας πούμε, ζητήσω το post που μιλάει για τα "καλύτερα καφέ της Αθήνας":

  • ο client θα στείλει το request στον server
  • ο server θα στείλει το request στο process του WordPress
  • το WordPress θα διαβάσει το url και θα ψάξει στη βάση δεδομένων για το post
  • θα φορτώσει τα δεδομένα του post από τη βάση και θα τα εισάγει στο κατάλληλο layout, μαζί με ότι άλλο css και script πρέπει
  • θα τρέξει οποιαδήποτε άλλη λειτουργία παρέχει το κάθε ενεργό plugin, όπως πχ. να δείξει τα στατιστικά για τα πιο δημοφιλή post
  • τέλος, θα στείλει το τελικό html στον χρήστη

Υπό κανονικές συνθήκες, αυτή η διαδικασία γίνεται για κάθε χρήστη και για κάθε του request. Όπως καταλαβαίνετε:

  • αυτό απαιτεί αρκετούς πόρους από τον server, που σημαίνει "κόστη" για γρήγορο server, αλλιώς το site θα πηγαίνει σαν χελώνα
  • εάν το site έχει πολλή κίνηση, μπορεί ο server να φτάσει εύκολα τα όριά του

Ακόμη, κάποια άλλα πράγματα που, κατά τη γνώμη μου, είναι αρνητικά:

  • Tο WordPress είναι μια περίπλοκη, ζωντανή εφαρμογή που τρέχει online, που σημαίνει τεράστια επιφάνεια για επιθέσεις και exploits. Πρέπει συνέχεια να το κρατάς updated, να μανατζάρεις το security του και να προσεύχεσαι να μην σου κάτσει η στραβή
  • Το ότι όλα φτιάχνονται στον editor του WordPress και το ότι πάντα υπάρχει μια SQL βάση δεδομένων από πίσω, η οποία συχνά παραφορτώνεται με ένα σωρό άχρηστα δεδομένα από τα plugins, δυσκολεύει το πιθανό portability του περιεχομένου

Επιστροφή στα SSGs

Άρα, σίγουρα για πολλά site, όπως μεγάλα ειδησιογραφικά blogs, ένα ζωντανό CMS σαν το WordPress είναι απαραίτητο και το όλο κόστος για να τρέχει καλά είναι κατανοητό. Όταν, όμως, μιλάμε για ένα μικρό blog, που ούτε ανανεώνεται συχνά, ούτε έχει ανάγκη από (υπερβολικά) δυναμικό περιεχόμενο, το WordPress αποτελεί ένα overkill, που καταλήγει να είναι περισσότερο ταλαιπωρία (με όλο το administration που θέλει) παρά ευκολία.

Αυτό ένιωθαν και πολλοί ακόμη developers στον κόσμο, και τα τελευταία χρόνια δημιουργήθηκε μια τάση για επιστροφή στους παλιούς, απλούς τρόπους. Στο να φτιάχνουμε, δηλαδή, όπου μπορούμε, στατικό περιεχόμενο και να κάνουμε τα πράγματα λιγότερο περίπλοκα.

Την όλη προσέγγιση, τη λένε Jamstack, δηλαδή technology stack που περιλαμβάνει Javascript, APIs και Markup.

Ουσιαστικά:

  • Markup για το περιεχόμενο, που ίσως γράφεται σε Markdown και γίνεται serve σε html
  • Javascript για δυναμικό περιεχόμενο, που όμως τρέχει στους clients και όχι στους δικούς μας server
  • APIs αντί για μια κεντρική database, απ’ όπου οι clients μπορούν να φορτώσουν δυναμικό περιεχόμενο μέσω Javascript

Και όλα αυτά, για να γίνουν πιο εύκολα, τα "δένουν" μεταξύ τους οι νέοι Static Site Generators, που έχουν ρόλο να παράξουν το τελικό περιεχόμενο αυτόματα.

Μερικοί γνωστοί SSGs είναι οι Hugo, Jekyll, Next.js, Gatsby. Κάποιοι από αυτούς είναι γραμμένοι σε Javascript, άλλοι σε Go, o Jekyll σε Ruby. Πολλοί, όμως, έχουν κοινό ότι χρησιμοποιούν το React framework για το front-end κομμάτι τους. Αυτό τους επιτρέπει να παράγουν σελίδες που ουσιαστικά τρέχουν σαν progressive apps για τους χρήστες και απλώς κάνουν οι ίδιες request δυναμικά το περιεχόμενο που χρειάζεται.

Ταυτόχρονα, υπάρχουν αρκετές υπηρεσίες/hosts όπου μπορεί κανείς να φιλοξενήσει το site του, πολλές φορές δωρεάν (όπως στο Github Pages ή στο Netlify.

Ακόμη, η λογική είναι ο κώδικας του site να βρίσκεται σε ένα Git repository και ο host να παίρνει αυτόματα τον κώδικα και να τον κάνει build και serve. Έτσι, διατηρείται σε μεγάλο βαθμό η ευκολία ενός δυναμικού site με framework για το θέμα της ανανέωσης περιεχομένου. Σκεφτείτε πως υπάρχουν και κανονικά CMSs γραμμένα σε Javascript για να μπορείτε να αλλάζετε το περιεχόμενο των markdown από έναν browser.

Σε μεγάλο βαθμό, δηλαδή, η εμπειρία μπορεί να μοιάζει με ένα WordPress blog – έχοντας, όμως, όλα τα πλεονεκτήματα ενός static site.

Γιατί ήθελα να μετατρέψω το site μου;

Το Φοιτηtips είναι ένα blog για τη φοιτητική ζωή, που έτρεξε από το 2008 μέχρι το 2017. Στην καλύτερή του εποχή, είχε περίπου 70.000 pageviews τον μήνα. Στις μέσες περιόδους, είχε γύρω στις 30.000. Ποτέ, όμως, δεν ήταν ένα blog με συχνό περιεχόμενο. Ένα νέο post γραφόταν περίπου μια φορά τον μήνα και άλλοτε περνούσαν μήνες μέχρι το επόμενο post. Σήμερα, το blog είναι ανενεργό, αφού καταρχήν έχω προχωρήσει από τη φοιτητική φάση και τη θεματολογία, και δεύτερον επειδή ασχολούμαι με το newsletter μου και το δικό του blog.

Επειδή, όμως, αρκετά από τα post του Φοιτηtips είναι διαχρονικά και ακόμη και σήμερα έχει γύρω στις 10.000 pageviews τον μήνα, ενώ δεν έστεκε να τρέχει σε WordPress και να έχει όλο αυτό το overhead, θεώρησα ότι ήταν η κατάλληλη ευκαιρία για να μάθω έναν καλό Static Site Generator και να μετατρέψω το blog σε ένα παν-γρήγορο και ασφαλές, αρχειακό site.

Να πω ότι ο server μου είναι σε ένα shared server της Ελληνικής Tophost, ο οποίος ναι μεν κάνει τη δουλειά του, αλλά τον τελευταίο καιρό ήταν τραγικά αργός (ότι πληρώνεις παίρνεις). Στο πλάνο μου έτρεχα ταυτόχρονα τρία WordPress installations, που δεν ξέρω αν ήταν λογικό για τα resources που είχα, πάντως σίγουρα η εμπειρία του τελικού χρήστη ήταν τραγική. Καμιά φορά, μέχρι να ξεκινήσει το loading του site, περνούσαν ακόμη και 7 δευτερόλεπτα. Δεν είμαι σίγουρος που ακριβώς βρισκόταν το bottleneck, αλλά σε static sites στον ίδιο server, τα πάντα φόρτωναν άμεσα.

Γιατί διάλεξα το Eleventy

Το Eleventy είναι ένας (σχετικά) απλός static site generator γραμμένος σε Javascript.

Αφού ασχολήθηκα λίγο με Jekyll και με Gatsby, κατάλαβα ότι ήθελα κάτι διαφορετικό – και βρήκα αυτό που ήθελα στο Eleventy. Σε μεγάλο βαθμό, είναι όπως θα έκανα ο ίδιος develop τον δικό μου SSG.

Γιατί, όμως;

Πρώτον, δεν ήθελα κάποιον generator που χρησιμοποιούσε React, γιατί πολύ απλά δεν ήθελα να το μάθω. Ήταν overkill για αυτό που ήθελα, δεν είχα σκοπό να το χρησιμοποιήσω σε κάτι άλλο και προτιμούσα να σπαταλήσω τον χρόνο μου αλλού.

Δεύτερον, ανάμεσα σε generators που ήταν γραμμένοι σε Javascript, Go και Ruby, προτιμούσα σίγουρο τη Javascript, αφού ότι περισσότερο μάθω για αυτή μπορεί να μου φανεί χρήσιμο και σε άλλα project. (Φυσικά, αν υπήρχε κάποιος μεγάλος generator σε C# θα τον κοιτούσα πολύ σοβαρά)

Το Eleventy, λοιπόν, είναι γραμμένο σε Javascript. Για templating σου επιτρέπει να χρησιμοποιήσεις όποια θες από 10 γλώσσες – και να τις συνδυάσεις. Και φαινόταν να έχει πολύ καλή φιλοσοφία, με σκοπό να είναι απλό και extensible. Από άποψη concepts, ουσιαστικά, είναι σαν το Jekyll, απλά χωρίς Ruby. Αυτό είναι καλό, αφού υπάρχει πολύ documentation για το Jekyll, αν χρειαζόταν να καταλάβω κάτι που δεν υπήρχε στο documentation του Eleventy.


Στο επόμενο άρθρο, θα περιγράψω τη διαδικασία που ακολούθησα για να μετατρέψω ένα από τα blog μου (το Φοιτηtips) από WordPress σε static site με το Eleventy – μαζί με όσα εμπόδια συνάντησα και με τις λύσεις που βρήκα.

Η Checklist είναι ένα δι-εβδομαδιαίο newsletter για την παραγωγικότητα, τους στόχους, τη ζωή στο εξωτερικό, τη διαχείριση του χρόνου και ότι επηρεάζει τη ζωή μας.

Γίνε μέλος μαζί με 600+ αναγνώστες για να λαμβάνεις την Checklist στο email σου.

Η κάνε κλικ εδώ για να μάθεις περισσότερα.

Comment: