Wir erstellen einen Blog mit GatsbyJS, einem statischen Site-Generator für React. GatsbyJS nimmt Ihre Inhalte, entweder statische Dateien oder externe Daten von einer API, und generiert Seiten, die mit den Daten fest codiert sind. Anstatt die API für Ihre neuesten Blog-Posts für jede Anfrage aufzurufen, werden alle Ihre Posts in separaten HTML-Dateien vorab zwischengespeichert. Auf diese Weise können Sie Ihre gesamte Website über ein CDN bereitstellen. Und ohne externe API-Aufrufe oder gar serverseitiges Rendering lädt die Website blitzschnell – und ist offline-freundlich.
Heute werden wir einen statischen Blog entwickeln, der von GatsbyJS generiert und in Markdown geschrieben wurde, und wir werden ihn auf Github-Seiten bereitstellen, um den Blog zu hosten.
Aber zuerst, was ist GatsbyJS?
GatsbyJS ist ein Generator, mit dem Sie React-Apps codieren können, die in statische Assets (HTML + JS) kompiliert werden. Jede Seite ist eine technisch gesehen React Komponente die in eine HTML- und JS-Datei konvertiert wird, wenn es an der Zeit ist, die Produktionsseite zu erstellen. Wenn Sie jemals mit einem Generator wie Jekyll gearbeitet haben, der Code wie Liquid konvertiert und Markdown in HTML, werden Sie mit dieser Art von Konzept vertraut sein.
Das Besondere an GatsbyJS ist die Implementierung von GraphQL . Alle Ihre Inhalte werden auf der Entwicklungsseite über einen GraphQL-Server bereitgestellt. Wenn es an der Zeit ist, die statischen Assets zu kompilieren, fragt GatsbyJS den GraphQL-Server nach den Daten ab und fügt sie in Ihre HTML-Dateien ein.
Und was zum Teufel ist ein JAMstack?
Statische Websites werden mit der JAMstack-Revolution immer beliebter. JAM steht für Javascript, API und Markup. Im Grunde bedeutet dies, dass Ihre Website nur aus Folgendem besteht:
- Javascript (normalerweise ein Framework wie React)
- API (wie ein RSS-Feed oder ein JSON-API-Endpunkt) optional
- Auszeichnung (HTML, CSS, beliebige Medien wie Bilder)
Das Ziel ist es, eine Website zu erstellen, die nur aus clientseitigem HTML + CSS + JS besteht. Node muss nicht installiert werden , Rubin , PHP , oder jede andere serverseitige Sprache. Dies bedeutet, dass wir dies sogar direkt auf einem CDN wie S3 bereitstellen könnten auf AWS oder Netlify .
Es hat viele Vorteile, Ihre Website statisch zu machen, von schnellen Ladezeiten zu geringerer Serverlast , und Gatsby macht es ziemlich einfach selber abpumpen. Sie können ein großartiges "Erste Schritte" finden Leitfaden auf der offiziellen GatsbyJS-Website sowie viele der Konzepte, die wir in diesem Tutorial vermitteln. Wenn Sie sich verlaufen, würde ich dort herumstöbern und sehen, ob es hilft, ein klareres Bild zu zeichnen.
Lassen Sie uns einen statischen Blog erstellen und bereitstellen!
Gatsby installieren
Verwenden der Befehlszeilenschnittstelle
Sie können Gatsby entweder über ihre CLI installieren, was empfohlen wird:
npm install --global gatsby-cli
Führen Sie dann diesen Befehl in dem Ordner aus, in dem Sie das Projekt haben möchten:
gatsby new gatsby-blog
Klassischer Git-Weg
Oder Sie können das Repo von Github klonen und eine NPM-Installation ausführen:
git clone https://github.com/gatsbyjs/gatsby.git gatsby-blog && cd gatsby-blog && npm install
Beachten Sie, wenn Sie sich gegen die Installation der CLI entscheiden, müssen Sie NPM-Skripte anstelle von gatsby ausführen Befehle beim Erstellen für Entwicklung oder Produktion.
Hochfahren des Servers
Führen Sie den folgenden Befehl aus, um Ihren GatsbyJS-Blog lokal zu starten:
gatsby develop
Dieser Befehl führt den Build-Prozess aus, kompiliert den Code in statische Assets und gibt Ihnen Zugriff auf Ihre GatsbyJS-Site unter http://localhost:8000/. Und um die Entwicklung zu vereinfachen, wenn Sie Ihren Code aktualisieren, während dieser ausgeführt wird, wird er neu kompiliert – so dass Sie Änderungen sofort aktualisieren und sehen können.
Inhalte erstellen
Unser Blog wird Markdown-Dateien verwenden, um unsere Posts aufzunehmen und anzuzeigen. Wir verwenden das standardmäßige Markdown-Format mit einem Top-Header. Erstellen Sie eine neue Datei in src/blog/first-blog-post.md :
---
title: My first blog post
date: "2018-04-20"
---
Do you enjoy Gabe the Dog? He is the immortal lead singer of Bork, a European band that does covers of popular pop songs from the 80s, 90s, and today.
<iframe width="560" height="315" src="https://www.youtube.com/embed/c--etqIJcow?ecver=1" frameborder="0" allowfullscreen></iframe>
Nun, da wir einige Inhalte haben, zeigen wir sie auf der Website an.
Holen Sie sich unsere Markdown-Dateien
GatsbyJS verwendet Komponenten zum Erstellen von Seiten, sodass wir buchstäblich einfach neue JS-Dateien für jeden Blogbeitrag erstellen könnten. Aber das ist chaotisch und ineffizient. Was machen wir stattdessen? Gatsby bietet die Möglichkeit, Quellen zu erstellen Plugins, die Daten von bestimmten Endpunkten abrufen, wie RSS, Medium oder Github. Wir werden Markdown im selben Ordner wie das Gatsby-Projekt erstellen, also werden wir das Dateisystem-Quell-Plugin verwenden, um Dateien lokal abzurufen.
Wir installieren auch einen Transformator Plugin, das GraphQL-Daten aufnimmt und verarbeitet. In unserem speziellen Fall möchten wir unsere Daten nehmen und den Markdown in HTML verarbeiten. Führen Sie den folgenden Befehl aus, um dieses Plugin zu installieren:
npm install --save gatsby-source-filesystem gatsby-transformer-remark
Und fügen Sie das folgende JSON zu Ihrer Konfiguration hinzu, um beide Plugins zu aktivieren. Wenn Sie sich die path genau ansehen Eigenschaft des Dateisystem-Plugins laden wir unsere Blog-Artikel aus dem Blog-Ordner:
plugins: [
// react-helmet is included by default with gatsby
`gatsby-plugin-react-helmet`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/blog/`,
},
},
],
Starten Sie Ihren Entwicklungsserver neu, um die Änderungen zu übernehmen (drücken Sie STRG + C, um den Server zu beenden, und führen Sie dann gatsby develop aus wieder). Führen Sie nun diese GraphQL-Abfrage in Ihrem lokalen GraphiQL-Entwicklungspanel aus:
{
allFile {
edges {
node {
name
extension
}
}
}
}
Geben Sie die Abfrage ein und drücken Sie CMD + Enter. Sie sollten auf der rechten Seite ein JSON-Objekt mit dem gerade erstellten Blogbeitrag sehen.
Seiten dynamisch erstellen
Wir könnten problemlos damit beginnen, diese Daten auf unseren Seiten abzufragen und unsere Beiträge anzuzeigen. Wenn Sie dies in src/pages/index.js einfügen Sie werden alle Ihre Dateien in Ihrer Konsole ausgedruckt sehen:
import React from "react"
export default ({ data }) => {
// displays an object of the query data in console
// simply access what you need using a map function
// data.allFile.edges.map()
console.log(data)
return <div>Hello world</div>
}
export const query = graphql`
query MyFilesQuery {
allFile {
edges {
node {
relativePath
prettySize
extension
birthTime(fromNow: true)
}
}
}
}
`
Das ergibt eine tolle Titelseite mit einer Liste all unserer Posts, aber wir landen im selben Dilemma wie zuvor. Wenn wir getrennte Seiten für jeden Blogpost haben wollen, müssen wir neue Komponenten erstellen, um jede Seite einzeln abzufragen. Hier kommt die GatsbyJS-API ins Spiel.
GatsbyJS ist in der Lage, eine GraphQL-Abfrage zu nehmen und Seiten für jedes Objekt basierend auf einer Vorlage zu erstellen. Für jede von uns erstellte Markdown-Datei wird beim Erstellen unserer GatsbyJS-Website eine Vorlage durchlaufen, um eine Seite zu erstellen. Am Ende erhalten wir HTML-Dateien für jede Seite, wobei der Markdown in lesbaren Text geparst wird.
Fügen Sie dies in Ihren gatsby-node.js ein Datei.
const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);
exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
const { createNodeField } = boundActionCreators
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
};
exports.createPages = ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators
return new Promise((resolve, reject) => {
graphql(`
{
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`).then(result => {
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
// Data passed to context is available in page queries as GraphQL variables.
slug: node.fields.slug,
},
})
})
resolve()
})
})
};
Zuerst erstellen wir Slugs basierend auf unseren Markdown-Dateinamen und fügen sie den GraphQL-Abfrageergebnissen hinzu. Dann verwenden wir den createPages API zum Erstellen neuer Seiten basierend auf einer GraphQL-Abfrage für die Markdown-Posts. Dann verwenden wir den createPage Funktion, um die Seite tatsächlich basierend auf dem neuen Dateipfad und der Komponente zu generieren, die als Vorlage dienen.
Wenn Gatsby den Erstellungsprozess ausführt, wird dieses Skript ebenfalls ausgeführt, wodurch die Erstellung von Seiten ausgelöst wird.
Hier gibt es nicht viel zu erklären, da dies nur ein sehr API-spezifischer Code ist. Es ist einfach genug, um selbsterklärend zu sein, und alles, was unklar ist, sind wahrscheinlich rechthaberische Entscheidungen der API.
Die Blog-Vorlage
Nun, da unsere Blog-Posts bereit sind, in statische Seiten umgewandelt zu werden, erstellen wir tatsächlich die Vorlage, auf die wir oben verwiesen haben ./src/templates/blog-post.js . Erstellen Sie dort eine neue Datei und fügen Sie diese darin ein:
import React from "react";
export default ({ data }) => {
const post = data.markdownRemark;
return (
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
);
};
export const query = graphql`
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`;
Zeig mir die Beiträge!
Wir haben unsere Blog-Posts als Markdown bereit, um konvertiert zu werden, wir haben die React-Vorlage, das einzige, was übrig bleibt, ist das Verlinken der Posts.
Gehen Sie zu Ihrem index.js Datei und fügen Sie Folgendes ein:
import React from "react";
import Link from "gatsby-link";
export default ({ data }) => {
console.log(data);
return (
<div>
<h1 style={{ display: 'inline-block', borderBottom: '1px solid' }}>
Amazing Pandas Eating Things
</h1>
<h4>{data.allMarkdownRemark.totalCount} Posts</h4>
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id}>
<Link
to={node.fields.slug}
css={{ textDecoration: `none`, color: `inherit` }}
>
<h3 style={{ marginBottom: '4px' }}>
{node.frontmatter.title}{" "}
<span style={{ color: "#BBB" }}>— {node.frontmatter.date}</span>
</h3>
</Link>
<p>{node.excerpt}</p>
</div>
))}
</div>
);
};
export const query = graphql`
query IndexQuery {
allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}) {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
fields {
slug
}
excerpt
}
}
}
}
`;
Wir fragen mit dem MarkdownRemark-Endpunkt ab und holen uns die Titel, Slugs und Auszüge unserer neuesten Blog-Posts. Dann durchlaufen wir die Daten, um die Daten anzuzeigen, während wir den <Link> verwenden Komponente, um direkt auf den Blog-Beitrag zu verlinken (mit dem Slug).
Wenn Sie zu diesem Zeitpunkt Ihren Entwicklungsserver neu starten, sollte eine Liste der von Ihnen erstellten Markdown-Dateien angezeigt werden. Und wenn Sie darauf klicken, gelangen Sie zu einer anderen Seite mit dem vollständigen Blogbeitrag.
Herzlichen Glückwunsch! Sie haben Ihren ersten statischen Blog erstellt. Sie können hier aufhören und einfach gatsby build ausführen um eine produktionsreife Version Ihres Blogs im public verfügbar zu machen Mappe. Laden Sie diese direkt auf Ihren FTP- oder Webhoster hoch und schon kann es losgehen.
Aber warum hier aufhören? Eines der Prinzipien des JAMstack ist die Verwendung von Git zur Versionskontrolle. Auf diese Weise können Sie oder jeder Entwickler in Ihrem Team das Repository der Website einfach klonen und eine exakte Kopie der gesamten Website erstellen. Außerdem können Sie neue Änderungen schnell auf den Server übertragen, anstatt Dateien einzeln über FTP hochzuladen.
Fangen wir an
Wenn Sie Git noch nicht auf Ihrem Computer installiert haben, gehen Sie zur offiziellen Website und laden Sie es herunter. Öffnen Sie dann Terminal, cd in das Stammverzeichnis Ihres Projekts und führen Sie den folgenden Befehl aus:
git init
Dadurch wird ein neues Git-Repository in Ihrem Ordner erstellt. Lassen Sie uns nun alle Änderungen, die wir vorgenommen haben, in das neue Repository übertragen:
git add -A && git commit -m "Your Message"
Dies nimmt alle Dateien im Ordner und fügt sie dem Git-Repo hinzu. Wenn Sie Änderungen vornehmen, können Sie die Unterschiede zwischen früheren Versionen vor jedem Commit nachverfolgen (git diff ). Die Nachricht, die Sie hinterlassen, gibt normalerweise Hinweise darauf, welche Art von Änderungen am Code vorgenommen wurden. In diesem Fall ist etwas wie „Initial Commit“ oder „1.0“ angemessen.
Mit Github verbinden
Die Verbindung mit Github ermöglicht es Ihnen, die höchste Zugänglichkeit für Entwickler zu fördern, die auf den Quellcode der Website zugreifen möchten, und das kostenlose Hosting von Github zu nutzen](https://pages.github.com/). Sie melden sich für ein Github-Konto an, falls Sie noch keines haben, erstellen ein öffentliches Repo und pushen (oder laden) die Projektdateien über Git-Befehle auf Github hoch.
Melden Sie sich bei Github an
- Erstellen Sie ein neues Konto auf Github
- Melden Sie sich bei Ihrem Konto an.
- Klicken Sie im oberen Menü auf das Pluszeichen und dann im Dropdown-Menü auf "Neues Repository".
- Geben Sie Ihrem Repository einen beliebigen Namen und klicken Sie dann auf die große grüne Schaltfläche "Repository erstellen".
Synchronisieren Sie Ihr Repo mit Github
Um die Synchronisierung mit Github mit einem einzigen Klick zu machen, installieren wir gh-pages . Dies ist ein Github Pages-Paket, das Änderungen an Github überträgt und die Seite aktualisiert. Führen Sie den folgenden Befehl aus, um das Paket zu installieren:
npm install gh-pages --save-dev
Sie müssen auch den package.json ändern mit neuem Skript. Dieses Skript führt den gatsby build aus Prozess und führt dann gh-pages aus Befehl zum Bereitstellen auf Github. Fügen Sie die folgende Zeile in den Abschnitt scripts ein:
{
scripts: {
// ...you'll see build, develop, format, etc above this....
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
}
}
Und da Github Pages den Blog in einem Unterverzeichnis hostet (z.B. yourname.github.io/this-subdirectory/ ), müssen wir der Konfiguration gatsby-config.js ein Pfadpräfix hinzufügen um GatsbyJS wissen zu lassen, dass es nicht im Stammverzeichnis ist:
{
siteMetadata: {
title: `Your site Name`,
},
pathPrefix: "/your-repo-name",
}
Bereitstellen!
Gehen Sie zu Ihrem neuen Repo auf Github, klicken Sie auf die Schaltfläche Klonen und kopieren Sie die URL (die auf .git endet). Führen Sie dann den folgenden Befehl aus, um Ihrem lokalen Git-Repo ein „Remote“-Repo hinzuzufügen:
git remote add origin http://github.com/username/repo-name.git
Jetzt können wir die Seite erstellen und auf Github pushen. Geben Sie den folgenden Befehl ein, geben Sie Ihr Github-Passwort ein, wenn Sie dazu aufgefordert werden, und profitieren Sie!:
npm run deploy
Der public Ordner Ihres Blogs wird in den gh-pages hochgeladen Zweig Ihres Repos. Wenn Sie auf das Dropdown-Menü Zweig:Master klicken Sie sollten den Zweig gh-pages sehen.
Durchsuchen Sie Ihr Blog
Gehen Sie zurück zu Ihrem Repository auf Github und prüfen Sie, ob Sie Ihre Dateien erfolgreich gepusht (oder hochgeladen) haben. Wenn es funktioniert hat, gehen Sie zur Seite mit den Projekteinstellungen. Hier sollten Sie sicherstellen, dass Github Pages aktiviert und auf gh-pages eingestellt ist Zweig.
Sie sollten auf den Blog zugreifen können, indem Sie zu http://yourusername.github.io/repo-name/.
gehenVielleicht nicht die 5-Minuten-Installation von Wordpress
Es ist vielleicht nicht die blitzschnellste Blog-Erstellung da draußen, zwischen der Zeit, die es braucht, um npm zu installieren Pakete und die Zeit, die Sie mit git verschwenden . Obwohl Sie zugeben müssen, dass wir in relativ kurzer Zeit ein statisches Blog-Ökosystem erstellen konnten, das sofort bereitgestellt wird. Es ist unglaublich, das Potenzial von GatsbyJS und die unterschiedlichen Erfahrungen zu sehen, die Sie im Vergleich zu Standard-CMS-Plattformen wie Wordpress oder Drupal erstellen können.
Wenn Sie jemals darüber nachgedacht haben, den Sprung zu einer progressiven Webanwendung (PWA) zu wagen, statische Anwendungen ausprobieren möchten oder einfach daran interessiert waren, von Wordpress wegzumigrieren – ich hoffe, dieser Leitfaden hat Ihnen geholfen, eine Alternative zu der zu entdecken Mainstream-Blogging-Erfahrung.
Das Potenzial ist endlos
Dies ist der erste Teil einer Reihe von Artikeln, die wir über GatsbyJS schreiben werden. Wir haben hier gerade unseren Zeh ins Wasser getaucht, es gibt eine Fülle von Plugins und Potenzialen, die wir mit diesem Framework noch erkunden müssen. Wir werden uns mit der Erstellung von Projekten befassen, die die Grenzen des JAMstack erkunden oder erweitern, von einer Portfolio-Website mit der Behance-API über einen statischen E-Commerce-Shop mit Stripe bis hin zum Erstellen einer echten JAM-App auf einem CDN mit automatischer und atomarer Funktionalität baut.
Behalten Sie das Tag #GatsbyJS im Auge, um unseren nächsten Beitrag zu sehen!
Die Beispielseite finden Sie hier , und das letzte Beispielrepo hier .
Bleib regelmäßig,
Oskar
Weiterlesen:
- Git-Leitfaden – Starten Sie ein neues Git-Repository
- JAMstack.org
- GatsbyJS
- GatsbyJS-Tutorials
- GatsbyJS-Plugins
- Wie GatsbyJS mit Github-Seiten funktioniert
- gatsby-source-filesystem
- gatsby-transformer-bemerkung