Πώς να οικοδομήσουμε μια τοποθεσία blogging με gatsby

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

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

• Εργαλεία σχεδίασης ιστοσελίδων που θα σας βοηθήσουν να εργαστείτε πιο έξυπνα

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

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

Για περισσότερες επιλογές κατασκευής τοποθεσιών, δείτε την κορυφή μας οικοδόμος ιστότοπου επιλέγει. Χρειάζεστε τη σωστή υποστήριξη; Αυτά είναι τα web hosting Υπηρεσίες που χρειάζεστε.

Κατεβάστε τα αρχεία για αυτό το σεμινάριο.

• 10 καλύτερες στατικές γεννήτριες

Ξεκίνα

Για να ξεκινήσετε, μπορούμε να έχουμε το Gatsby σκαλωσιά από ένα βασικό έργο για εμάς. Παρέχει ένα διακομιστή ανάπτυξης που μπορούμε να χρησιμοποιήσουμε μαζί με μερικά χρήσιμα εργαλεία προγραμματιστή. Βεβαιωθείτε ότι ο κόμβος και η NPM είναι ενημερωμένη και τρέξτε npx gatsby new gatsby-site Στη γραμμή εντολών, με το "Gatsby-site" να είναι ο φάκελος για να δημιουργηθεί σε.

Μέσα σε αυτό το φάκελο, ο Gatsby παρέχει μερικές εντολές στο πλαίσιο της διαδικασίας αρχικοποίησης. Η εκτέλεση αυτών θα κάνει την οικοδόμηση του ιστότοπου πολύ πιο εύκολη. Τρέξιμο Η NPM Run αναπτύσσεται Για να ξεκινήσετε τον διακομιστή ανάπτυξης και να δείτε αυτόματα ενημέρωση αλλαγών στο πρόγραμμα περιήγησης.

Όλο το περιεχόμενο ζει μέσα στο φάκελο / SRC και τυχόν αρχεία ρύθμισης προτίθεται με "gatsby-" στη ρίζα του έργου. Όλα λειτουργούν μέσω εξαρτημάτων, οι οποίες δεν χρειάζεται να έχουν πρόσθετη δομή ή συμπεριφορά για να είναι προετοιμασμένοι με gatsby.

Το περιεχόμενο του φακέλου / SRC / σελίδων είναι ξεχωριστό. Ο Gatsby θα παραλάβει οποιοδήποτε στοιχείο εντός αυτού του φακέλου για να δημιουργήσει μια σελίδα. Ανοίξτε το Index.js και ξεκαθαρίστε τα περιεχόμενα του στοιχείου. Παρατηρήστε ότι η σελίδα ενημερώνεται στο πρόγραμμα περιήγησης καθώς εξοικονομούμε.

 const indexpage = () = & gt; (
  & lt; layout & gt;
    {/ * Άδειο * /}
  & lt; / διάταξη & gt;
) 

Δημιουργήστε μια σελίδα

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

Ο Gatsby έχει μια βιβλιοθήκη γεμάτη από plugins έτοιμο να αλλάξει τον τρόπο που δημιουργεί σελίδες, οι οποίες βρίσκονται στο Gatsbyjs.org/plugins. Εκεί μπορούμε να βρούμε δύο τύπους plugin - 'πηγή' και 'μετασχηματιστή'.

Ένα plugin πηγής θα λάβει δεδομένα από μια πηγή και θα τα μετατρέψει σε «κόμβους», ο οποίος είναι ο τρόπος με τον οποίο ο Gatsby ασχολείται με τις πληροφορίες μέσα σε έναν ιστότοπο. Τα δεδομένα μπορούν να ληφθούν τοπικά για αρχεία όπως εικόνες ή εξ αποστάσεως για εξωτερικά δεδομένα όπως μια βάση δεδομένων.

Ένα plugin μετασχηματιστή μπορεί στη συνέχεια να πάρει αυτούς τους κόμβους και να δημιουργήσει νέους για να κάνουν τα πράγματα ευκολότερα για το gatsby να συνεργαστούν. Για παράδειγμα, τα αρχεία Yaml δεν μπορούν να αναλυθούν από προεπιλογή, αλλά ένα plugin μετασχηματιστή μπορεί να μετατρέψει την ένθετη σύνταξη μέσα τους σε αντικείμενα για να διαβάσει μέσα στα εξαρτήματα.

