Anleitung - Erster Blog mit Gatsby und Ghost [mit Video]

Auf dieser Seite fasse den Inhalt meiner Videos zum Thema Gatsby und Ghost zusammen. Da es meiner Meinung nach nicht genügend deutschsprachige Anleitungen dazu gibt, habe ich eins erstellt. Es geht darum, wie man von Grund auf seine erste Gatsby.js Seite erstellt, Ghost auf einem VPS installiert und als headless CMS verwendet und auch, wie man die Seite dann online in der Gatsby-Cloud veröffentlicht. Ich zeige alle Schritte, die dazu nötig sind. Die Videos haben eine Gesamtlänge von zwei Stunden und befinden sich (demnächst) bei YouTube (aufgrund der Größe und Reichweite möchte ich diese nicht selbst hosten), dementsprechend gehe ich nicht auf jede Kleinigkeit ein, sondern versuche eher einen Überblick zu geben.

Videos

Auf YouTube habe ich eine Playlist erstellt. Bisher sind der erste Teil und der zweite Teil online (Links zu YouTube). Der dritte Part folgt noch.

Installation der Gatsby-Seite

Installation der Gatsby-CLI

Bevor die lokale Gatsby-Seite erstellt werden, müssen ein paar Programme vorinstalliert werden. Wir brauchen Node.js, Git sowie VSCode (oder einen anderen Texteditor).

Im Terminal (als Administrator ausgeführt) installieren wir die Gatsby-CLI.

npm install -g gatsby-cli

Die Gatsby-CLI ist damit installiert.

Gatsby-Seite erstellen

Zunächst muss git/bash geöffnet werden (entweder Standalone oder in VSCode)

Der Befehl gatsby new erstellt eine neue Gatsby Seite.

Die Gatsby-Seite ist damit erstellt.

Live-Server starten

Zum Starten des Live-Servers muss man der anzeigten Anweisung folgen.

cd namedesneuenverzeichnisses
# bzw cd vollständiger Pfad vom Verzeichnis, an dem die neue Seite erstellt wurde
npm run develop

Der Live-Server wird gestartet. Mit Strg + C wird er wieder beendet.

Lokales Gatsby-Projekt bearbeiten

Nachdem das Projekt geöffnet wird, können nun die einzelnen Elemente bearbeitet werden.

Index.js anpassen

Der Inhalt der index.js im Verzeichnis /src/pages kann gelöscht werden, wir wollen stattdessen unseren eigenen hinzufügen. /src/pages/index.js:

import * as React from 'react'

const IndexPage = () => {
  return (
    <div>
      <h1> Hallo Welt </h1>
      <p> Hier könnte Ihre Werbung stehen 😃 </p>
    </div>
  )
}

export default IndexPage

Innerhalb der Return-Funktion kann dann HTML-in-JS-Code genutzt werden. Wird der Development-Server wieder gestartet (entweder gatsby develop oder npm run develop), sind die Änderungen zu sehen.

CSS global einbinden

Für das Styling kann CSS genutzt werden. Dazu eine CSS-Datei erstellen und diese bearbeiten.

mkdir src/styles
touch src/styles/global.css

Ich erstelle eine global.css in einem Styles-Ordner In diese kommt dann gewöhnlicher CSS-Code. /src/styles/global.css:

body {
  margin: 0 auto;
  max-width: 50em;
}

h1 {
  color: slateblue;
}

Der CSS-Code kann in der jeweiligen Gatsby-Seite importiert werden oder wir nutzen den gatsby-browser. Dazu gatsby-browser.js im Root-Verzeichnis erstellen.

touch gatsby-browser.js

In die Datei folgenden Code einfügen:

import './src/styles/global.css'

Sobald der Server neu gestartet wird, sind die Änderungen durch die CSS-Datei zu sehen.

Mehrere Unterseiten mit Gatsby-Link verbinden

Wir erstellen eine neue Unterseite im Pages-Verzeichnis.

touch src/pages/about.js

Und fügen da wieder den Code ein, denn wir benötigen.

import * as React from 'react'

const About = () => {
  return (
    <div>
      <h1> About </h1>
      <p> Das ist die About-Seite 😃 </p>
      <p> Einen Link zur Hauptseite gibt es leider noch nicht </p>
    </div>
  )
}

export default About

Diese Seite ist nach dem Speichern unter localhost:8000/about zu sehen, sofern der Gatsby-Server noch läuft.

Mit Gatsby-Link lassen sich interne Links einfügen. Wir müssen es nur importieren. Dazu ändern wir die About-Seite wieder.

import * as React from 'react'
import { Link } from 'gatsby'

const About = () => {
  return (
    <div>
      <h1> About </h1>
      <p> Das ist die About-Seite 😃 </p>
      <p>
        <Link to='/'> Home </Link> ist nun verlinkt.
      </p>
    </div>
  )
}

export default About

Struktur mit Komponenten

Die Gatsby-Browser.js Datei kann ich wieder leeren, die brauchen wir vorerst nicht mehr. Es ist empfehlenswert wiederverwendbare Komponenten zu nutzen. Dazu erstellen wir einen neuen Ordner.

mkdir src/components
touch src/components/layout.js

In die Layout.js füge ich folgenden Code ein:

import * as React from "react";
import { Link } from "gatsby";

const Layout = ({ pageTitle, children }) => {
  return (
    <main>
      <title>{pageTitle}</title>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <a href="https://deployn.de" target="_blank">Deployn</href>
          </li>
        </ul>
      </nav>
      <h1>{pageTitle}</h1>
      {children}
    </main>
  );
};

export default Layout;

Der Link im <a>-Tag ist deutlich langsamer (und das liegt nicht nur an der Geschwindigkeit meiner Seite).

Jetzt müssen die Seiten angepasst werden.

import * as React from 'react'
import Layout from '../components/layout'

const About = () => {
  return (
    <Layout pageTitle='About'>
      <p> Das ist die About-Seite 😃 </p>
    </Layout>
  )
}

export default About

import * as React from 'react'
import Layout from '../components/layout'

const IndexPage = () => {
  return (
    <Layout pageTitle='Home'>
      <p> Das ist nicht die About-Seite 😃 </p>
    </Layout>
  )
}

export default IndexPage

Dadurch habe ich eine Layout-Komponente, die ich wieder verwende.

Styling mit Komponenten

Ich erstelle eine module.css.

touch src/components/layout.module.css

Da kommt CSS-Code rein.

.container {
  margin: 0 auto;
  max-width: 50em;
}

.heading {
  color: slateblue;
}

Dieses CSS importieren wir in der Komponente.

import * as React from "react";
import { Link } from "gatsby";
import { container, heading } from "./layout.module.css";

const Layout = ({ pageTitle, children }) => {
  return (
    <main className={container}>
      <title>{pageTitle}</title>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <a href="https://deployn.de" target="_blank">Deployn</href>
          </li>
        </ul>
      </nav>
      <h1 className={heading}>{pageTitle}</h1>
      {children}
    </main>
  );
};

export default Layout;

Bilder mit Gatsby-Plugin-Image einfügen

Mit Gatsby-Plugin-Image lassen sich Bilder einfügen und dabei optimieren. Dazu muss das Plugin installiert sein.

npm install gatsby-plugin-image

Es muss auch in der Gatsby-Config als Plugin gelistet sein.

Wir möchten ein statisches Bild einfügen, zunächst fügen wir irgendein Bild in das Projekt ein.

mkdir src/images
# hier nun ein Bild einfügen

Dieses Bild soll auf der About-Seite geladen werden. Dazu StaticImage importieren und nutzen.

import * as React from 'react'
import { StaticImage } from 'gatsby-plugin-image'
import Layout from '../components/layout'

const About = () => {
  return (
    <Layout pageTitle='About'>
      <p> Das ist die About-Seite 😃 </p>
      <StaticImage src='../images/bild.jpg' />
    </Layout>
  )
}

export default About

Es können noch ein paar Optionen genutzt werden.

import * as React from 'react'
import { StaticImage } from 'gatsby-plugin-image'
import Layout from '../components/layout'

const About = () => {
  return (
    <Layout pageTitle='About'>
      <p> Das ist die About-Seite 😃 </p>
      <StaticImage
        src='../images/bild.jpg'
        alt='Eine Bildbeschreibung'
        width='200'
        placeholder='tracedSVG'
      />
    </Layout>
  )
}

export default About

Die Dokumentation erklärt das Plugin ausführlicher.

Gatsby-Seite bereitstellen

Für das Build muss gegebenenfalls die Site-URL in der Gatsby-config eingetragen werden.

module.exports = {
  siteMetadata: {
    title: "Deployn",
    siteUrl: "https://deployn.de",
  },
  plugins: [
    "gatsby-plugin-gatsby-cloud",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/icon.png",
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    },
  ],
};

