gatsby starter try ghost herunterladen - gatsby starter try ghost Quellcode herunterladen

gatsby starter try ghost

Andere Kategorien

1.0.0

Herunterladen

Jamifys Blog-Starter

Ein Gatsby-Starter zum Erstellen von Blogs mit dem kopflosen Ghost CMS.

Verwandeln Sie Ihren Ghost-Blog in eine rasant schnelle statische Website. Dieses Gatsby-Design ist ein Front-End-Ersatz der Ghost-Lenker-Engine mit einem verbesserten Ghost-Casper-Look und -Feeling. Alle Inhalte stammen von einem Headless Ghost CMS.

️ Ich pflege dieses Plugin nicht mehr aktiv, aber PRs für Korrekturen und Versionsaktualisierungen sind sehr willkommen!

Alternativen

Keine Lust mehr auf gatsby-config.js ? Schauen Sie sich Blogody an, eine integrierte Lösung mit vielen weiteren Vorteilen!

Bevorzugen Sie Next.js gegenüber Gatsby? Gehen Sie zu next-cms-ghost!

? Tutorials

Schauen Sie sich die Tutorials an, um praktische Anleitungen zur Verwendung dieses Projekts zu erhalten.

? Demo

Spielen Sie mit der Demo, um einen ersten Eindruck zu bekommen.

Merkmale

Ghost Casper-Look und Feel
Bilder mit Lazy-Loading und Unschärfeeffekt?
Unendliche Schriftrolle
Empfohlene Beiträge oben angepinnt?
Sticky-Navigationskopfzeilen
Bewegen Sie den Mauszeiger über den Avatar des Autors
Gestylte 404-Seite
SEO-optimiert
Vollständig reaktionsfähig
Erweitertes Routing?
Zusammensetzbar und erweiterbar
Inkrementeller Build aktiviert?

? Enthaltene Plugins

Der Einfachheit halber wurden die folgenden Plugins hinzugefügt:

Name	Version	Beschreibung
`gatsby-theme-ghost-dark-mode`		Dunkelmodus umschalten?
`gatsby-rehype-ghost-links`		CMS-Links von absolut auf relativ umschreiben
`gatsby-rehype-prismjs`		Syntaxhervorhebung mit PrismJS
`gatsby-theme-ghost-members` ?		Mitgliederabonnements

Wenn Sie sie nicht benötigen, können Sie sie in gatsby-config.js und package.json entfernen, was Ihnen während des Erstellungsprozesses möglicherweise etwas Zeit sparen kann.

? Weitere Plugins

Durch die Installation von Gatsby-Themes oder Plugins können zusätzliche Funktionen integriert werden. Die folgenden Plugins wurden auf ihre Funktionsfähigkeit mit gatsby-starter-try-ghost getestet:

Name	Version	Beschreibung
`gatsby-rehype-inline-images` ?		Lazy-Loading von Inline-Bildern mit Unschärfe
`gatsby-theme-ghost-contact`		Kontaktseite
`gatsby-theme-ghost-commento`		Kommentarsystem mit Commento
`gatsby-theme-ghost-toc` ?		Inhaltsverzeichnis
`gatsby-plugin-ackee-tracker`		Site-Tracking mit Ackee
`gatsby-plugin-google-analytics`		Site-Tracking mit Google Analytics

? Erste Schritte

Installieren Sie diesen Starter, indem Sie ihn ausführen

gatsby new try-ghost https://github.com/styxlab/gatsby-starter-try-ghost

Verzeichnis wechseln
```
 cd try-ghost
```
Laufen
```
yarn develop
```
und besuchen Sie Ihre Website unter http://localhost:8000 .

Konfigurieren

 //siteConfig.js
