So erstellen Sie ein Blog von Grund auf mit React, Markdown, GraphQL und GatsbyJS

Ich zeige Ihnen heute, wie Sie Ihr eigenes Blog von Grund auf neu programmieren können, ob Sie es anpassen, monetarisieren, die Sicherheit erhöhen oder einfach lernen möchten.

Es gibt viele schnelle und einfache Möglichkeiten, Blogs ohne Programmcode zum Laufen zu bringen - wie z. B. Mittel oder Wordpress -. Ob es nun um das Anpassen, Monetarisieren, Hinzufügen von Sicherheit oder einfach nur ums Lernen geht, ich werde Ihnen heute zeigen, wie es geht Code dein eigenes Blog von Grund auf neu.

Wenn Sie Ihrer vorhandenen Website ein Blog hinzufügen oder mit einem neuen Blog beginnen, können Sie mit einem statischen Site-Generator loslegen.

Statische Site-Generatoren wie GatsbyJS dienen in erster Linie der Bereitstellung von festen Inhalten, können jedoch auch für nahezu jede Webanwendung verwendet werden, einschließlich Blog- und E-Commerce-Webanwendungen.

In diesem Beitrag erstellen wir ein Blog von Grund auf mit GatsbyJS, dessen Kern ReactJS und GraphQL sind.

Was ist GatsbyJS?

Gatsby ist ein einfacher, robuster und schneller Generator für statische Websites. Mit ReactJS werden statische Inhalte im Web gerendert. Der Inhalt in einer Gatsby-App wird wie in jeder anderen React-App geschrieben: über Komponenten. Diese Komponenten werden beim Erstellen des DOM als statisches HTML, CSS und JavaScript gerendert.

Auf hoher Ebene verwendet Gatsby verschiedene Quell-Plugins, um Daten zu lesen und über eine GraphQL-Schnittstelle verfügbar zu machen. Sie schreiben GraphQL-Abfragen, um diese Daten zu laden und React-Komponenten zu rendern. GraphQL kann Inhalte rendern, die aus einer Vielzahl von Formaten und Quellen wie Markdown, CSV und CMS wie Wordpress, Drupal, GraphCMS usw. stammen.

Warum Gatsby benutzen?

Gatsby kümmert sich viel hinter den Kulissen.

  • Zukunftssichere JAMstack-Websites
  • Gatsby hat ein reichhaltiges Plugin-Ökosystem, das leicht erweiterbar ist
  • Vorkonfiguriertes Webpack-basiertes Build-System (Sie müssen sich nicht den Kopf zerbrechen)
  • Unterstützt standardmäßig PWA (Progressive Web App)
  • Optimiert für Geschwindigkeit. Gatsby lädt nur kritische Teile, damit Ihre Site so schnell wie möglich geladen wird. Nach dem Laden ruft Gatsby Ressourcen für andere Seiten ab, sodass sich das Klicken auf die Site unglaublich schnell anfühlt

Gatsby verfügt auch über ein ständig wachsendes Daten-Plug-in-Ökosystem, insbesondere für die Datenumwandlung. Insgesamt denke ich, dass die obigen Punkte ausreichen sollten, um Sie zum Ausprobieren zu verleiten.

Voraussetzungen

  • Vertrautheit mit HTML, JavaScript, ReactJS
  • Nodejs mit Npm oder Garn installiert
  • Gatsby CLI (die wir im nächsten Abschnitt installieren werden)

Hinweis: Zum Zeitpunkt des Schreibens dieses Tutorials wurde Gatsby v2 offiziell gestartet.

Erste Schritte mit Gatsby

Zu Beginn müssen wir das von GatsbyJS bereitgestellte Befehlszeilendienstprogramm installieren, um schnell Gerüstprojekte erstellen zu können. Öffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein.

Führen Sie den folgenden Befehl aus, um zu überprüfen, ob es installiert wurde.

Sobald Sie gatsby-cli erfolgreich installiert haben, ist es Zeit, ein neues Projekt zu generieren.

Dieser Vorgang dauert ein oder zwei Minuten und am Ende haben Sie ein neues Verzeichnis. Durchquere es. Die Standardprojektstruktur von Gatsby sieht folgendermaßen aus:

Um zu sehen, was wir standardmäßig erhalten, führen Sie gatsby develop aus. Dadurch wird das Projekt ausgeführt, ohne dass das offizielle Build-Verzeichnis auf einem Entwicklungsserver über das Webpack erstellt wird (von Gatsby intern verwendet). Nachdem der Befehl erfolgreich ausgeführt wurde, werden Sie vom folgenden Bildschirm in Ihrem Terminal wie unten aufgefordert.

Sie können http: // localhost: 8000 besuchen, um die Standardwebsite in Aktion zu sehen.

Ausführen einer GraphQL-Abfrage

Jedes Gatsby-Projekt enthält mindestens diese Dateien. Einige davon sind Ihnen möglicherweise vertraut, z. B. node_modules und public directory, die bei der Bereitstellung bereitgestellt werden. Es enthält auch package.json, das die Metadaten jeder modernen Javascript-Anwendung enthält.

Unser Hauptaugenmerk liegt auf dem Verzeichnis src und Dateien wie gatsby-config.js und gatsby-node.js. Diese enthalten die Metadaten und andere wichtige Informationen zu unserer aktuellen Anwendung. Im src / befinden sich zwei Unterverzeichnisse: components / und pages /. Die Komponenten / enthalten zwei weitere Dateien: layout.css und layout.js. Diese dienen als Ausgangspunkt unserer Bewerbung.

Sie haben bereits gesehen, wie die mit Gatsby gelieferte Standardseite aussieht. Wir haben einen Titel in der Navigationsleiste. Fügen wir einen Untertitel hinzu. Öffnen Sie gatsby-config.js und eine neue Feldbeschreibung und ändern Sie den Titel wie unten.

Mit Gatsby können wir Metadatenfelder abfragen, die in dieser Datei als GraphQL-Abfrage beschrieben sind. Um einen Blick darauf zu werfen, welche Art von Sachen wir von Gatsby abfragen können, führen Sie gatsby development vom Terminal aus aus. Sie werden unter http: // localhost: 8000 / noch keine Änderungen sehen, da wir die dafür verantwortliche Komponente nicht geändert haben. Sie können dies jedoch überprüfen, indem Sie eine einfache GraphQL-Abfrage ausführen. Öffnen Sie http: // localhost: 8000 / ___ graphql im Browser.

Wir haben den GraphQL-Browser geöffnet und sehen nebenbei den Dokumentations-Explorer, mit dem wir unser Schema durchgehen und uns ansehen können, nach was für Dingen wir fragen können. Klicken Sie auf den Abfragetyp auf der rechten Seite, um zu sehen, auf welche Abfragefelder wir zugreifen können.

Dadurch erhalten wir eine Liste aller Abfragetypen, nach denen wir suchen können. Schauen Sie sich die Site und die SiteMetadata an. Sie können beginnen, ein s einzugeben, und es wird eine automatische Vervollständigung für die Abfragetypsite angezeigt. Das ist sehr hilfreich. Führen Sie die folgende Abfrage aus.

Toll!

Jetzt, da Sie mit den Einzelheiten von Gatsby vertraut sind und wissen, wie es funktioniert, werden wir im nächsten Abschnitt mit der Arbeit am Blog beginnen.

Schreiben Sie unseren ersten Markdown-Blogbeitrag

Gatsby verwendet verschiedene Plugins zum Erstellen statischer Websites. In diesem Abschnitt werden wir installieren und konfigurieren, um Gatsby-Source-Dateisystem und Gatsby-Transformer-Remark zu verwenden und mit lokal gespeicherten Markdown-Dateien zu arbeiten. Öffnen Sie Ihr Terminal und geben Sie ein.

Ich verwende Garn, weil Gatsby es standardmäßig über npm als Paketmanager verwendet. Sobald diese beiden Abhängigkeiten installiert sind, konfigurieren Sie die Datei gatsby-config.js wie folgt.

Der Rest der Plugins bleibt gleich. gatsby-transformator-remark wird verwendet, um Markdown-Dateien im .md-Format in HTML zu analysieren. gatsby-source-filesystem hilft uns beim Lesen dieser Markdown-Dateien von der Festplatte. Jeder Beitrag in unserem Blog wird im Markdown-Format verfasst.

Um es besser zu verstehen, lassen Sie uns einige Beiträge hinzufügen. Wechseln Sie in das Verzeichnis src / pages und fügen Sie dann ein oder zwei Beiträge in einem Jahr-, Monats- und Datumsformat mit einem Slug wie unten hinzu.

Jede Markdown-Datei sollte Frontmatter-Felder enthalten, die zum Erstellen und Aktualisieren unserer Posts verwendet werden. Öffnen Sie die Datei 2018-11-14-hello-world.md und den folgenden Inhalt.

Ebenso können Sie den Inhalt zum zweiten Beitrag hinzufügen.

Der Inhalt dieser beiden Markdown-Dateien werden unsere ersten beiden Blog-Beiträge sein. Der in Bindestrichen umgebene Block wird als Frontmatter bezeichnet, und der Inhalt des Blocks kann verwendet werden, um React-Komponenten mit den angegebenen Daten zu versehen, z. Pfad, Datum, Titel, Tags usw.

Ein wichtiger Hinweis ist, dass der Pfad verwendet wird, wenn wir unsere Seiten dynamisch erstellen, um die URL zu jedem Blog zum Rendern der Datei anzugeben. Das machen wir später.

Erstellen der Blogvorlage

Wenn Sie sich Ihr Blog in einem Browser ansehen, werden Sie feststellen, dass Gatsby noch keine Blog-Beiträge anzeigt, die Sie erstellt haben. Dies liegt daran, dass Gatsby immer noch nicht weiß, wo sich diese Blog-Posts befinden oder dass Sie sie sogar im Browser anzeigen möchten. Wenn Sie jedoch versuchen, es in der Registerkarte des GraphiQL-Browsers abzufragen, sehen Sie, dass die Frontmatter-Daten des Blog-Posts verfügbar sind.

Jede Markdown-Datei wird in einen Knoten vom Typ MarkdownRemark geparst. Um alle Markdown-Dateien in on query abzufragen, verwenden wir allMarkdownRemark. Alle Frontmatter-Felder werden in GraphQL-Felder konvertiert.

Um jeden Beitrag anzuzeigen, erstellen wir eine neue Vorlage, die einen konsistenten Stil aufweist und die Frontmaterie der gerade gesehenen GraphQL-Abfrage berücksichtigt. Erstellen Sie im Verzeichnis src einen neuen Ordner mit dem Namen templates und erstellen Sie darin eine neue Datei mit dem Namen blogPost.js.

Beachten Sie in dieser Komponente die neue Abfrage postQuery, die wir erstellen. Diese Abfrage hilft uns, unsere Blog-Beiträge in der Vorlage anzuzeigen. Diese Abfrage enthält alle wichtigen Informationen, die zum Anzeigen von Blogbeiträgen in den Requisiten der Komponentenvorlage erforderlich sind.

Oben rufe ich den Titel für jeden Beitrag und den HTML-Inhalt ab. Beim Rendern der Ausgabe, die wir aus der Abfrage erhalten, verwende ich gefährlich SetInnerHTML, das ein Ersatz für die Verwendung von innerHTML im Browser-DOM von React ist. Im Allgemeinen ist das Festlegen von HTML aus Code riskant, da ein Benutzer bei Verwendung mit vertraulichen Daten einem Cross-Site-Scripting-Angriff (XSS) ausgesetzt ist. Da wir keine Benutzer haben (kein Anmelde- / Anmeldesystem), verwende ich es nur für Inhalte, die als HTML von markdown gerendert werden.

Wir haben jetzt eine Vorlage, wie unser Blogpost aussehen wird, aber wir haben noch keine Möglichkeit konfiguriert, einen Blogpost zu rendern und in HTML zu konvertieren. Das ist der nächste. Öffnen Sie gatsby-node.js im Stammverzeichnis Ihres Projekts und fügen Sie den folgenden Code hinzu.

Zunächst benötigen wir den Pfad des Knotens, um die Blogpost-Vorlage abzurufen. Beachten Sie die Aktionen zusammen mit graphql als Parameter, wenn Sie createPages exportieren. Gatsby verwendet Redux intern, um den Status zu verwalten. Von dort kommen die Aktionen. Die Objektaktionen enthalten die Funktionen, die mithilfe der ES6-Objektdestrukturierung einzeln extrahiert werden können. Es verfügt über vordefinierte Funktionen wie createPage, createRedirect, setWebpackConfig und so weiter. Sie finden sie alle hier.

Anschließend verwenden wir createPage programmgesteuert. Es gibt zwei andere Möglichkeiten als den Ansatz, den wir implementieren. In unserem Fall müssen wir Markdown-Dateien lesen.

Da auf unserer Homepage immer noch keine Liste der Blog-Beiträge angezeigt wird, müssen Sie die unten aufgeführten URLs besuchen, um die Blog-Beiträge in Aktion zu sehen.

  • Den ersten Beitrag finden Sie unter: http: // localhost: 8000 / first-post
  • Den zweiten Beitrag finden Sie unter: http: // localhost: 8000 / second-post

Versuchen Sie, die Vorlagenkomponente und andere Felder in der Frontmatter zu ändern. Öffnen Sie src / blogPost.js.

Um die Änderungen darzustellen, habe ich das Datum kurz vor dem Inhalt des Blogposts und nach dem Titel kursiv gedruckt. Besuchen Sie die URL eines Posts und sehen Sie, wie sie in Aktion ist.

Hinzufügen von Links zu vorherigen und nächsten Blog-Posts

Damit diese Funktion mit unserem Blog funktioniert, werden wir die Gatsby Link-Komponente verwenden. Es ist ein Wrapper um die Link-Komponente von @ reach / router, der Verbesserungen für Gatsby hinzufügt, und Sie können sogar Requisiten wie activeStyle oder activeClassName verwenden, um dem gerenderten Element Stilattribute hinzuzufügen, wenn es mit der aktuellen URL übereinstimmt. So wie sich eine normale Routing-Komponente in React verhält. Öffnen Sie die Datei blogPost.js und fügen Sie diese hinzu.

Beachten Sie, wie ich span-Tags mit Attributrolle verwende, um Emojis zusammen mit dem Attribut aria-label zu verpacken. In Gatsby, React wird dies als bewährte Methode angesehen, und Sie vermeiden auf jeden Fall Fusselfehler. Damit der obige Code funktioniert, müssen wir den Kontext in gatsby-node.js ändern.

Das Kontextobjekt enthält jetzt zwei Schlüssel mit den Namen prev und next. Wir verwenden auch den Indexwert jedes Posts. Wenn der Index === 0 ist, wird es keinen vorherigen Beitrag geben, da es der erste ist. Sie können hier nicht zu einem vorherigen Beitrag wechseln. Wir verwenden dann diese neuen Kontexteigenschaften in blogPost.js mit pathContext.

Besuchen Sie den ersten Beitrag und Sie erhalten das folgende Ergebnis.

Zeige alle Beiträge auf der Homepage

Da alle unsere Markdown-Beiträge korrekt in HTML gerendert werden, funktionieren auch die Funktionen für den nächsten und vorherigen Beitrag. Lassen Sie uns also weitermachen und alle Blog-Beiträge auf der Homepage anzeigen. Nicht die vollständigen Beiträge, sondern ein Link zu jedem.

Wenn Sie die URL der Homepage besuchen: http: // localhost: 8000 /, erhalten Sie das folgende Ergebnis.

Fazit

Wir haben jetzt einen funktionierenden Blog!

Ich fordere Sie auf, Ihr eigenes Blog weiter zu erweitern, indem Sie Kommentare oder Tags hinzufügen. Gatsby hat viel zu bieten. Weitere Informationen zu Gatsby finden Sie in der offiziellen Dokumentation.

Und wenn Sie Ihr eigenes Blog von Grund auf neu erstellen, interessiert mich, warum. Lass es mich in den Kommentaren wissen. :-)

Den vollständigen Code für dieses Tutorial finden Sie im Github-Repo unten

Vielen Dank an William Wickey für die Hilfe bei der Bearbeitung.

Erstellen eines Webs oder einer mobilen App?

Crowdbotics ist der schnellste Weg, um eine Anwendung zu erstellen, zu starten und zu skalieren.

Entwickler? Probieren Sie den Crowdbotics App Builder aus, um Apps mit einer Vielzahl von gängigen Frameworks schnell einzurichten und bereitzustellen.

Beschäftigt oder nicht technisch? Schließen Sie sich Hunderten glücklicher Teams an, die mit Crowdbotics-PMs und erfahrenen Entwicklern Software entwickeln. Mit Crowdbotics Managed App Development kostenlos Zeitplan und Kosten einhalten.