Τεχνολογία

Επισκόπηση των δημοφιλών δημιουργών στατικών ιστότοπων

Όλες οι γεννήτριες στατικών σελίδων έχουν μία και φαινομενικά απλή εργασία: να παράγουν ένα στατικό αρχείο HTML και όλα τα στοιχεία του.

Υπάρχουν πολλά προφανή οφέλη για την εξυπηρέτηση ενός στατικού αρχείου HTML, όπως ευκολότερη αποθήκευση προσωρινής μνήμης, ταχύτεροι χρόνοι φόρτωσης και ένα πιο ασφαλές περιβάλλον συνολικά. Κάθε στατική γεννήτρια σελίδας παράγει την έξοδο HTML με διαφορετικό τρόπο.

απεικονίζονται στατικές γεννήτριες ιστότοπου

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

Επισκόπηση των δημοφιλών στατικών σελίδων πλαισίων

Σε αυτήν την ανάρτηση, θα ρίξουμε μια πιο προσεκτική ματιά στα ακόλουθα στατικά πλαίσια σελίδας: Τζέκυλ , Μεσάζων , Ούγκω , και Hexo . Δεν είναι καθόλου οι μόνες γεννήτριες εκεί έξω, αλλά είναι οι πιο συχνά χρησιμοποιούμενες, υποστηριζόμενες από μεγάλες κοινότητες και πολλούς χρήσιμους πόρους.

Ας ρίξουμε μια πιο προσεκτική ματιά σε καθένα από αυτά και να συγκρίνουμε τα βασικά χαρακτηριστικά τους:

Τζέκυλ
- γραμμένο σε Ruby,
- υποστηρίζει τον κινητήρα προτύπου Liquid έξω από το κουτί.
Μεσάζων
- γραμμένο σε Ruby,
- υποστηρίζει τους κινητήρες προτύπων ERB και Haml έξω από το κουτί.
Ούγκω
- γραμμένο στο Go,
- υποστηρίζει Go template engine από το κουτί?
Hexo
- γραμμένο σε JavaScript,
- υποστηρίζει EJS και Pug από το κουτί.

Σχετίζεται με: Το Back End: Χρήση των Gatsby.js και Node.js για Στατικές ενημερώσεις ιστότοπου

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

Ρύθμιση δημιουργίας στατικών ιστότοπων

Η τεκμηρίωση για καθένα από αυτά τα πλαίσια είναι περιεκτική και τίποτα λιγότερο από εξαιρετική και μπορείτε να το πάρετε εδώ:

Εάν ακολουθείτε απλά τους οδηγούς εγκατάστασης, θα πρέπει να έχετε έτοιμο το περιβάλλον ανάπτυξης μέσα σε λίγα λεπτά. Μόλις εγκατασταθεί, μπορείτε να ξεκινήσετε ένα νέο έργο εκτελώντας εντολές από το τερματικό.

Για παράδειγμα, με αυτόν τον τρόπο ξεκινάτε ένα νέο έργο σε διαφορετικά πλαίσια:

Τζέκυλ

jekyll new my_website

Μεσάζων

middleman init my_website

Ούγκω

hugo new my_website

Hexo

hexo init my_website

Διαμόρφωση

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

Θα μπορούσατε να καθορίσετε πού αποθηκεύονται τα αρχεία προέλευσης ή πού να εξάγονται οι ενσωματωμένες πηγές. Είναι πάντα χρήσιμο να παραλείψετε δεδομένα που δεν θα χρησιμοποιηθούν στη διαδικασία δημιουργίας ρυθμίζοντας την εξαίρεση ή skip_render επιλογή. Θα μπορούσατε επίσης να χρησιμοποιήσετε το αρχείο config για να αποθηκεύσετε καθολικές ρυθμίσεις, όπως τον τίτλο του έργου ή τον συγγραφέα.

Μετεγκατάσταση σε στατική γεννήτρια

Εάν έχετε ήδη ένα Έργο Wordpress έτοιμος να ξεκινήσει, μπορείτε να το μεταφέρετε σε μια στατική γεννήτρια σελίδων με σχετική ευκολία.

Για τον Jekyll, θα μπορούσατε Εξαγωγέας Jekyll συνδέω. Για το Middleman, θα μπορούσατε να χρησιμοποιήσετε ένα εργαλείο γραμμής εντολών που ονομάζεται wp2middleman . Μπορείς να χρησιμοποιήσεις Wordpress στον Χούγκο Εξαγωγέα για τη μετανάστευση Hugo και για το Hexo, μπορείτε να διαβάσετε τη δική μας οδηγός για τον τρόπο μετεγκατάστασης από το Wordpress στο Hexo που έγραψα πέρυσι.

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

Περιεχόμενο

Χρησιμοποιούνται στατικές γεννήτριες σελίδων Χαμήλωση τιμής για το κύριο περιεχόμενο. Το Markdown είναι ισχυρό και μπορεί κανείς να το μάθει γρήγορα. Το γράψιμο περιεχομένου στο Markdown είναι φυσικό λόγω της απλής σύνταξής του. Το έγγραφο φαίνεται καθαρό και οργανωμένο.

περιεχόμενο σε στατικές γεννήτριες σελίδων

Πρέπει να τοποθετήσετε άρθρα σε ένα φάκελο που καθορίζεται στο καθολικό αρχείο διαμόρφωσης. Τα ονόματα άρθρων πρέπει να ακολουθούν τη σύμβαση που καθορίζεται από τη γεννήτρια.

Στο Jekyll, θα πρέπει να τοποθετήσετε ένα άρθρο στο _posts Ευρετήριο. Το όνομα του άρθρου πρέπει να έχει την ακόλουθη μορφή: ΕΤΟΣ-ΜΗΝΑ-ΗΜΕΡΑ-τίτλος. Άλλες γεννήτριες έχουν παρόμοιους κανόνες και παρέχουν μια εντολή για τη δημιουργία ενός νέου άρθρου.

Ακολουθούν οι εντολές για τη δημιουργία ενός νέου άρθρου σε Middleman, Hugo και Hexo:

Μεσάζων

middleman article my_article

Ούγκω

hugo new posts/my_article.md

Hexo

hexo new post my_article

Στο Markdown, περιορίζεστε σε ένα συγκεκριμένο σύνολο σύνταξης. Ευτυχώς για εμάς, όλες οι γεννήτριες μπορούν επίσης να επεξεργαστούν ακατέργαστο HTML. Για παράδειγμα, εάν θέλετε να προσθέσετε μια άγκυρα με μια συγκεκριμένη κλάση, μπορείτε να την προσθέσετε όπως θα κάνατε σε ένα κανονικό αρχείο HTML:

This is a text with a link .

Πρόσοψη

Η πρώτη ύλη είναι ένα μπλοκ δεδομένων πάνω από το αρχείο Markdown. Θα μπορούσατε να ορίσετε προσαρμοσμένες μεταβλητές για να αποθηκεύσετε τα δεδομένα που χρειάζεστε για να δημιουργήσετε καλύτερο περιεχόμενο. Αντί να γράψετε HTML στο Markdown, το οποίο θα μπορούσε να οδηγήσει σε μια ακατάστατη και άσχημη δομή εγγράφων, θα μπορούσατε να ορίσετε μια μεταβλητή στην πρώτη ύλη.

Για παράδειγμα, με αυτόν τον τρόπο θα μπορούσατε να προσθέσετε ετικέτες στο άρθρο σας.

tags: - web - dev - featured

Πρότυπα στο Static Page Generators

Οι στατικές γεννήτριες σελίδων χρησιμοποιούν μια γλώσσα προτύπων για την επεξεργασία προτύπων. Για να εισαγάγετε δεδομένα σε ένα πρότυπο, πρέπει να χρησιμοποιήσετε ετικέτες. Για παράδειγμα, για να εμφανιστεί ο τίτλος της σελίδας στο Jekyll, μπορείτε να γράψετε:

{{ page.title }}

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

{%- if page.tags -%}  {%- for tag in page.tags -%} {{ tag }}
 {%- endfor -%} 
 {%- endif -%}

Μεσάζων:

Ούγκω:

{{ if .Params.Tags }}  {{ range .Params.Tags }} {{ . }}
 {{ end }} 
 {{ end }}

Hexo:

Σημείωση: Είναι καλή πρακτική να ελέγχετε εάν υπάρχει μια μεταβλητή για να αποτρέψετε την αποτυχία μιας διαδικασίας κατασκευής. Θα μπορούσε να σας εξοικονομήσει ώρες εντοπισμού σφαλμάτων και δοκιμών.

Χρήση μεταβλητών

Μια στατική γεννήτρια σελίδων παρέχει καθολικές μεταβλητές διαθέσιμες για παράδοση προτύπων. Διαφορετικός τύπος μεταβλητής περιέχει διαφορετικές πληροφορίες. Για παράδειγμα, ένας παγκόσμιος μεταβλητός ιστότοπος στο Hexo περιέχει πληροφορίες σχετικά με αναρτήσεις, σελίδες, κατηγορίες και ετικέτες ενός ιστότοπου.