module . exports = {
    // Do not include a trailing slash!
    siteUrl : `https://your-blog.com` ,

    // Maximum number of post shown per page
    // Infinite Scroll: Initial chunk of posts, subsequent posts are fetched one by one
    postsPerPage : 3 ,

    // This allows an alternative site title for meta data for pages.
    siteTitleMeta : `Gatsby Starter Ghost CMS` ,

    // This allows an site description for meta data for pages.
    siteDescriptionMeta : `Turn your Ghost blog into a flaring fast static site with Gatsby` ,

    // Used for App and Offline manifest e.g. Mobile Home Screen
    shortTitle : `Ghost` ,
    siteIcon : `favicon.png` ,
    backgroundColor : `#e9e9e9` ,
    themeColor : `#15171A` ,

    // Include Gatsby images for lazy loading and image optimizations (default: true)
    gatsbyImages : true ,

    // Overwrite navigation menu (default: []), label is case sensitive
    // overwriteGhostNavigation: [{ label: `Home`, url: `/` }],
} ;

In der oben gezeigten Konfiguration sind die wichtigsten zu ändernden Felder siteUrl , siteTitleMeta und siteDescriptionMeta . Aktualisieren Sie zumindest diese entsprechend Ihren Anforderungen.

? Ghost Content API-Schlüssel

Alle Inhalte stammen von einem Ghost CMS. Standardmäßig werden Inhalte vom Demo-Speicherort unter https://cms.gotsby.org abgerufen. Sicherlich möchten Sie Ihre eigenen Inhalte beschaffen. Es gibt zwei Möglichkeiten, Ihre Inhaltsschlüssel verfügbar zu machen. Wählen Sie die Methode entsprechend Ihrem Build-Szenario.

Bauen mit Cloud-Anbietern

Wenn Sie Ihr Projekt bei einem Cloud-Anbieter (z. B. Gatsby, Netlify, Vercel) erstellen, ist es am besten, die Schlüssel mit Umgebungsvariablen zu versehen:

Schlüssel	Wert (Beispiel)
GHOST_API_URL	http://localhost:2368
GHOST_CONTENT_API_KEY	9fccdb0e4ea5b572e2e5b92942

Der Ort, an dem Sie sie definieren können, hängt vom Anbieter ab, aber normalerweise finden Sie die Option unter den Site-Einstellungen. Dies vermeidet die Veröffentlichung von Schlüsseln in einem öffentlichen Repository und ist am sichersten.

Bauen vor Ort

Wenn Sie lokal oder in einem privaten Netzwerk bauen, in dem das Build-Verzeichnis für die Welt nicht zugänglich ist, können Sie sicher eine neue .ghost.json Datei in Ihrem Basisverzeichnis mit der folgenden JSON-Struktur hinzufügen:

    {
        " development " : {
            " apiUrl " : " http://localhost:2368 " ,
            " contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
        },
        " production " : {
            " apiUrl " : " http://localhost:2368 " ,
            " contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
        }
    }

Diese Datei ist Teil von .gitignore um eine versehentliche Veröffentlichung in Ihrem öffentlichen Repository zu vermeiden. Ändern Sie apiUrl und contentApiKey so, dass sie mit Ihren eigenen Ghost CMS Content API-Schlüsseln übereinstimmen.

? Stellen Sie den Headless-Modus von Ghost CMS sicher

Für optimale SEO-Ergebnisse wird dringend empfohlen, das Standard-Frontend des Ghost-Lenker-Designs zu deaktivieren, indem Sie in Ihren Ghost-Administratoreinstellungen die Markierung „Diese Website privat machen “ auswählen. Dies aktiviert den Passwortschutz vor der Ghost-Installation und legt <meta name="robots" content="noindex" /> fest, sodass Ihr Gatsby-Frontend zur maßgeblichen Quelle für Suchmaschinen wird.

? Einsetzen

? Aktualisieren

Es wird empfohlen, npm-upgrade mit sudo npm install npm-upgrade -g zu installieren. Wechseln Sie in das Basisverzeichnis und aktualisieren Sie alle Pakete mit: