JAMstack: So erstellen Sie ein Blog mit Gatsby + Contentful + Netlify

Haben Sie von dem neuen JAMstack-Ansatz gehört? Sie können Webanwendungen in Ihrem bevorzugten Framework erstellen, Inhalte über das Admin-Panel verwalten und vollwertige HTML-Seiten erhalten, die auf den neuesten SEO-, PWA- und a11y-Empfehlungen basieren.


Ist interessant Dann folgt eine Liste der in diesem Artikel behandelten Probleme:


  • Was ist dieser neue Stack und warum wird er benötigt?
  • Wie führe ich eine Basisanwendung mit gatsby aus?
  • Arbeiten mit Contentful und Erstellen der ersten Datenmenge.
  • Wie verbinde ich Contentful und Gatsby mit GraphQL?
  • Richten Sie die automatische Bereitstellung mit Netlify ein

JAMstack


Wie Sie wissen: "Alles Neue ist ein längst vergessenes Altes" und dies ist eine weitere Bestätigung - die Mode für statische Websites ist zurück. Was war das Internet vor zehn Jahren? Es war das PHP-Server-Rendering, das die Daten aus der Datenbank in HTML-Vorlagen ersetzte und sie an den Client schickte.


Server-Rendering


Dieser Ansatz wurde durch JavaScript-Frameworks ersetzt, die in den letzten Jahren durch die heilige Dreifaltigkeit des Web React Angular Vue repräsentiert werden .Amen. Was war der Hauptunterschied? In Bezug auf Geschwindigkeit und Reaktionsfähigkeit der Benutzeroberfläche, da nun die gesamte Logik der Website auf dem Client lag, und für jede Mausbewegung können Sie eine schöne Animation mit wechselndem Inhalt aufrufen und Anforderungen an die API senden.


Client-Rendering


Was weiter? JAM bietet:


  • kein serverseitiges Rendering, und entfernen Sie den Server im Allgemeinen als solchen
  • kein clientseitiges Rendering <div id=”root”></div>
  • Kompilieren Sie die Site einmalig zum Zeitpunkt der Inhaltsänderung in einfachen HTML-Code
  • Platzieren der Site in einem beliebigen Hosting von Dateien

JAM


Der Client erhält immer eine vorgerenderte Seite mit einem vollständig gültigen Layout, und die Frage der Leistung betrifft jetzt nur die Geschwindigkeit der Internetverbindung (natürlich sollten Sie den Koeffizienten des praktischen Verhaltens des Entwicklers nicht vergessen).


Toolkit


JAM ist nur eine Annäherung, die Mittel, für die der Markt bereits ausreicht, aber wie Sie wissen, können Nägel mit allem gefahren werden, aber ich würde einen Hammer vorziehen.


Hammer Nagel


Liste der besten Tools für 2019:


Gatsby ist ein statischer Standortgenerator aus React + GraphQL- Anwendungen. Warum ist es eine solche Wahl, und nicht Angular oder Vue? Ich finde es schwierig, dies zu beantworten, aber höchstwahrscheinlich handelt es sich um eine schlechte Statistik, die besagt, dass trotz aller Streitigkeiten React der beliebteste Rahmen der letzten drei Jahre ist (werfen Sie mir in den Kommentaren keine Steine ​​zu dieser Aussage bezahlte mich tatsächlich). Für eine visuellere Darstellung wird create-react-appder Code in einem JavaScript-Build kompiliert. Zur weiteren Wiedergabe beim Starten der Seite generiert Gatsby vollwertige HTML-Seiten mit einem gültigen Layout, die so angezeigt werden, wie sie sind, selbst wenn JS deaktiviert ist.


Contentful - Content Management System auf statischen Seiten. Dies ist WordPress , das die Verbindung zwischen den Vorlagen und den Daten in der Datenbank nicht speichert, sondern die Daten direkt in den HTML-Dateien ändert.


Netlify ist ein sehr benutzerfreundliches Bereitstellungssystem, mit dem Sie die meisten gängigen File-Hosts mit einer JAM-Anwendung und sogar mit dem HTTPS-Protokoll verknüpfen können.


Von der Theorie zur Praxis


Nachdem Sie sich für die Tools entschieden haben, können Sie fortfahren.


Inhaltlich


Wir erstellen ein Konto und sehen, dass der Dienst standardmäßig ein beispielhaftes Projekt generiert, das ich sofort löschen sollte, da es meiner Meinung nach mehr stört als zu verstehen hilft. Wir erstellen ein neues kostenloses Projekt, ohne Beispiele zu generieren.


Das Content-Management-System basiert auf zwei Entitäten - dem Content-Modell , das die Struktur und Datentypen beschreibt, und den Content selbst . Erstellen Sie zunächst ein einfaches Modell für unseren Blog. Das Inhaltsmodell besteht aus Datentypen, zum Beispiel für einen Blog-Datentypen: Artikel , Person .