Η γνώση των διαθέσιμων μεταβλητών και ο τρόπος χρήσης τους θα μπορούσε να διευκολύνει τη ζωή ενός προγραμματιστή. Ο Hugo χρησιμοποιεί βιβλιοθήκες προτύπων του Go για templating. Η εργασία με μεταβλητές στο Hugo θα μπορούσε να είναι ένα πρόβλημα εάν δεν γνωρίζετε το περιεχόμενο , ή «η τελεία» πώς το ονομάζουν.

Ο μεσάζων δεν έχει καθολικές μεταβλητές. Ωστόσο, θα μπορούσατε να ενεργοποιήσετε το μεσάζον-blog επέκταση που θα σας επέτρεπε να έχετε πρόσβαση σε ορισμένες μεταβλητές, όπως μια λίστα άρθρων. Εάν θέλετε να προσθέσετε καθολικές μεταβλητές, μπορείτε να το κάνετε εξάγοντας δεδομένα σε αρχεία δεδομένων.

Αρχεία δεδομένων

Όταν θέλετε να αποθηκεύσετε δεδομένα που δεν είναι διαθέσιμα σε αρχεία Markdown, θα πρέπει να χρησιμοποιήσετε αρχεία δεδομένων. Για παράδειγμα, εάν θέλετε να αποθηκεύσετε τη λίστα των κοινωνικών συνδέσμων που θέλετε να εμφανίζονται στο υποσέλιδο του ιστότοπού σας. Όλες οι στατικές γεννήτριες σελίδων υποστηρίζουν αρχεία YAML και JSON. Επιπλέον, το Jekyll υποστηρίζει αρχεία CSV και το Hugo υποστηρίζει αρχεία TOML.

Ας αποθηκεύσουμε αυτούς τους κοινωνικούς συνδέσμους στο αρχείο δεδομένων μας. Δεδομένου ότι όλες οι γεννήτριες υποστηρίζουν τη μορφή YAML, ας αποθηκεύσουμε τα δεδομένα στο αρχείο social.yml:

- name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Το Jekyll αποθηκεύει αρχεία δεδομένων σε _data κατάλογο από προεπιλογή. Ο Middleman και ο Hugo χρησιμοποιούν τον κατάλογο δεδομένων και ο Hexo χρησιμοποιεί source/_data directory.

Για να εξάγετε τα δεδομένα, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κωδικό:

Τζέκυλ

{%- if site.data.social -%}  {% for social in site.data.social %}  {{ social.name }}
 {%- endfor -%} 
 {%- endif -%}

Μεσάζων

Ούγκω

{{ if $.Site.Data.social }}

 {{ range $.Site.Data.social }}  {{ .name }} 
 {{ end }} 
 {{ end }}

Hexo

Βοηθοί

Τα πρότυπα υποστηρίζουν συχνά το φιλτράρισμα δεδομένων. Για παράδειγμα, εάν θέλετε να κάνετε τον τίτλο κεφαλαίο, μπορείτε να το κάνετε έτσι:

{ page.title }

Ο μεσάζων έχει παρόμοια σύνταξη:

Ο Hugo χρησιμοποιεί την ακόλουθη εντολή:

{ upper }

Το Hexo έχει διαφορετική σύνταξη, αλλά το αποτέλεσμα είναι το ίδιο.

Πώς χειρίζονται τα στοιχεία του Static Page Generators τα περιουσιακά στοιχεία

Η διαχείριση περιουσιακών στοιχείων αντιμετωπίζεται διαφορετικά μεταξύ των στατικών δημιουργών σελίδων. Το Jekyll συγκεντρώνει αρχεία στοιχείων όπου και αν βρίσκονται. Το Middleman χειρίζεται μόνο στοιχεία που είναι αποθηκευμένα στον φάκελο προέλευσης. Η προεπιλεγμένη θέση για στοιχεία στο Hugo είναι κατάλογος στοιχείων. Η Hexo προτείνει την τοποθέτηση περιουσιακών στοιχείων σε παγκόσμιο ευρετήριο.

κείμενο alt εικόνας

SASS

Ο Jekyll υποστηρίζει τον Sass έξω από το κουτί, αλλά πρέπει να το ακολουθήσετε μερικοί κανόνες . Ο Middleman υποστηρίζει επίσης τον Sass έξω από το κουτί. Ο Hugo συγκεντρώνει τον Sass Σωλήνες Hugo για Sass . Ο Hexo το κάνει μέσω συνδέω .

ES6

Εάν θέλετε να χρησιμοποιήσετε σύγχρονες λειτουργίες JavaScript του es6, τότε θα πρέπει να εγκαταστήσετε μια προσθήκη. Μπορεί να υπάρχουν περισσότερες από μία εκδόσεις ενός παρόμοιου plugin, οπότε ίσως θελήσετε να ελέγξετε τον κώδικα ή να δείτε ανοιχτά ζητήματα ή πιο πρόσφατη δέσμευση για εύρεση του καλύτερου.

Εικόνες

Η βελτιστοποίηση εικόνας δεν υποστηρίζεται από προεπιλογή. Επίσης, όπως τα πρόσθετα es6, υπάρχουν περισσότερα από ένα πρόσθετα για τη βελτιστοποίηση των εικόνων. Κάντε την εργασία σας και προσπαθήστε να βρείτε το καλύτερο πρόσθετο για την εργασία. Εναλλακτικά, θα μπορούσατε να χρησιμοποιήσετε μια λύση τρίτου μέρους. Σε μου Ιστολόγιο που δημιουργείται με το Hexo, χρησιμοποιώ δωρεάν πρόγραμμα Cloudinary. Ανέπτυξα ένα σύννεφο ετικέτα , και παρέχω ανταποκρινόμενες και βελτιστοποιημένες εικόνες μέσω Cloudinary μετασχηματισμών.

Πρόσθετα, Επεκτάσεις

Οι στατικές γεννήτριες σελίδων διαθέτουν ισχυρές βιβλιοθήκες που σας επιτρέπουν να προσαρμόσετε τον ιστότοπό σας. Κάθε προσθήκη εξυπηρετεί διαφορετικό σκοπό. Θα μπορούσατε να βρείτε ένα ευρύ φάσμα προσθηκών, από το LiveReload για ένα καλύτερο περιβάλλον ανάπτυξης έως τη δημιουργία χάρτη ιστότοπου ή ροής RSS.

Θα μπορούσατε να γράψετε μια νέα προσθήκη ή επέκταση. Πριν το κάνετε, ελέγξτε εάν υπάρχει παρόμοιο πρόσθετο. Βλέπω Λίστα προσθηκών Jekyll , Μεσαίες επεκτάσεις , και Πρόσθετα Hexo . Το Hugo δεν διαθέτει πρόσθετα ή επεκτάσεις. Ωστόσο, υποστηρίζει προσαρμοσμένους συντομεύσεις.

Σύντομοι κωδικοί στο Markdown

Οι σύντομοι κωδικοί είναι αποσπάσματα κώδικα που θα μπορούσατε να τοποθετήσετε σε έγγραφα Markdown. Αυτά τα αποσπάσματα εξάγουν κώδικα HTML. Οι Hugo και Hexo υποστηρίζουν συντομεύσεις. Υπάρχουν ενσωματωμένοι σύντομοι κωδικοί, όπως το σχήμα στο Hugo:

{{}}

Κωδικός Hexo youtube:

{% youtube video_id %}

Εάν δεν μπορείτε να βρείτε έναν κατάλληλο σύντομο κωδικό, μπορείτε να δημιουργήσετε έναν νέο. Για παράδειγμα, το Hexo δεν υποστηρίζει ενσωματώσεις CanIUse και το ανέπτυξα μια νέα ετικέτα που υποστηρίζει την ενσωμάτωση CanIUse. Μην ξεχάσετε να δημοσιεύσετε την προσθήκη σας στο npm ή στον επίσημο ιστότοπο της γεννήτριας. Η κοινότητα θα είναι ευγνώμων αν το κάνετε.

CMS

Οι στατικές γεννήτριες σελίδων θα μπορούσαν να είναι γενικές για ένα μη τεχνικό άτομο. Το να μάθεις πώς να χρησιμοποιείς εντολές ή Markdown δεν είναι κάτι εύκολο για όλους. Σε αυτήν την περίπτωση, ένας χρήστης θα μπορούσε να επωφεληθεί Σύστημα διαχείρισης περιεχομένου για ιστότοπους JAMstack . Σε αυτήν τη λίστα, θα μπορούσατε να βρείτε ένα σύστημα που ταιριάζει καλύτερα στις ανάγκες σας. Να γνωρίζετε ότι χρειάζεται αρκετός χρόνος για τη διαμόρφωση του CMS, αλλά μακροπρόθεσμα εσείς και άλλοι χρήστες θα μπορούσατε να επωφεληθείτε από τη δημοσίευση περιεχομένου πιο αποτελεσματικά.

Μπόνους: Πρότυπα JAMstack

Εάν δεν θέλετε να αφιερώσετε πολύ χρόνο στη διαμόρφωση του έργου σας, θα μπορούσατε να επωφεληθείτε Πρότυπα JAMstack . Μερικά από αυτά τα πρότυπα είναι ήδη προεπιλεγμένα με το CMS που θα μπορούσαν να σας εξοικονομήσουν πολύ χρόνο.

Θα μπορούσατε επίσης να μάθετε πολλά εξετάζοντας τον κώδικα. Προσπαθήστε να εγκαταστήσετε ένα πρότυπο, να το συγκρίνετε με άλλα και να επιλέξετε το καλύτερο για εσάς.

Τυλίγοντας

Οι δημιουργικές στατικών σελίδων είναι ένας γρήγορος και αξιόπιστος τρόπος δημιουργίας ενός ιστότοπου. Μπορείτε ακόμη και να δημιουργήσετε μη ασήμαντους και εξαιρετικά προσαρμοσμένους ιστότοπους με μια γεννήτρια σήμερα.

Για παράδειγμα, Περιοδικό Smashing μετακόμισε στο JAMstack πέρυσι και κατάφεραν να επιταχύνουν σημαντικά τον ιστότοπό τους. Υπάρχουν και άλλα επιτυχημένα παραδείγματα στατικών ιστότοπων και όλοι μοιράζονται την ίδια αρχή - για την παραγωγή στατικών πόρων και την παράδοσή τους μέσω δικτύων παράδοσης περιεχομένου για ταχύτερη φόρτωση και ανώτερη εμπειρία χρήστη.

Υπάρχουν πολλά περισσότερα που μπορείτε να κάνετε με τον στατικό σας ιστότοπο: από τη χρήση του Wordpress REST API ως backend έως τη χρήση λειτουργιών Lambda. Υπάρχουν εξαιρετικές λύσεις ακόμη και για απλούς ιστότοπους, όπως η χρήση HTTPS εκτός κουτιού ή διαχείριση υποβολών φόρμας .

Ελπίζω αυτή η επισκόπηση των στατικών πλαισίων σελίδας να σας βοηθήσει να πραγματοποιήσετε τις δυνατότητές τους και να εξετάσετε το ενδεχόμενο χρήσης τους την επόμενη φορά που θα σκεφτείτε ένα νέο έργο.

Σχετίζεται με: Client-side vs Server-side vs Pre-rendering για εφαρμογές Web

Κατανόηση των βασικών

Τι είναι μια στατική ιστοσελίδα;

Μια στατική ιστοσελίδα αποτελείται από σταθερό περιεχόμενο, κωδικοποιημένο σε HTML. Παρέχει τον ίδιο ακριβώς HTML σε κάθε χρήστη. Αυτή η απουσία αυτόματης δημιουργίας κάνει τις στατικές σελίδες εξαιρετικά γρήγορες.

Τι είναι μια δυναμική ιστοσελίδα;

Μια δυναμική ιστοσελίδα βασίζεται σε διακομιστές για τη δυναμική κατασκευή κάθε σελίδας όταν ένας χρήστης ζητά πρόσβαση σε αυτήν. Αυτό επιτρέπει στη σελίδα να εμφανίζει διαφορετικό περιεχόμενο κάθε φορά που προβάλλεται.

Ποια είναι η διαφορά μεταξύ στατικών και δυναμικών ιστότοπων;

Σε αντίθεση με μια στατική ιστοσελίδα, μια δυναμική σελίδα βασίζεται σε scripting από την πλευρά του διακομιστή. Αυτό επιτρέπει μεγαλύτερο βαθμό ευελιξίας και ευκολότερη διαχείριση περιεχομένου. Οι στατικές σελίδες τείνουν να είναι γρηγορότερες, πιο αξιόπιστες και απαιτούν πολύ λιγότερους πόρους.

Τι είναι η στατική γεννήτρια ιστότοπου;

Μια στατική γεννήτρια ιστότοπου (μερικές φορές συντομευμένη SSG) δημιουργεί μια στατική σελίδα HTML χρησιμοποιώντας αρχεία προέλευσης, επιτρέποντας έτσι μια υβριδική προσέγγιση. Θεωρητικά, αυτό σημαίνει ότι μπορείτε να αποκομίσετε ορισμένα οφέλη από τις στατικές σελίδες, χωρίς να εγκαταλείψετε την πρακτικότητα ενός CMS.