Το MarkDown είναι μια κοινή μορφή που χρησιμοποιείται για το κείμενο επειδή είναι ευπροσάρμοστο, εύκολο να διαβαστεί και να μετατραπεί σε HTML. Το Plugin Source "Gatsby-Source-FileSystem" μπορεί να πάρει αρχεία τοπικά και να τα μετατρέψει σε κόμβους, ενώ το plugin μετασχηματισμού "Gatsby-μετασχηματιστή-παρατήρηση" χρησιμοποιεί παρατήρηση για να μετατρέψει το Markdown σε κάτι που μπορούμε να πάρουμε και να ερωτευτεί με το graphql.

Το έργο εκκίνησης έρχεται ήδη με το plugin πηγής. Εγκαταστήστε το άλλο τρέχοντας npm εγκαταστήστε το gatsby-μετασχηματιστή-παρατήρηση . Παρακαλείστε να σημειώσετε ότι ο διακομιστής ανάπτυξης ίσως χρειαστεί να γίνει επανεκκίνηση για να γίνει αυτό.

Ρυθμίστε τα plugins

Με το εγκατεστημένο το Plugin, ο Gatsby πρέπει να ειπωθεί πώς να το χρησιμοποιήσετε. Όλη αυτή η λογική πραγματοποιείται στο αρχείο "gatsby-config.js" που παράγεται στην αρχή. Έρχεται με μερικά plugins που έχουν ήδη εγκατασταθεί έξω από το κουτί, αλλά πρέπει να προσθέσουμε τη δική μας στο μίγμα για να μπορέσουμε να παραλάβουμε και να χρησιμοποιήσετε το MarkDown.

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

 plugins: [
  [...]
  "Gatsby-μετασχηματιστή-παρατήρηση",
  {
    Επιλύστε: `Gatsby-Source-FileSystem",
    Επιλογές: {
      Όνομα: `Σελίδες`,
      Διαδρομή: `$ {__ dirname} / src / σελίδες`
    }
  }
] 

Επειδή κάθε θέση θα γίνει η δική του σελίδα, έχει νόημα να τα προσθέσετε στο φάκελο SRC / PAGES. Αυτές οι επιλογές ρύθμισης λένε ο Gatsby να εξετάσει αυτόν τον φάκελο και να βγάλει τα αρχεία.

Δημιουργήστε μια θέση blog

Με τα plugins στη θέση τους, μπορούμε να δημιουργήσουμε την πρώτη μας θέση. Δημιουργήστε ένα φάκελο που ονομάζεται "My-First-Post" και προσθέστε ένα αρχείο "my-first-post.md" μέσα σε αυτό. Αυτή η σύμβαση μας δίνει τη δυνατότητα να προσθέσουμε οποιαδήποτε σχετικά αρχεία - όπως εικόνες - παράλληλα με την ίδια τη θέση.

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

 ---
Διαδρομή: / Post / My-First-Post
Ημερομηνία: 2018-12-01
Περίληψη: Δημοσίευση
Ετικέτες: [, πρώτα, post]
Τίτλος: Η πρώτη μου θέση
----
Αυτή είναι η πρώτη μου θέση! 

Το περιεχόμενο μεταξύ των παύσεων στην κορυφή του αρχείου ονομάζεται «πρόσοψη». Αυτό θα περιέχει μεταδεδομένα γύρω από τη θέση που γράφεται, όπως η ημερομηνία και ο τίτλος. Όλα αυτά τα δεδομένα θα ληφθούν με παρατήρηση και μπορούν να ερωτηθούν μέσα στο graphql.

Το κρίσιμο κομμάτι της εμπρόσθιας ύλης σε αυτή την περίπτωση είναι η μονοπάτι αξία. Αυτό είναι όπου η θέση θα ζήσει και θα πρέπει να είναι μοναδική. Ο Gatsby θα διαβάσει τη διαδρομή και θα κάνει μια νέα σελίδα εκεί.

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

Δημιουργήστε ένα νέο συστατικό στο "SRC / Blogpost.js". Οι πληροφορίες σχετικά με κάθε θέση θα περάσουν ως α δεδομένα Σκοπός από το graphql.

 Η εισαγωγή αντιδρά από το 'αντιδράσει'
Εισαγωγή {graphql} από το "gatsby"
Εισαγωγή κράνους από το «αντιδράσει-κράνος»
Διάταξη εισαγωγής από το '../Components/Layout'
Εξαγωγή Blog CONCT = ({Δεδομένα: {MarkDownRemark}}) = & GT; {
  const {frontmatter, html} = markdownramark
  ΕΠΙΣΤΡΟΦΗ (
    & lt; layout & gt;
      & lt; κράνος τίτλος = {frontmatter.title} / & gt;
      & lt; div επικίνδυνοSetEnnerhtml = {{__html: html}} / & gt;
    & lt; / διάταξη & gt;
  )
} 

Το πακέτο "αντιδράσει-κράνος" που συνοδεύεται από το Gatsby μας επιτρέπει να ενημερώνουμε τις τιμές που συνήθως ζουν μέσα στο & lt; κεφάλι & gt; μιας σελίδας HTML. Εδώ θέτουμε τον τίτλο της ανάρτησης να είναι το & lt; τίτλος & gt; της ίδιας της σελίδας. Υπάρχουν πολλές άλλες επιλογές που δέχεται, το οποίο μπορείτε να μάθετε περισσότερα σχετικά github.com/NFL/REACT-HELMET .

Ερώτημα για δεδομένα

Σε αυτό το σημείο, ο Gatsby δεν έχει καμία ισχύ αυτή τη σελίδα. Πρέπει να αναλάβουμε δεδομένα από τα αρχεία Markdown για να συμπληρώσετε αυτές τις πληροφορίες. Για να το κάνετε αυτό, μπορούμε να χρησιμοποιήσουμε το GraphQL - μια γλώσσα ερωτηματοποίησης που δημιουργήθηκε από το Facebook που τραβάει τα σχετικά δεδομένα σε αντιδρά συστατικά. Εν ολίγοις, το graphql ορίζει τη δομή τα δεδομένα θα επιστραφούν μέσω της χρήσης αντικειμένων. Με αυτόν τον τρόπο, απευθύνουμε μόνο για δεδομένα που θα χρησιμοποιούμε.

Ο Gatsby παρέχει μια κυριολεκτική λειτουργία προτύπου που μπορεί να ερμηνεύσει τα ερωτήματα. Θα ανιχνεύσει οποιαδήποτε χρήση του και θα περάσει τα αποτελέσματά του ως στηρίγματα στο στοιχείο. Αυτό σημαίνει ότι μπορούμε να προσθέσουμε το ερώτημα μέσα στο ίδιο αρχείο και να διατηρήσουμε τη σχετική λογική μαζί.

εξαγωγή const pagequery = graphql »
  Query ($ Path: String!) {
    MarkDownRARK (Frontmatter: {Path: {eq: $ path}}) {
      html
      πρόσοψη {
        Ημερομηνία (FORMATTRTRING: "D MMMM YYYY")
        τίτλος
      }
    }
  } `

Μέσα σε αυτό το ερώτημα, ρωτάμε το Gatsby για όλους τους κόμβους Markdown με ένα μονοπάτι που ταιριάζει με τη σελίδα που είμαστε. Εάν διαπιστώσει ένα, τότε θα περάσει το παρεχόμενο html, ημερομηνία και τίτλο της θέσης στο στοιχείο.

Γράφοντας ερωτήματα Αυτός ο τρόπος περιορίζεται μόνο στα εξαρτήματα σελίδας. Οποιαδήποτε άλλα εξαρτήματα που χρειάζονται ερώτηση για τους κόμβους πρέπει να χρησιμοποιούν & lt; staticquery & gt; και να το φορτώσετε μπροστά. Σε αυτό το σημείο, ο διακομιστής ανάπτυξης μπορεί να προειδοποιήσει γι 'αυτό για το Ανάρτηση Εξαρτήματα, αλλά αυτό συμβαίνει επειδή δεν το γνωρίζει, θα γίνει ακόμα ένα στοιχείο σελίδας. Ας το αλλάξουμε.

Δημιουργία σελίδων

Από προεπιλογή, ο Gatsby κάνει μόνο σελίδες για εξαρτήματα μέσα / SRC / σελίδες , που σημαίνει ότι πρέπει να δημιουργήσουμε σελίδες με κάποιο άλλο τρόπο.

Ο Gatsby εκθέτει μερικές μεθόδους από τη διαδικασία κατασκευής του για να βοηθήσει στην πρόσβαση στους κόμβους δεδομένων. Αυτά μπορούν να προσεγγιστούν μέσω "Gatsby-Node.js" στη ρίζα του έργου. Σε αυτή την περίπτωση, θα χρησιμοποιήσουμε το GraphQL για να φέρετε όλες τις αναρτήσεις ιστολογίου και αφήστε το δημιουργία Η επανάκληση δημιουργεί μια σελίδα για κάθε μία. Καθώς πρόκειται για μια ασύγχρονη δράση, πρέπει να επιστρέψουμε μια υπόσχεση, έτσι ώστε ο Gatsby να συνεχίσει με τη διαδικασία κατασκευής.

 Const Path = Απαιτείται ('Διαδρομή')
Εξαγωγές .Createpages = ({Ενέργειες, graphql}) = & gt; {
  επιστροφή graphql (`
    {
      Όλα τα MarkdownClamark {
        άκρες {
          κόμβος {
            πρόσοψη {
              μονοπάτι
            }
          }
        }
      }
    }
  `)
} 

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

 .then (αποτέλεσμα = & gt; {
  Εάν (αποτέλεσμα) {
    Επιστροφή Promise.Reject (αποτέλεσμα.
  }
  const blogposttemplate = διαδρομή.Resold ('src / components / blogpost.js')
  αποτέλεσμα.data.allmarkdownRemark.Edges.Fooeach (({κόμβος}) = & GT; {
    Actions.Createpage ({
      Διαδρομή: Node.Frontmatter.Path,
      Στοιχείο: BlogPostTemplate,
    })
  })
}) 

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

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

 εξαγωγή const pagequery = graphql »
  query {
    Όλα τα MarkdownClamark (Ταξινόμηση: {Πεδία: [Frontmatter___Date], Παραγγελία: Desc}) {
      άκρες {
        κόμβος {
          πρόσοψη {
            μονοπάτι
            τίτλος
          }
        }
      }
    }
  }
`· 

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

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

 CONCT IndexPage = ({Data}) = & GT; {
  ΕΠΙΣΤΡΟΦΗ (
    & lt; layout & gt;
      {data.allmarkdownramark.edges.map (
        ({Κόμβος: {Frontmatter: {Path, Title}}}) = & GT; (
          & lt; πλήκτρο σύνδεσης = {path} to = {path} & gt;
            {τίτλος}
          & lt; / link & gt;
        )))
    & lt; / διάταξη & gt;
  )
} 

Με αυτό, το blog μας γίνεται. Το μόνο που παραμένει είναι να το καταστρέψουν και να έχουν gatsby να οικοδομήσουμε έναν ιστότοπο έτοιμων παραγωγής. Τρέχοντας npm run build Μπορεί να απομακρύνει τυχόν βελτιώσεις που χρησιμοποιούνται για την ανάπτυξη και να δημιουργήσουν δέσμες έτοιμες για ανάπτυξη. Μόλις τελειώσει, ο φάκελος "Public" μπορεί να μεταφορτωθεί οπουδήποτε που μπορεί να εξυπηρετήσει στατικές τοποθεσίες. Έχετε αρχεία για να αποθηκεύσετε το blog σας; Βεβαιωθείτε ότι είναι ασφαλείς σε λαμπρό αποθήκευση σύννεφων .

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 314 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 314 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

• Το 16 Καλύτερες ελεύθερες πλατφόρμες blogging
• Χρησιμοποιήστε το Wordpress ως ακουστικό CMS
• Πώς να κωδικοποιήσετε ταχύτερα, ελαφρύτερα JavaScript