Natürlich können Sie eine beliebige Abstraktionsebene auswählen, z. B. Sie können Person abschaffen und Informationen über den Autor im Artikel als _Article.author name angeben

Die Struktur meines Modells
  article/
  ├── title (Short text)
  ├── text (Long text)
  ├── banner (Single media)
  └── publishedAt (Date & Time)
  person/
  ├── fullName (Short text)
  └── avatar (Single media)

Außerdem fügen wir mithilfe bereits erstellter Datentypen Inhalte hinzu. Für Texte ist es möglich, SaganIpsum für Unsplash- Bilder zu verwenden .


Inhaltlich Inhalt hinzufügen


Gatsby


Wir öffnen das Terminal und schaffen eine Arbeitsumgebung


## Установка
npm install --global gatsby-cli
## Создание проекта
gatsby new personal-blog
## Для любителей минимализма можно установить Hello World проект
## gatsby new minimal-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world
## Переходим в папку
cd personal-blog

Projektstruktur
  personal-blog/
  ├── gatsby-browser.js
  ├── gatsby-config.js
  ├── gatsby-node.js
  ├── gatsby-ssr.js
  ├── LICENSE
  ├── node_modules
  ├── package.json
  ├── README.md
  └── src
      ├── components
      │   ├── header.js
      │   ├── image.js
      │   ├── layout.css
      │   ├── layout.js
      │   └── seo.js
      ├── images
      │   ├── gatsby-astronaut.png
      │   └── gatsby-icon.png
      └── pages
          ├── 404.js
          ├── index.js
          └── page-2.js

## Запуск проекта с hot-reloading
gatsby develop

Was ist passiert? React + GraphQL- Anwendung, die mit Gatsby erfasst wurde. Dies bedeutet, dass jedes alte Projekt, das für längere Zeit gerendert wird, auf eine statische HTML-Site übertragen werden kann und mehrmals beschleunigt wird.


Gatsby + zufrieden


## Установка дополнительных пакетов
npm install gatsby-source-contentful dotenv

Erstellen Sie im Stammverzeichnis der Anwendung eine .env- Datei mit folgendem Inhalt:


/* 12-и значный ключ из Contentful → Settings → API keys → Example key 1→ Space ID */
CONTENTFUL_SPACE_ID=xxxxxxxxxxxx
/* 64-х значный ключ из Contentful → Settings → API keys → Example key 1→ Content Delivery API - access token */
CONTENTFUL_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Erweiterung der Konfiguration in gatsby-config.js :


if (process.env.NODE_ENV === "development") {
  require("dotenv").config();
}
module.exports = {
  /* other settings */
  plugins: [
    /* other plugins */
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    }
  ]
}

Starten Sie den Gatsby-Server neu. Wenn die Konsole keine Fehler anzeigt, ist die Verbindung mit Contentful hergestellt und Sie können fortfahren.


Gatsby + GraphQL + Inhaltlich


Wenn Sie mit GraphQL nicht vertraut sind, machen Sie sich keine Sorgen, denn es ist ziemlich einfach. Unsere Website befindet sich jetzt in:


http: // localhost: 8000 /


Aber vorerst werden wir es verlassen und die zweite Registerkarte öffnen:


http: // localhost: 8000 / ___ graphql


Vor uns liegt die Graphite IDE direkt im Browser. Es ist sehr praktisch, Abfragen zu erstellen und zu testen. Klicken Sie auf die Dokumente in der rechten oberen Ecke der Seitenleiste in der Dokumentation zu erweitern, aber die Überraschung ist keine Dokumentation GraphQL , zeichnet es Ihre API. Erweitern Sie die Liste Abfrage , um alle verfügbaren Schemas für Abfragen mit ihren Datentypen anzuzeigen.


Die für uns interessanten Pläne haben ungefähr den folgenden Namen:


Inhaltlich Ihr Datentyp - eine Instanz von
AllContentful Ihr Datentyp - Liste der Instanzen


Ein Beispiel meiner Daten
  • contentfulArtticle
  • zufriedener
  • allContentfulArticle
  • allContentfulPerson

Über das linke Feld erstellen wir die korrekte Anfrage für unsere Daten (versuchen Sie die automatische Vervollständigung, sehr praktisch).


Ein Beispiel, in dem eine einzelne Instanz des Typs Person und eine Liste von Artikel angefordert wird
  {
    contentfulPerson {
      fullName
      avatar {
        file {
          url
        }
      }
    } 
    allContentfulArticle {
      edges {
        node {
          title
          text {
            text
          }
          banner {
            file {
              url
            }
          }
          publishedAt
        }
      }
    }
  }

Was kann aus der Abfragestruktur festgestellt werden:


  • Um die URL für die Datei zu erhalten, müssen Sie den Pfad kontaktieren typeName.file.url
  • Um den Text vom Typ Langtext zu erhalten, gehen Sie den Weg typeName.typeName
  • Verwenden Sie den folgenden Pfad, um eine Liste der Instanzen eines bestimmten Typs abzurufen. allContentfulName.edges

Wir übertragen das Abfrageschema in das Projekt und rendern es als normale Daten in einer React-Anwendung. Es ist allgemein anerkannt, dass eine bewährte Methode eine <StaticQuery />Komponente aus dem Gatsby- Paket verwendet , die bereits im Projekt installiert ist.


Beispieldatei index.js
  import React from "react"
  import { StaticQuery, graphql } from "gatsby"
  import Layout from "../components/layout"
  import Article from "../components/article"
  const IndexPage = () => (
    <Layout>
      <StaticQuery
        query={graphql`
          {
            allContentfulArticle {
              edges {
                node {
                  id
                  title
                  text {
                    text
                  }
                  banner {
                    file {
                      url
                    }
                  }
                  publishedAt
                }
              }
            }
          }
        `}
        render={({
          allContentfulArticle: {
            edges
          }
        }) => (
          edges.map(({ node }) => (
            <Article key={node.id} content={node} />
          ))
        )}
      />
    </Layout>
  )
  export default IndexPage

Wie funktioniert das? Das querySchema der Anfrage wird an GraphQL und an renderunseren bevorzugten JSX übergeben. Verwenden Sie die Destrukturierung, um den Code lesbarer zu machen.


Zerstörung am Beispiel von components / article.js
  import React from "react"
  const Article = ({
    content: {
      title,
      text,
      banner: {
        file: {
          url
        }
      },
      publishedAt
    }
  }) => (
    <div>
      <h2>{title}</h2>
      <img src={url} alt={title}/>
      <p>
        {text}
      </p>
      <h5>{publishedAt}</h5>
    </div>
  )
  export default Article

Wenn nun klar wurde, wie die Daten abgerufen und dargestellt werden sollen, können Sie mit der Entwicklung beginnen. Da es sich bei diesem Artikel jedoch nicht um die Erstellung eines Standorts auf einem Reaktor handelt, werden wir diesen Moment überspringen und uns vorstellen, dass der Standort fertig ist.


Platzieren wir unser Projekt auf GitHub, von wo aus es im nächsten Schritt bereitgestellt werden kann.


Für diejenigen, die noch nicht wissen, wie es geht
  ## Находясь в папке с проектом инициализируем пустой репозиторий
  git init
  ## Сделаем первый коммит
  git add .
  git commit -m “initial commit”
  ## Создаем репозиторий на GitHub и подключаем
  git remote add origin git@github.com:yourname/my-repository-name.git
  ## Публикуем изменения
  git push origin master

Netlify konfigurieren


Wir erstellen ein Konto mit dem Dienst, für den Sie Projekte hosten möchten. Ich habe mich für GitHub entschieden, also haben wir nach erfolgreicher Autorisierung ein neues Projekt eingerichtet, indem Sie auf Neue Website von Git klicken . Wir verbinden unser Repository, und Netlify stellt automatisch fest, dass es sich um ein Gatsby- Projekt handelt, und erstellt alle Skripts für die Erstellung.


Wählen Sie den gewünschten Zweig aus und vergessen Sie die Umgebungsvariablen nicht. Öffnen Sie dazu das Menü Erweiterte Einstellungen, fügen Sie den Inhalt der lokalen .env- Datei hinzu und bestätigen Sie die Einstellungen.


Ein paar Minuten Magie und eine Website auf der Website:
https://tender-liskov-ce3ad0.netlify.com


Es bleibt ein Haken, um den Inhalt zu aktualisieren. Gehe zu den Einstellungen:


Einstellungen bereitstellen → Build-Hooks → Build-Hook hinzufügen Legen
netlify webhook
Sie einen eindeutigen Namen fest, z. B. "Contentful Hook" , wählen Sie den Zweig aus, mit dem wir erstellen und bestätigen. Das Ergebnis wird ein Link sein, kopieren und an die Platte geht gehalt :


Einstellungen → Webhooks
zufriedener Webhook
Wir suchen auf der rechten Seite nach einer Vorlage für Netlify und verbinden mit zwei Klicks zwei Systeme. Wir versuchen, den Inhalt zu ändern und zu sehen, wie neue Daten auf der Website angezeigt werden.


Gesamt


JAM-Stack kombiniert die Lösung der Probleme früherer Ansätze und scheint die Macht und weltweite Beliebtheit zu beanspruchen, aber ist es eine Revolution? Es gibt nichts Neues und Besonderes, aber dies ist die fortschrittlichste Methodik der letzten zwei Jahre in einem fremden Land . Aber was ist mit uns? Wir haben gerade erst angefangen, Projekte von WordPress in React zu übersetzen. Dies ist definitiv ein Fortschritt. Können wir uns nicht als legendäre indische Auslagerung positionieren, sollten wir entscheidende Schritte unternehmen?


Link zum Repository mit dem Projekt


Jetzt auch beliebt: