Sie können Ihre Ideen problemlos an Websites wie Dev.to, Hashhnode oder Medium veröffentlichen, aber das Ideal ist, die volle Kontrolle über Ihren eigenen Inhalt zu haben. Es gibt eine ständig wachsende Liste von Tools zum Erstellen Ihrer eigenen Website und zur Steuerung Ihrer eigenen Inhalte. In diesem umfangreichen Tutorial werde ich darüber abdecken, wie Sie Ihren Inhalt mit Gatsby mit den zusätzlichen Schnickschnack mit einem solchen Ökosystem zum Leuchten bringen können.
Ich habe Jekyll ursprünglich verwendet, um meinen Blog zu veröffentlichen, wechselte aber dann mit der Lumen -Vorlage zu Gatsby. Ich benutze Gatsby seit Version 0, um Mai 2017.
Ich werde von einer Hallo, Welt gehen! Gatsby -Projekt durch ein Codierungsblog mit Code -Syntax -Hervorhebung und ein Thema Umschalter für diese dunkle Modusgüte.
Es gibt ein reichhaltiges Ökosystem aus Plugins, Startern und Themen, die Gatsby schnell zum Laufen bringen, aber ich möchte einen progressiven Offenlegungsansatz für die Präsentation von Gatsby verfolgen, wobei ich mich auf die Grundlagen der Funktionsweise eines Gatsby -Projekts konzentriere.
Gatsby ist ein statischer Site -Generator, daher gibt es keine dynamische Erzeugung von Seiten, wenn die Seiten angefordert werden. Die gebaute Ausgabe für eine Gatsby -Website kann auf einem CDN gehostet werden, wodurch er weltweit verfügbar und super skalierbar ist.
Gatsby kann mit Markdown -Dateien Seiten in einem Site -Projekt erstellen. Gatsby wird die Markdown -Dateien in das Gatsby -Dateisystem lesen und den Markdown in HTML verwandeln und dann beim Erstellen des Standorts statische Seiten erstellen.
Das Endergebnis ist eine superschnelle Seite mit wenig Latenz bei der Anforderung der Seiten.
Ich dokumentiere meine Entwicklungsreise seit 2016 in Markdown. Markdown bietet eine Möglichkeit, eine einfache Bearbeitung in Klartextdateien zu ermöglichen, die in HTML konvertiert werden können.
MDX (oder Markdown JSX) ist ein Tool, mit dem Sie JSX in Ihren Markdown -Dokumenten schreiben können, so wie folgt:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Gatsby ist bei weitem das beste Framework, das ich für die Arbeit mit Markdown und MDX verwendet habe, da die oben genannte Spezialnotation mit Frontmatter auf Ihren Beiträgen keine spezielle Notation benötigt.
Wenn Sie folgen, benötigen Sie einige Dinge:
Wenn Sie keine davon haben, gibt es sowohl Stackblitz- als auch Github -Codenspaziale, in denen Sie ein leeres Github -Repository erstellen und von dort aus mit einer Entwicklungsumgebung beginnen können.
Ich verwende VS Code als Texteditor und Garn als mein bevorzugter Paketmanager in den folgenden Beispielen. Wenn Sie NPM bevorzugen, ist das cool. ?
Sie können auch den vollständigen Code für dieses Tutorial auf GitHub finden.
Okay, es ist Zeit, loszulegen!
Es ist Zeit, ein Gatsby -Projekt zu verbessern. Ich werde den größten Teil davon aus der Befehlszeile tun, mit:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>cool. Bevor ich mit diesem irgendwohin irgendwohin gehe, muss ich eine .gitignore -Datei hinzufügen, bevor ich NPM -Module installiere:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Jetzt kann ich die gesamte NPM -Güte installieren, die ich benötige, ohne dass VS Code Git mich über zu viele aktive Änderungen anschreien. Lassen Sie uns nun einige Abhängigkeiten installieren, um mit Gatsby auf dem Laufenden zu werden:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Als nächstes werden wir die erste React -Komponente (von vielen) für das Projekt hinzufügen. Ich füge der index.js -Datei, die ich erstellt habe, Folgendes hinzu:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Ich bin jetzt bereit, den Befehl Gatsby Development aus der Befehlszeile auszuführen:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Dies wird den Gatsby Dev Sever aufdrehen und besagen, dass mein Projekt im Browser auf Port 8000 (dem Standard -Gatsby -Port) angezeigt wird. Die URL ist http: // localhost: 8000/.
Die Verwendung der Binärbefehle von Gatsby direkt von der Befehlszeilenschnittstelle (CLI) ist völlig machbar, aber die meisten Personen werden den verfügbaren Befehlen in den Skriptabschnitt in der Package.json-Datei wie folgt hinzufügen:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Als zusätzlichen Bonus gibt es einige Extras, die den Gatsby -Skripten hier hinzugefügt werden können.
Wenn wir das Projekt nicht jedes Mal auf demselben Port ausführen möchten, kann es mit dem -P -Flag und einem danach angegebenen Port geändert werden. Zum Beispiel entwickeln Gatsby -P 8945.
Wenn wir die Registerkarte Browser öffnen möchten, sobald das Projekt fertig ist, können wir dem Skript -o hinzufügen.
Ich mache dasselbe mit dem Servic -Skript, also weiß ich, wenn ich ein Projekt erstellt habe, ist es auf einem anderen Port der Entwicklung ein:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>und damit die obligatorische "Hallo, Welt!" Willkommen ist abgeschlossen und ich kann mit dem Rest dieses Beitrags weitermachen! ?
Zuletzt werde ich die Änderungen begehen, die ich bisher vorgenommen habe:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Okay, das Projekt ist im Moment nicht viel los, also füge ich zuerst einige Inhalte aus der Befehlszeile hinzu:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Ich werde diese in den Beispielen verwenden, die ich mache.
Sie werden die Dateierweiterung .mdx bemerken. Dies ist eine MDX -Datei.
Bevor ich Inhalte für das Blog hinzufüge, muss ich über Front Matter sprechen.
Front Materie ist eine Möglichkeit, Informationen über die Datei zu speichern, die von Gatsby beim Erstellen der Seiten von ihnen verwendet werden kann. Im Moment füge ich einen Titel des Beitrags und eines Datums hinzu. Ich werde ihnen auch Inhalte hinzufügen. Hier ist unser erster Beitrag:
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>Hier ist unser zweiter Beitrag:
<span><span>--- </span></span><span><span><span>title: Hello World - from mdx! </span></span></span><span><span><span>date: 2021-03-06</span> </span></span><span><span>---</span> </span> My first post!! <span><span>## h2 Heading</span> </span> Some meaningful prose <span><span>### h3 Heading</span> </span> Some other meaningful prose
Ein dritter Beitrag:
<span><span>--- </span></span><span><span><span>title: Second Post! </span></span></span><span><span><span>date: 2021-03-07</span> </span></span><span><span>---</span> </span> This is my second post!
Das ist es für die Beiträge, denn diese Beiträge werden von Gatsby noch nicht als Seiten erkannt. Ich muss Gatsby wissen lassen, wo ich Inhalte finden kann, um das Projekt hinzuzufügen. Dazu füge ich Gatsby eine Konfigurationsdatei hinzu.
Lassen Sie uns die Änderungen begehen, die ich an Git vorgenommen habe:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>gatsby config wird verwendet, um die vielen Gatsby -Plugins zu definieren und zu konfigurieren, die Sie verwenden können. Mehr über das Gatsby Plugin Eco -System ein wenig. Im Moment werde ich die Datei wieder im Terminal erstellen:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Dies erstellt die gatsby-config.js im Root des Projekts, sodass ich Gatsby konfigurieren kann, um die .mdx-Dateien zu lesen, die ich zuvor erstellt habe.
Jetzt kann ich die Plugins installieren und konfigurieren, die Gatsby die von mir erstellten Dateien beziehen und anzeigen muss. Ich werde sie jetzt alle installieren und kurz beschreiben, wofür sie sind:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Ein kurzer Blick auf das Paket.json zeigt jetzt, dass ich die folgende Abhängigkeitsversion installiert habe:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Eine Sache, die zu beachten ist, ist, dass in Gatsby keine Reaktion in Ihren Komponenten mit React 17 importiert werden muss. Aber um die Vollständigkeit zu vermeiden, werde ich sie in diese Beispiele einbeziehen.
Jetzt muss ich Gatsby-Plugin-Mdx und Gatsby-Plugin-Mdx konfigurieren. In der Datei gatsby-config.js füge ich Folgendes hinzu:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Veränderungen begehen bis jetzt:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Jetzt ist es an der Zeit zu sehen, wo ich mit den Dateien in Gatsby mit dem Gatsby GraphQL -Client GraphiQL bin. Möglicherweise haben Sie festgestellt, dass der CLI zwei URL -Standorte angibt, um das Projekt anzuzeigen:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Ich werde jetzt die ___Graphql -Route (drei Unterstriche) verwenden, um die Dateien im Dateisystem anzuzeigen.
Wenn dies ein bisschen einschüchternd erscheint, werde ich versuchen, alle Teile abzudecken, die nicht viel Sinn zu machen scheinen. Wenn Sie miteinander folgen, sollten Sie die Beispiele in den GraphiQL Explorer kopieren.
Wenn ich den Graphiql Explorer öffne, habe ich mehrere Explorer -Panels. Dies sind alles verfügbare Daten, die Sie im Projekt untersuchen können, und hängt von dem ab, was ich in der Datei gatsby-config.js konfiguriert habe.
Das Grafiql -Abfragebereich und die Ergebnisse sind daneben. Hier schreibe ich GraphQL -Abfragen, um die Daten abzurufen, die ich benötige. Am unteren Rand des Abfragebereichs befindet sich auch ein Abschnitt mit Abfragen, und ich werde später darauf kommen.
Die GraphQL -Dokumentation Explorer ist ganz rechts vorbei. Aufgrund der strengen Tippen von GraphQL bedeutet dies, dass es in der Lage ist, eine eigene Dokumentation zu seinen Daten zu generieren. Aber das liegt außerhalb des Rahmens dieses Beitrags.Lokale Dateien mit GraphQL
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span><span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Dies ist ein großes JSON -Objekt mit den relevanten Informationen, die wir in der Abfrage angefordert haben. Wir werden uns bald ansehen, wie dies bald verwendet werden kann. Dies bedeutet vorerst, dass wir diese Daten im Gatsby -Projekt verwenden können, um Seiten zu erstellen.
In der Datei gatsby-config.js gibt es auch eine Option, um Site-Metadaten anzugeben. Site -Metadaten sind für die Wiederverwendung gemeinsamer Daten wie den Titel und die Beschreibung des Site.
Dies ist weiterhin nützlich, wenn ich der Site für die Suchmaschinenoptimierung (SEO) Meta -Tags hinzufügen möchte. (Weiter dazu später mehr.) Im Moment werde ich einige grundlegende Informationen über die Site im Gatsby-config.js mit dem Sitemetadata-Objekt definieren.
i könnte die Site -Metada direkt im Modul.exports wie SO definieren:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Fügen Sie dann das Sitemetadata -Objekt zur Gatsby -Konfigurationsdatei hinzu:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Jetzt kann ich wieder zum Graphiql Explorer springen und diese Site -Metadaten mit der folgenden Abfrage abfragen:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Es ist immer eine gute Idee, den Entwicklungsserver anzuhalten und neu zu starten, wenn Sie Änderungen an der Datei gatsby-config.js vornehmen, also mache ich das (
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>c , dann entwickelt sich Garn), dann im GraphiQL Explorer die Seite aktualisieren und die Abfrage erneut ausführen, um die Daten zurückzuholen:
Machen Sie einen Site -Metadaten -Haken<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Ein kurzer Hinweis zu einigen der Notationen dort: const {site: {sitemetadata},} ist eine schnelle Möglichkeit, zu den Daten in der Site -Abfrage zu gelangen, wo ich die Sitemetadata aus dem Site -Objekt abziehe. Dies wird als Zerstörung bezeichnet.
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Jetzt, nachdem ich den Dev -Server wieder gestartet habe, kann ich zur Browserkonsole gehen (
SteuerungShift j in Windows/Linux, Befehl Option j auf macOS) und siehe das Sitemetadata -Objekt in der Konsolenausgabe. Ich erhalte die folgende Konsolenausgabe:
Mach dir keine Sorgen über die Konsolenwarnung für eine fehlende 404 -Seite, die nicht gefunden wurde (net :: err_aborted 404 (nicht gefunden)). Ich werde das später machen.
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Um nicht jedes Mal diese Abfrage schreiben zu müssen, möchte ich sie in einer Komponente verwenden. Ich werde dies in seinen eigenen Haken abstrahieren:
Jetzt füge ich die neu erstellte Datei SRC/Hooks/Use-Site-Metadata.js-Datei in einen Haken hinzu, um die Site-Metadaten auf Bedarf zu erhalten:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Sie haben vielleicht bemerkt, dass diese Abfrage nicht die gleiche ist wie die aus dem Graphiql Explorer:
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span><span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Dies soll die Abfrage benennen. Da ich im Projekt viele Abfragen verwenden werde, ist es sinnvoll, ihnen sinnvolle Namen zu geben.
Jetzt implementiere ich den neuen Hook in die Datei src/Seiten/index.js:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Das ist viel weniger ausführlich, und ich kann auswählen, welche Elemente ich von der Site_Metadata_query gewählt habe.
Es ist an der Zeit, die bisher vorgenommenen Änderungen abzugeben:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Um dieses Projekt zu stylen, werde ich aufgrund seiner Geschwindigkeit bei der Implementierung von Layouts und Funktionen wie dem Dark -Modus die Themen -Benutzeroberfläche verwenden. Ich werde detailliert beschreiben, was für das relevant ist, was ich tue, und Gründe dafür, obwohl dies keine Anleitung zur Verwendung von Themen -Benutzeroberfläche ist.
Es gibt einige zusätzliche Abhängigkeiten, die für die Themen -Benutzeroberfläche hinzugefügt werden müssen, nämlich:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Mit den installierten, muss ich das Gatsby-Plugin-theme-ui zum Plugin-Array von Gatsby-config.js hinzufügen:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Wenn ich jetzt den Dev -Server anhält und neu starte, habe ich eine etwas andere aussehende Site! Es ist alles ein bisschen blau geworden - oder Periwinkle, um genau zu sein! Dies ist der Gatsby-Plugin-theme-ui, und diese Farbe ist der Standard.
Das Gatsby -Plugin für Themen -UI bietet viele Konfigurationsoptionen, von denen einige bei Bedarf detaillierter abdecken. Im Moment erstelle ich einen Ordner und definiere ein Themenobjekt für die zu verwendende Themen -Benutzeroberfläche:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
In der Datei src/gatsby-plugin-theme-ui/index.js werde ich einige der Themen-UI-Voreinstellungen hinzufügen, das Themenobjekt definieren und im Schweizer Voreingang des Themas verbreiten. zu den Themenfarben und zu den Stilen.
Für den Dunklen Modus verwende ich das Deep -Thema -UI -Voreinstellung und verbreite dieses in das Modi -Objekt für Dunkelheit. (Mehr dazu bald.) Im Moment wissen Sie, dass dies für mich viel Themen kümmern wird:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Wenn ich jetzt den Dev -Server neu starte (ja, ja, Sie werden lernen, damit umzugehen), sieht es ein bisschen akzeptabler aus, wenn das Schweizer Thema angewendet wird. Zum Zeitpunkt des Schreibens aktualisiert die THEME UI manchmal nicht die Localhost -Seite, sodass eine Browser -Seite aktualisiert werden muss.
Beachten Sie die Änderungen bisher zu git:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Zeit, einige React -Komponenten hinzuzufügen!
Gatsby hat kein bestimmtes Layout, das dem Entwickler diese Verantwortung übernimmt. In diesem Fall mache ich ein Layout für die gesamte Website. Es ist möglich, viele Layouts zur Verwendung in einem Gatsby -Projekt einzubeziehen, aber in diesem Beispiel werde ich nur einen verwenden.
Jetzt werde ich wieder aufrüsten, was ich derzeit habe, damit alles von einer Layoutkomponente verpackt wird. Was ich derzeit in SRC/Pages/Index.js habe, kann für eine Header -Komponente verwendet werden. Ich werde jetzt ein paar Dateien für Layout und Header erstellen:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Um den Titel und die Beschreibung von src/Seiten/index.js auf die neu erstellte SRC/Komponenten/Header.js -Komponente zu verschieben.
, anstatt die in der Header -Komponente verwendete Verwendung von Issitemetadata zu verwenden, werde ich die UseSeTemetadata -Requisiten übergeben, die ich für den Header aus der Layout -Komponente benötige, in dem der Kopfball leben wird. (Mehr dazu in Kürze.) Zuerst finden Sie hier die Header -Komponente, die in SRC/Komponenten/Header lebt. Js:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Ich habe in einigen grundlegenden Stilen mit den Themen -UI -Layoutelementen hinzugefügt. Das sieht ein bisschen anders aus als zuvor: Box, Link, Überschrift… was? Dies sind alles Thema UI -Komponenten, die für Layouts, Formularelemente und mehr verwendet werden können.
Sie können die AS = {Gatsbylink} -Link -Requisite zur Linkkomponente hinzufügen. Dies verwendet die AS -Requisite in der THEMEN -UI und lässt die Komponente in Themen -UI -Stilen übergeben.
Es gibt einen großartigen Beitrag von Paul Scanlon, der ausführlicher erklärt, wie dies in der THEME -UI erfolgt. Für eine wirklich umfassende Erklärung der Themen -Benutzeroberfläche gibt es auch "Verständnis der Themen -Benutzeroberfläche" desselben Autors.
Es gibt auch die SX- und Variante -Requisiten aus der Themen -Benutzeroberfläche. Mit SX können zusätzliche Stile an die Komponente übergeben werden. Betrachten Sie es als ein Äquivalent zum jsx style = {{}} prop. Mit der Varianten -Requisite können eine Gruppe vordefinierter Stile vom Thema auf die verwendete Komponente angewendet werden.
Jetzt für die Layoutkomponente, die sich in SRC/Komponenten/Layout befindet.js:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Hier behalte ich den UseSitemetadata -Haken und übertrage die Requisiten Die Header -Komponentenanforderungen, wieder mit der SX -Prop, um einige grundlegende Stile für die Ausrichtung der Hauptdiv -enthaltenden Diven hinzuzufügen. Dann erstelle ich eine Hauptverpackung für die Kinder.
Die Children -Requisite besteht darin, alles zurückzugeben, was die Layoutkomponente verkapselt, die alles enthalten, auf das ich das Layout anwenden möchte. Zum Beispiel:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Dies gibt alles in der Layoutkomponente und dessen Wickeln zurück. Im obigen Beispiel wird dies derzeit der Header und der H1 sein, der von der Layout -Komponente eingewickelt ist.
als Beispiel kehre ich zur Indexseite (src/pages.index.js) zurück und füge Folgendes hinzu:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Das Ergebnis ist der Header, der in der Layout -Komponente und im H1 enthalten ist.
Jetzt ist es Zeit, die Beiträge zu erhalten, die ich am Anfang erstellt habe, und sie auf der Indexseite als Liste der klickbaren Links anzeigen.
Um die Postinformationen zu erhalten, werde ich die Abfrage neu erstellen, die ich im Abschnitt zum Abfragen lokaler Dateien mit GraphQL mit ein paar zusätzlichen Bits erstellt habe:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Ich habe in der ID des Knotens und der Schnecke hinzugefügt. Dies ist der Dateipfad zu den .mdx -Dateien.
Der Auszug verwendet eine Gatsby-Funktion, um die ersten 250 Zeichen aus dem Postkörper zu erhalten, und fügt auch das Datum mit einer weiteren integrierten Gatsby-Funktion eine Formatierung hinzu.
Dann habe ich eine Sortierung hinzugefügt, um die Beiträge in Datumsabstieg zu bestellen: Allmdx (sortieren: {Fields: [FrontMatter___Date], Reihenfolge: Desc}) {. Dies sortiert das Datum in den Posts vor Ort.
Hinzufügen des Graphiql Explorers gibt mir dieses Ergebnis:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Jetzt kann ich diese Abfrage in der Datei src/Seiten/index.js verwenden, um diese Daten zur Verwendung auf der Indexseite zu erhalten. In der Indexpage -Funktion zerstöre ich Daten aus den der Komponente über die GraphQL -Abfrage angegebene Requisiten:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Dies verwendet die zuvor detaillierten Komponenten. Beachten Sie, dass der Auszug, der Frontmatter und die Schnecke aus Daten zerstört werden.
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Ich werde festlegen, was ich bisher getan habe, bevor ich weitergefahren bin:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Dieser Ansatz enthält eine spezielle Dateinotation für die Seite, auf die sich Gatsby zum Zeitpunkt erstellen, wenn Gatsby die Dateisystemdaten generiert. Die Datei zeigt den Knoten und den Schnecken an. Ich erstelle zuerst die Datei und detailliert detailliert, woher die Daten stammen:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Wenn ich diese Abfrage nehme und in meinen Graphiql Explorer einfügt und die Wiedergabetaste drücke, bekomme ich Folgendes:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>In dieser Datei können Sie feststellen, dass ich die Leiche aus den zurückgegebenen Daten zerstört habe und dann von der Frontmatter in einer zweistufigen Zerstörung von Titeln aus dem Titel zerstört habe:
<span><span>--- </span></span><span><span><span>title: Hello World - from mdx! </span></span></span><span><span><span>date: 2021-03-06</span> </span></span><span><span>---</span> </span> My first post!! <span><span>## h2 Heading</span> </span> Some meaningful prose <span><span>### h3 Heading</span> </span> Some other meaningful prose
<span><span>--- </span></span><span><span><span>title: Second Post! </span></span></span><span><span><span>date: 2021-03-07</span> </span></span><span><span>---</span> </span> This is my second post!
Eine letzte Sache, die zu beachten ist, ist der MdxRenderer, der den Körper des Pfostens einwickelt. Dies ist alles in der .mdx -Datei nach dem Block vorne. Die kompilierte MDX aus der von der Graphiql angegebenen Abfrage, die ausgezeichnet wurde, muss in den MDXRenderer eingewickelt werden:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Ich werde jetzt die Änderungen begehen:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Klicken Sie nun auf einen der Links auf der Indexseite bringen mich zur gewünschten .mdx -Seite, aber es sieht etwas anders aus als die Indexseite, oder?
Das liegt noch daran, dass es noch kein Layout gibt, das es einpackt. Hier kann ich die Gatsby Browser -API verwenden und die WrappageElement -Funktion verwenden, um alle Seitenelemente zu wickeln. Es wird auch empfohlen, die gleiche Funktion in Gatsby SSR zu verwenden.
Um zu vermeiden, dass das Duplizieren desselben Code in zwei Dateien dupliziert, erstelle ich eine dritte Datei mit dem tatsächlichen Code, den ich verwende und in die beiden genannten Gatsby-* -Dateien importieren werde.
Erstens erstelle ich die benötigten Dateien:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
In der Root -Wrapper -Datei verwende ich die WrappageElement -Funktion:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Dann werde ich sowohl in den Gatsby-Browser.js- als auch in den Gatsby-SSR.js-Dateien folgender hinzuzufügen:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Wenn Änderungen an der WrappageElement-Funktion erforderlich sind, kann ich dies in der One-Datei root-wrapper.js.
tunZeit, den Dev -Server erneut anzuhalten und neu zu starten, um zu sehen, dass die Änderungen wirksam werden!
Da die Layoutkomponente hier verwendet wird, um alle Seitenelemente auf der Website zu wickeln, müssen sie nicht mehr auf der Indexseite aufbewahren. Daher werde ich dies von SRC/Pages/Index.js entfernen:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Ich werde die Änderungen bisher begehen, bevor ich weitergehe:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Zeit für diese 404 Seite!
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>In der Datei src/Seiten/404.JS, ich werde eine Nachricht hinzufügen:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Jetzt kann ich direkt zur 404 -Seite navigieren, um sie zu überprüfen: http: // localhost: 8000/404.
Beachten
Verpflichten Sie dies und fahren Sie mit dem nächsten Teil fort:
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>
<span><span>--- </span></span><span><span><span>title: Hello World - from mdx! </span></span></span><span><span><span>date: 2021-03-06</span> </span></span><span><span>---</span> </span> My first post!! <span><span>## h2 Heading</span> </span> Some meaningful prose <span><span>### h3 Heading</span> </span> Some other meaningful prose
<span><span>--- </span></span><span><span><span>title: Second Post! </span></span></span><span><span><span>date: 2021-03-07</span> </span></span><span><span>---</span> </span> This is my second post!
<span><span>--- </span></span><span><span><span>title: Third Post! </span></span></span><span><span><span>date: 2021-03-08</span> </span></span><span><span>---</span> </span> This is my third post! <span>> with a block quote! </span> And a code block: <span><span>```js </span></span><span><span><span>const wheeeeee = true;</span> </span></span><span><span>```</span> </span>
Ich muss das Paket installieren und eine Komponente im Ordner Gatsby-Plugin-theMe-UI namens components.js:
erstellen:<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>In dieser Datei muss ich definieren, wo ich die Prism -Stile anwenden möchte.
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Mit dem definierten muss ich auch im Themenobjekt definieren, welches Prism -Thema ich verwenden möchte:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Ein weiterer Stopp und Start des Dev -Servers ist erforderlich, um zu sehen, dass die Änderungen wirksam werden!
Beiten Sie die Änderungen und wechseln Sie zum nächsten Abschnitt:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Dieses nächste Bit ist optional. Mit Markdown JSX können React (JSX) -Komponenten in den Markdown aufgenommen werden. Um dies zu demonstrieren, werde ich eine Regenbowtextkomponente hinzufügen, die einige Farben in einem Animationszyklus animiert. Es gibt eine zusätzliche Abhängigkeit, die ich für die Animation benötige: Keyframes von @emotion/reagieren. Ich werde das jetzt installieren:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Dies wird wahrscheinlich den Dev -Server ausgelöst, wenn er ausgeführt wird, also werde ich ihn vorerst stoppen.
In der Datei SRC/Komponenten/Rainbow-text.js füge ich diese Komponente hinzu:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Da dies optional ist, werde ich nicht detailliert darüber eingehen, was hier vor sich geht. Ich weiß nur, dass es ein schöner CSS -Effekt ist, auf Schwebungen zu haben.
Mit dieser erstellten Komponente kann ich sie in eine .MDX-Datei, in der ich sie verwenden möchte, importieren. In diesem Beispiel füge ich sie in den Inhalt/2021/03/drittpost/index.mdx hinzu. Hier ist der Unterschied der Datei, da ich die Komponente hinzugefügt habe:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span> Nachdem ich den Dev -Server erneut gestartet habe, kann ich zu dem Beitrag gehen, in dem diese Komponente hinzugefügt wurde, und wenn ich über den Text schwebe, werde ich in
Sie werden wahrscheinlich bei diesem Import verzerrt: ../../../. Weiter und weiter! Es gibt jedoch eine Möglichkeit, dies zu umgehen, indem Sie das zuvor beschriebene Root -Wrapper -Konzept verwenden und den MDXProvider verwenden, der - ähm! - Stellen Sie MDX alle Komponenten an, die Sie an sie übergeben.
Zurück zum Root Wrapper (Root-Wrapper.js) kann ich das Seitenelement mit dem MdxProvider einwickeln und die Regenbowtext-Komponente an den MdxProvider übergeben:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Jetzt kann ich den Import aus der .mdx -Datei entfernen:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Nachdem ich den Dev -Server angehalten und neu gestartet habe, kann ich zu diesem Beitrag gehen und immer noch sehen, wie der Regenbowtext funktioniert. Der zusätzliche Vorteil des Hinzufügens von Komponenten direkt zum MDXProvider besteht darin, dass keine Komponente in das .mdx -Dokument importiert werden muss, wenn Sie sie verwenden möchten. Es ist über den Anbieter für alle MDX -Dokumente erhältlich.
Ich werde das jetzt begehen:
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>Wenn ich meinen Blog -Posts Bilder hinzufügen möchte, kann ich sie in die MDX -Dateien aufnehmen, so etwas:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>the ./mdx-logo.png ist eine Datei, die ich zum Inhalt/2021/03/06/Hello-World-Ordner hinzugefügt habe, und ich beziehe mich als relative Datei. Das ist es jedoch nicht dafür. Wenn ich zum Hello World -Beitrag gehe, ist das Bild, das angezeigt wird, gebrochen. Ich muss Gatsby-Remark-Images als Plugin zu Gatsby-Plugin-Mdx hinzufügen, damit es weiß, was mit den Bilddateien zu tun ist:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Ich muss dann die Plugins in gatsby-config.js konfigurieren:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Das zusätzliche Objekt von Gatsby-Source-Filesystem lässt Gatsby wissen, wo nach den Bildern verarbeitet werden soll.
Verpflichten Sie dies jetzt:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
SEO ist sehr wichtig, wenn ich meine Inhalte von Suchmaschinen im Internet finden möchte. Daher muss ich meinem Blog die relevanten Meta -Tags hier hinzufügen. Es kann ein ziemlich beteiligter Prozess sein, der alle erforderlichen relevanten Tags definiert. Um Zeit zu sparen, habe ich eine React -SEO -Komponente für die Verwendung in Gatsby für die Erzeugung aller benötigten Meta -Tags erstellt.
Ich gehe zu Garn, füge die Komponente zusammen mit den Abhängigkeiten hinzu, die erforderlich sind, damit sie funktioniert:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Ich muss das Gatsby-Plugin-React-Helmet zum Plugin-Array von gatsby-config.js hinzufügen:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Dann ist es ein Fall, die SEO -Komponente auf der gesamten Site zu verwenden, wo ich Meta -Tags haben muss.
Die Komponente dauert einige Requisiten, von denen viele einmal auf der gesamten Website definiert sind. Der beste Ort, um diese hinzuzufügen, wäre im Sitemetadata -Objekt. Dann kann ich herausziehen, was ich mit dem UsesItemetadata -Haken brauche.
Ich werde dem Sitemetadata -Objekt einige weitere Eigenschaften hinzufügen:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Wenn Sie miteinander folgen, können Sie diese nach Bedarf ändern. Die Siteurl kann vorerst eine Dummy -URL sein. Dies soll beim Hinweis auf alle Bilder zeigen, die für die Verwendung im Open -Graph -Protokoll benötigt werden, und es ist das Bild, das Sie beim Teilen eines Beitrags auf Twitter, Facebook, LinkedIn und Reddit sehen.
Jetzt, da diese zusätzlichen Eigenschaften auf dem Sitemetadata -Objekt liegen, muss ich in der Lage sein, sie abfragen zu können. Derzeit hat der UseSitemetadata -Hook nur Titel und Beschreibung, daher füge ich den Rest jetzt hinzu:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Ich füge die SEO -Komponente zu allen Seiten hinzu. Zunächst mache ich die Postseiten auf der Seite SRC/PAGES/{MDX.SLUG} .js. Dies ist einer der am stärksten engagierten, also werde ich hier den Unterschied ausgeben und detailliert beschreiben, was los ist:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Die SiteUrl, Slug und Auszug sind für die kanonische Verbindung (sehr wichtig in SEO) erforderlich, und der Auszug ist für die Meta -Beschreibung.
Ich verwende den Sitemetadata -Hook, um den Rest der Informationen zu erhalten, die die Komponente benötigt. Titel und Titletemplate werden verwendet, um das zu ermitteln, was Sie auf der Registerkarte Browser sehen.
Der Artikel boolean ist für die Komponente, sodass er die Breadcrumb -Liste im JSONLD -Format erstellen kann. Der Rest der Requisiten besteht darin, den Autor und das veröffentlichte Datum zu identifizieren. ?
Das war viel. Ich hoffe, einige davon haben Sinn gemacht! Für den Umfang dieses Beitrags lasse ich ihn dort, aber es gibt noch viel mehr zu diesem Thema, und ich meine viel !
Zum Glück ist die Seite src/Seiten/index.js etwas einfacher!
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Ich habe das Bild absichtlich aus beiden Beispielen ausgelassen. Wenn Sie daran interessiert sind, Ihre eigenen offenen Graph -Bilder in dieser Komponente zu erstellen, lesen Sie den Beitrag "Graph Bilder mit Gatsby und Vercel", um dies mit einer serverlosen Funktion zu tun. ?
Jetzt kann ich die Site erstellen (fast für die Produktion bereit), und sobald sie erstellt wurde, kann ich die Seitenquelle für die Meta -Tags überprüfen:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Sobald der Build fertig ist, kann ich mit dem Garn -Serve den Baustand vor Ort auf Localhost: 9000 bedienen. Im Browser kann ich die Seitenquelle mit der Tastaturverknüpfung ctrl u anzeigen. Von hier aus kann ich nach dem kanonischen Meta -Tag suchen, bei dem die Dummy -URL in den Metadaten verwendet wird.
Okay! Verpflichten Sie dies zu Git und fahren Sie fort:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Sie fragen sich vielleicht, warum ich am Ende jedes Abschnitts Git Commits gemacht habe. Das liegt daran, dass ich das Projekt jetzt auf GitHub übertragen werde.
Ich melde mich bei meinem GitHub -Konto an und auswähle das Plus -Symbol neben meinem Avatar -Bild in der oberen rechten Ecke und wählen Sie ein neues Repository aus.
Im Repository-Namen füge ich den Projektnamen My-Gatsby-Blog hinzu, lasse aber den Rest der Standardeinstellungen und klicken Sie auf Repository erstellen.
Der nächste Bildschirm gibt mir die Terminalbefehle, die ich mein lokales Projekt auf GitHub drücken muss:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Sobald Sie alle diese in das Terminal gesteckt haben und eingeben , aktualisieren Sie die Github -Seite, um das neue Projekt zu sehen!
Zeit, dieses Baby ins Web zu bringen! Es gibt viele Möglichkeiten, dies zu tun. Da Gatsby eine flache Dateistruktur erstellt, können Sie eine Gatsby -Site auf jedem Dateiserver mit Zugriff auf das Internet hosten.
Es gibt viele Dienste, die Hosting auf einem CDN anbieten, viele kostenlos! Mit Diensten wie Netlify, Vercel und Render können Sie Ihre Baustelle über eine CLI, eine Github -Integration oder, im Fall von Netlify, über eine CLI, eine Github -Integration oder einen geraden Drag & Drop!
Vercel
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
eingeben : beantworten
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Aus dem Vercel Dashboard kann ich die Domäne konfigurieren und auch eine von Vercel kaufen, wenn ich möchte. Ich persönlich benutze namecheap.com, aber es ist eine Option.
mit Netlify über die CLI einsetzt, ist ähnlich wie bei Vercel, aber ich werde die Drag-and-Drop-Kreation durchführen.
Für die Authentifizierung benötige ich einen von Github, Gitlab, Bitbucket oder E -Mail -Konto. Sobald ich mich authentifiziert und angemeldet habe, kann ich Websites in der Menüleiste auswählen. Dann gibt es einen Tropfenbereich, der eine neue Site bereitstellen möchte, ohne eine Verbindung zu Git herzustellen? Ziehen Sie hier Ihren Site -Ausgangsordner hier. Ich werde in meinem Datei -Explorer zur Stammin meines Projekts navigieren und den öffentlichen Ordner in den Drop -Bereich ziehen und fallen lassen.
netlify erstellt die Dateien und bereitet sie zur Inspektion für eine generierte URL bereit. Ähnlich wie bei Vercel können Sie dort mit Netlify eine Domain kaufen und darauf bereitstellen.
Render verfügt über keine CLI- oder Drop -Option und verwendet stattdessen eine GitHub -Integration. Um sich zu authentifizieren, benötige ich ein GitHub, ein GitLab oder ein Google -Konto. Sobald ich mich authentifiziert und angemeldet habe, bin ich im Bereich Dienste. Von hier aus kann ich eine neue statische Site auswählen und dann meine Github -URL für das Projekt eingeben, das ich früher auf GitHub gedrängt habe.
Auf der nächsten Seite gebe ich ihm die folgenden Einstellungen:
Dann klicken Sie auf statische Site erstellen.
Warten Sie, bis Render das Ding erledigt, und klicken Sie dann auf den Link unter dem Projektnamen, um die Website live zu sehen.
Render hat auch die Möglichkeit, Ihre eigene benutzerdefinierte Domain für die Website zu setzen!
Es gibt viele mehr Gatsby -Plugins zur Auswahl, um zusätzliche Funktionen hinzuzufügen. Ich überlasse Ihnen diese, wenn Sie mehr hinzufügen möchten. Zum Beispiel:
Wenn Sie wissen möchten, wie beliebt Ihre Website ist, gibt es Analyseoptionen. Ich habe vor einiger Zeit die Verwendung von Google Analytics in meinen eigenen Projekten aufgehört und bevorzuge jetzt mehr von Privatsphäre ausgerichtete Alternativen. Eine, die ich empfehle, ist Fathom Analytics. (Ich habe einen Affiliate -Link, wenn Sie 10 US -Dollar für das Abonnement Ihres ersten Monats erhalten möchten.)
Eine andere Alternative ist plausibel, von der ich auch gute Dinge gehört habe.
Um Fathom -Analysen auf einer Gatsby -Site zu implementieren, muss ich dem Leiter meiner Website ein zusätzliches Skript -Tag hinzufügen. Was bedeutet das? Nun, zuerst muss ich die Site auf meinem Fathom -Dashboard erstellen und dann zu https://app.usefathom.com/#/setings/sites gehen, nach unten auf die Liste scrollen, in meiner neuen Site (in meiner neuen Website ( My-Gatsby-Blog) und klicken Sie dann auf Site-Code abrufen. Ich bekomme dann ein Popup -Modal mit dem Site -Code. Ich brauche das für das Skript, das ich zum Kopf meines Gatsby -Projekts hinzufügen werde. So sieht das Skript aus:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Hier ist der Unterschied von Root-Wrapper.js:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Das ist es von mir. Vielen Dank, dass Sie es bis zum Ende geschafft haben. ?
Ich hoffe, Sie haben das bekommen, was Sie von dieser ziemlich umfangreichen Anleitung zum Einrichten eines Gatsby -Projekts von Grund auf neu aufbauen!
Wenn Sie sich wenden und Hallo sagen möchten, ist der beste Ort, um mich zu bekommen, auf Twitter.
Wie kann ich das Layout meines Gatsby MDX -Blogs anpassen?
<code> Ihr Code hier </code>
Ein Inhaltsverzeichnis kann Ihre Blog -Beiträge navigierbarer machen. Gatsby MDX unterstützt die Erstellung eines Inhaltsverzeichnisses. Sie können das Feld "TableOfContents" in Ihrer GraphQL -Abfrage verwenden, um ein Inhaltsverzeichnis zu generieren. Dieses Feld gibt eine Reihe von Überschriften und ihre jeweiligen Tiefen zurück, mit denen Sie eine verschachtelte Liste für Ihr Inhaltsverzeichnis erstellen können.
SEO ist entscheidend für die Erhöhung der Sichtbarkeit Ihres Blogs. Mit Gatsby MDX können Sie Ihren Blog -Posts SEO hinzufügen. Sie können das "Gatsby-Plugin-React-Helmet" verwenden, um den Dokumentenleiter Ihrer Blog-Posts zu verwalten. Mit diesem Plugin können Sie Elemente wie Titel, Beschreibung und Meta -Tags hinzufügen, die für SEO wichtig sind. Ihr Blog erleichtert es einfacher, durch Ihre Beiträge zu navigieren. Gatsby MDX unterstützt Pagination. Sie können das Plugin "Gatsby-Awesome-Pagination" verwenden, um paginierte Seiten zu erstellen. Dieses Plugin erstellt einen paginierten Index und auch einen pagierten Kontext für Ihre Seiten.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Entwicklerblog mit Gatsby und MDX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