Nun kann der Build-Prozess gestartet werden.

npm run build

Im Public-Ordner wird jetzt eine Seite erstellt. Die Seite kann veröffentlicht werden, indem der Inhalt auf einen Webserver gepackt wird.

Server einrichten

Als Nächstes wird ein CMS benötigt. Ich möchte dafür Ghost.js headless benutzen. Hat man einen Server mit Traefik als Proxy Manager bereits eingerichtet, kann diese Anleitung genutzt werden. Ansonsten fasse ich hier noch mal die Schritte zusammen.

Möchte man weder Ghost lokal installieren (schwierig, wenn es immer online sein soll und es mehrere Autoren gibt), noch aus finanziellen Gründen Ghost Pro nutzen, bleibt nur das Hosting auf einem Server.

VPS mieten

Ich nutze dafür hier einen Server von Netcup (Affiliate-Link). Für Neukunden habe ich hier Gutscheine für die Server. Nutzt man den Server nur für Ghost reicht der kleinste aus, jedoch hat der auch wenig Speicherplatz.

Ubuntu 20.04 installieren

Auf dem Server installiere ich Ubuntu 20.04.

Funktioniert es auch mit den anderen Images? Ja, sogar fast identisch, weil ich Docker nutze.

SSH Verbindung herstellen

Ich stelle eine SSH Verbindung zum Server her. Bei Windows muss ich dafür vorerst den OpenSSH-Client aktivieren. Dazu unter “Apps und Features” auf „optionale Features“ drücken.

Dort lässt sich der OpenSSH-Client installieren (nicht verwechseln mit OpenSSH-Server).

Jetzt ein Terminal aufrufen.

ssh root@185.183.158.137

Die IP-Adresse muss die des eigenen Servers sein

User einrichten

apt update
apt upgrade

Damit updaten wir den Server aus den Ubuntu Datenpaketen

useradd -m -G sudo jewgeni
passwd jewgeni

Damit erstellen wir einen neuen Nutzer, fügen ihn der sudo-Gruppe hinzu und geben ihm ein Passwort

reboot

Damit starten wir den Server neu

ssh jewgeni@185.183.158.137

Diesmal verbinden wir uns mit dem neu erstellten Nutzer

Docker installieren

Möglichkeit 1 ist es, sich einfach Docker aus den Standard-Ubuntu-Paketen zu installieren.

sudo apt install docker docker-compose

Nachteil: Es ist nicht die neuste Version.

Möglichkeit 2 ist es, die offizielle Anleitung zu befolgen.

sudo apt-get remove docker docker-engine docker.io containerd runc
sudo apt-get update
sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
  sudo apt-get update
  sudo apt-get install docker-ce docker-ce-cli containerd.io

Damit ist Docker installiert

sudo gpasswd -a jewgeni docker

Damit fügen wir den Benutzer in die Docker-Gruppe hinzu Ich installiere auch noch Lazydocker.

curl https://raw.githubusercontent.com/jesseduffield/lazydocker/master/scripts/install_update_linux.sh | bash

Ich erstelle einen Docker Ordner und gebe der Gruppe Docker alle Rechte daran.

mkdir docker
sudo apt install acl
sudo setfacl -Rdm g:docker:rwx docker
sudo setfacl -Rm g:docker:rwx docker
sudo chmod -R 775 docker
sudo chown -R jewgeni:docker docker

Domain einrichten

Als Nächstes benötige ich eine Domain für den Server. Auch hier verwende ich Netcup (Affiliate-Link). Eine Domain mit “.de” als TLD kostet 5 € im Jahr (auch in den folgenden Jahren).

In den DNS Einstellungen der Domain setze ich einen Eintrag für Root (@), sowie einen mit einer Wildcard (*), nachdem ich die Default-Werte gelöscht habe.

Nach dem Speichern vergehen bis zu 48 Stunden, bevor der Eintrag wirklich Auswirkungen hat.

Nginx-Proxy-Manager

Installieren

Zur einfacheren Verwaltung eines Nginx Reverse-Proxys und Let’s Encrypt Zertifikaten möchte ich den Nginx-Proxy-Manager auf dem Server installieren.

ssh jewgeni@185.183.158.137

Verbindung zum Server wiederherstellen

cd ~/docker
sudo docker network create npm_net
mkdir nginx-proxy-manager
cd nginx-proxy-manager
mkdir data/mysql -p
mkdir letsencrypt
touch .env
echo "DB_PWD=$(openssl rand -hex 16)" >> .env
echo "DB_ROOT_PWD=$(openssl rand -hex 16)" >> .env
touch docker-compose.yml

Wir haben damit ein neues Docker-Netzwerk und im neuen nginx-proxy-manager Ordner weitere Verzeichnisse und zwei Dateien erstellt Die Docker-Compose Datei muss befüllt werden. Man kann dazu auch VSCode nutzen.

nano docker-compose.yml

version: "3.7"


networks:
  npm_net:
    external:
      name: npm_net
  internal:
    external: false
  default:
    driver: bridge


services:
  nginx-proxy-manager:
    container_name: nginx-proxy-manager
    image: jc21/nginx-proxy-manager:2.9.3
    restart: unless-stopped
    networks:
      - npm_net
      - internal
    ports:
      - "80:80"
      - "443:443"
      - "81:81"
    environment:
      DB_MYSQL_HOST: npm_db
      DB_MYSQL_PORT: 3306
      DB_MYSQL_USER: npm
      DB_MYSQL_PASSWORD: $DB_PWD
      DB_MYSQL_NAME: npm
      DISABLE_IPV6: true
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
    depends_on:
      - npm_db

  npm_db:
    container_name: npm_db
    image: mariadb:10.6.1
    restart: unless-stopped
    networks:
      - internal
    environment:
      MYSQL_ROOT_PASSWORD: $DB_ROOT_PWD
      MYSQL_DATABASE: npm
      MYSQL_PASSWORD: $DB_PWD
      MYSQL_USER: npm
     volumes:
       - ./data/mysql:/var/lib/mysql

docker-compose up -d

Die Logs können in Lazydocker angesehen werden.

lazydocker
# bzw. sudo lazydocker

Konfigurieren

Die Anmeldung unter der IP-Adresse und Port 81 erfolgt mit admin@example.com und dem Passwort “changeme”.

Wir benötigen einen neuen Proxy Host.

Als Domain muss nun die Subdomain eingetragen werden, unter der man diese GUI des nginx-proxy-managers erreichen möchte. Hostname ist localhost. Port ist 81, sofern diese Einstellung in der docker-compose Datei nicht geändert wurde.

Unter den SSL-Einstellungen muss ein neues Zertifikat angefordert werden.

Sobald es gespeichert ist, lässt sich der nginx-proxy-manager über die Subdomain aufrufen.

Firewall

Wir installieren eine Firewall auf dem Server (optional).

ssh jewgeni@185.183.158.137

Verbindung zum Server wiederherstellten

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw allow 22/tcp
sudo ufw default deny incoming
sudo ufw enable
sudo reboot

Es muss ein anderer Port gewählt werden, wenn SSH nicht über Port 22 genutzt wird, sonst sperrt man sich selbst aus Docker sorgt dafür, dass die Firewall nicht richtig blockiert. Bei Github gibt es eine Lösung:

sudo nano /etc/ufw/after.rules

In diese Datei wird unten folgender Code angefügt.

# BEGIN UFW AND DOCKER
*filter
:ufw-user-forward - [0:0]
:ufw-docker-logging-deny - [0:0]
:DOCKER-USER - [0:0]
-A DOCKER-USER -j ufw-user-forward

-A DOCKER-USER -j RETURN -s 10.0.0.0/8
-A DOCKER-USER -j RETURN -s 172.16.0.0/12
-A DOCKER-USER -j RETURN -s 192.168.0.0/16

-A DOCKER-USER -p udp -m udp --sport 53 --dport 1024:65535 -j RETURN

-A DOCKER-USER -j ufw-docker-logging-deny -p tcp -m tcp --tcp-flags FIN,SYN,RST,ACK SYN -d 192.168.0.0/16
-A DOCKER-USER -j ufw-docker-logging-deny -p tcp -m tcp --tcp-flags FIN,SYN,RST,ACK SYN -d 10.0.0.0/8
-A DOCKER-USER -j ufw-docker-logging-deny -p tcp -m tcp --tcp-flags FIN,SYN,RST,ACK SYN -d 172.16.0.0/12
-A DOCKER-USER -j ufw-docker-logging-deny -p udp -m udp --dport 0:32767 -d 192.168.0.0/16
-A DOCKER-USER -j ufw-docker-logging-deny -p udp -m udp --dport 0:32767 -d 10.0.0.0/8
-A DOCKER-USER -j ufw-docker-logging-deny -p udp -m udp --dport 0:32767 -d 172.16.0.0/12

-A DOCKER-USER -j RETURN

-A ufw-docker-logging-deny -m limit --limit 3/min --limit-burst 10 -j LOG --log-prefix "[UFW DOCKER BLOCK] "
-A ufw-docker-logging-deny -j DROP

COMMIT
# END UFW AND DOCKER

Jetzt muss ich noch die Routen erlauben.

sudo ufw route allow 80/tcp
sudo ufw route allow 443/tcp
sudo reboot

Ghost CMS

Installation

Die Installation von Ghost lässt sich durch Docker sehr einfach durchführen. Dazu verbinde ich mich wieder mit dem Server.

ssh jewgeni@185.183.158.137

Verbindung zum Server wiederherstellten

cd ~/docker
mkdir ghost
cd ghost
mkdir content
mkdir db
touch .env
touch docker-compose.yml
echo "DB_PWD=$(openssl rand -hex 20)" >> .env

nano docker-compose.yml

version: '3.7'

networks:
  npm_net:
    external:
      name: npm_net
  internal:
    external: false
  default:
    driver: bridge

services:
  ghost:
    container_name: ghost
    image: ghost:4.6.4
    restart: unless-stopped
    networks:
      - npm_net
      - internal
    security_opt:
      - no-new-privileges:true
    environment:
      - database_client=mysql
      - database_connection_host=ghost-db
      - database_connection_user=root
      - database_connection_password=$DB_PWD
      - database_connection_database=ghost
      - url=https://ghost.pixan.de
    volumes:
      - ./content:/var/lib/ghost/content
    depends_on:
      - ghost-db

  ghost-db:
    container_name: ghost-db
    image: mariadb:10.6.1
    restart: unless-stopped
    networks:
      - internal
    security_opt:
      - no-new-privileges:true
    environment:
      MYSQL_ROOT_PASSWORD: $DB_PWD
    volumes:
      - ./db:/var/lib/mysql

docker-compose up -d

Ghost Reverse-Proxy

Als Nächstes muss im Nginx-Proxy-Manager ein neuer Proxy-Host für Ghost eingerichtet werden. Der Hostname entspricht dem Namen des Services (in meinem Fall ghost), der Port von Ghost ist 2368.

Unter den SSL Einstellungen wieder ein neues Zertifikat anfordern (oder auf DNS-Challenge umstellen).

Nach dem Speichern müsste das Ghost CMS über die URL erreichbar sein. Unter domain.de/ghost befindet sich die Administration. Hier muss man sich einen Account anlegen.

Headless

Ghost erstellt (wie auch z. B. WordPress) automatisch ein Frontend. Nutzt man kein Gatsby, kann man so auch einen Blog direkt betreiben. Wir benötigen aber kein Frontend, dass von Unbekannten besucht werden soll. Deshalb können wir die Seite unter den Einstellungen auf privat stellen.

Posts

Wenn man den Nutzer Ghost löscht, sollten zum Test mindestens zwei Testposts erstellt und veröffentlicht werden. Sonst haben wir nichts, worüber das Query später laufen kann.

Ghost als Quelle

Plugin installieren

Um Ghost als Quelle zu nutzen, muss das Gatsby Source Ghost Plugin in der Gastby-Seite installiert werden.

npm install gatsby-source-ghost

Content-API-Key

Das Plugin benötigt den content-Api-Key, um sich verifizieren zu können. Diesen kann man in der Ghost-Instanz unter dem Menüpunkt “Integrations” erstellen.

Nachdem ein Name vergeben wird, ist der API-Key zu sehen.

Einbinden in Gatsby

Anschließend muss das Plugin inklusive der eigenen Daten der Gatsby-Config Datei hinzugefügt werden.

module.exports = {
  siteMetadata: {
    title: 'Pixan',
    siteUrl: 'https://pixan.de'
  },
  plugins: [
    'gatsby-plugin-gatsby-cloud',
    'gatsby-plugin-image',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: 'src/images/icon.png'
      }
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: './src/images/'
      },
      __key: 'images'
    },
    {
      resolve: `gatsby-source-ghost`,
      options: {
        apiUrl: `https://ghost.pixan.de`,
        contentApiKey: `74bb1b0d67765995e687357669`
      }
    }
  ]
}

Im Root-Verzeichnis muss nun eine gatsby-node.js erstellt werden.

const path = require(`path`)

exports.createPages = async ({ graphql, actions, reporter }) => {
  const postTemplate = path.resolve(`./src/templates/post.js`)

  // Query Ghost data
  const result = await graphql(`
    {
      allGhostPost(sort: { order: ASC, fields: published_at }) {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  if (!result.data.allGhostPost) {
    return
  }

  // Create pages for each Ghost post
  const items = result.data.allGhostPost.edges
  items.forEach(({ node }) => {
    node.url = `/${node.slug}/`

    actions.createPage({
      path: node.url,
      component: postTemplate,
      context: {
        slug: node.slug
      }
    })
  })
}

Jetzt benötigen wir die Template-Datei für die Posts, die dynamisch aus den GhostPosts erstellt werden sollen. Wir speichern sie in den Ordnern src/templates.

cd src
mkdir templates
cd templates
touch post.js

import React from 'react'
import { graphql } from 'gatsby'

const Post = ({ data }) => {
  const post = data.ghostPost
  return (
    <>
      <article className='post'>
        {post.feature_image ? (
          <img src={post.feature_image} alt={post.title} />
        ) : null}
        <h1>{post.title}</h1>
        <section dangerouslySetInnerHTML={{ __html: post.html }} />
      </article>
    </>
  )
}

export default Post

export const postQuery = graphql`
  query ($slug: String!) {
    ghostPost(slug: { eq: $slug }) {
      title
      slug
      feature_image
      html
    }
  }
`

Damit werden die Posts dynamisch erstellt.

Dynamische Liste

Als Beispiel möchte ich, dass alle Posts als Link auf der Blogseite gezeigt werden. Dazu verändern wir die blog.js-Datei.

import * as React from 'react'
import { graphql, Link } from 'gatsby'
import Layout from '../components/layout'

const Blog = ({ data }) => {
  return (
    <Layout pageTitle='Blog'>
      <p>Hier könnte ein Blog sein.</p>
      <ul>
        {data.allGhostPost.edges.map(({ node }) => (
          <li>
            <Link to={`/${node.slug}`}>{node.title}</Link>
          </li>
        ))}
      </ul>
    </Layout>
  )
}

export default Blog

export const postSlug = graphql`
  query MyQuery {
    allGhostPost {
      edges {
        node {
          slug
          title
        }
      }
    }
  }
`

Über die Map-Funktion werden alle Slugs nach dem dazugehörigen Titel durchsucht. Der Titel wird angezeigt, der Link führt selbstverständlich zum Slug.

Veröffentlichen in der Gatsby-Cloud

Repository erstellen

Zunächst benötige ich ein Repository. Dazu nutze ich GitHub. Nach der Anmeldung kann ein neues (privates) Repository erstellt werden.

Lokales Projekt zu Github kopieren

In meinem Gatsby Projekt initiiere ich Git. Für den pull benötige ich die URL des Repositorys.

git init
git pull https://github.com/Benutzername/Name.git
git remote add origin https://github.com/Benutzername/Name.git

In die Git-Ignore-Datei füge ich zumindest .cache, .vscode, node-modules sowie public hinzu, damit diese Dateien oder Verzeichnisse nicht hochgeladen werden.

Vor dem Upload muss Git konfiguriert werden.

git config --global user.name "Github Name"
git config --global user.email eigenemail@gmail.com

Nun alle Dateien auswählen, damit sie in den Staged Changes auftauchen. Über den Haken bestätigen und einen Kommentar schreiben.

Über das Symbol unten können die Änderungen synchronisiert werden.

Anschließend müsste in Github der Code in master-branch zu sehen sein.

Gatsby-Cloud

Jetzt einen kostenlosen Account in der Gatsby-Cloud erstellen. Beim Hinzufügen einer neuen Seite aus einem Github Repository wird ein Webhook angezeigt. Den kopieren wir uns.

Dieser kann wiederum den Integrationen als Custom Integration in Ghost hinzugefügt werden.

Letztlich müsste indessen die Seite erstellt sein.

Unter den Einstellungen lässt sich die eigene Domain hinzufügen.

Die angezeigten DNS-Einstellungen müssen gesetzt werden.

Damit ist die Einrichtung soweit fertig und die Seite ist (eventuell erst nach ein paar Stunden) unter der eigenen Domain erreichbar.