nextjs blog theme

Ein anpassbarer Blog -Starter mit:

• Weiter.js v15 (Seiten Router)
• Rückenwind v3.x
• Netlify Visual Editor
• Eingebaute MDX-Unterstützung
• Beinhaltet ein modernes Design mit dunklen und hellen Themen

Nehmen Sie einen Blick auf die Demo.

Klicken Sie hier, um die Vorlage zu sehen!

Inhaltsverzeichnis:

• Erste Schritte
  • Lokal einrichten
  • Verwenden des Assistenten
• Konfigurieren des Blogs
• Hinzufügen neuer Beiträge
• Netlify Visual Editor
• Testen
  • Eingeschlossene Standardtests
  • Renovat entfernen

Erste Schritte

---

Sie können mit diesem Projekt auf zwei Arten beginnen: lokal oder mit dem Setup -Assistenten.

Lokal einrichten

Wenn Sie es lokal ausführen, klicken Sie mit der Schaltfläche mit dieser Vorlage auf GitHub. Dadurch wird ein neues Repository mit den Dateien dieser Vorlage in Ihrem GitHub -Konto erstellt. Sobald dies erledigt ist, klonen Sie Ihr neues Repository und navigieren Sie in Ihrem Terminal dazu.

Von dort aus können Sie die Abhängigkeiten des Projekts durch Ausführen installieren:

yarn install

Schließlich können Sie Ihr Projekt vor Ort ausführen mit:

yarn run dev

Öffnen Sie Ihren Browser und besuchen Sie http: // localhost: 3000, Ihr Projekt sollte ausgeführt werden!

Verwenden des Setup -Assistenten

Über den Setup -Assistenten können Sie Ihr Blog in einigen Klicks erstellen und für Netlify bereitstellen.

Konfigurieren des Blogs

Die Konfiguration basiert auf Umgebungsvariablen, um die Integration in jede Jamstack -Plattform wie Netlify einfach zu integrieren.

Hier sind die Variablen, die Sie bearbeiten können:

Variable	Beschreibung	Optionen
BLOG_NAME	Der Name Ihres Blogs, der unter dem Avatar angezeigt wird
BLOG_TITLE	Der Hauptkopf ( h1 ) auf der Startseite
BLOG_FOOTER_TEXT	der Text im Fußzeile
BLOG_THEME	das Thema zum Rückenwind übergeben	Standard
BLOG_FONT_HEADINGS	Die Schriftfamilie für alle HTML-Überschriften von h1 bis h6	Sans-Serif (Standard), Serife, Monospace
BLOG_FONT_PARAGRAPHS	die Schriftfamilie für alle anderen HTML-Elemente	Sans-Serif (Standard), Serife, Monospace

Alle Env -Variablen können über den Assistenten oder durch Festlegen der Umgebungsvariablen des Projekts konfiguriert werden. Sie können dies in Ihrem Netlify DasbeAboard (Site -Einstellungen/Build & Bereitstellen/Umgebungsvariablen) tun.

Bejamas_env-vars_short.mp4

[ALT: Video -Walkthrough der Bearbeitung von Env Vars]

Wenn das Festlegen einer Umgebungsvariablen nicht Ihre Tasse Tee ist, können die Standardeinstellungen in utils/global-data.js geändert werden. Sie können auch die Variablen und Hard -Code -Blog -Informationen entfernen, in denen diese Variablen in der Codebasis verwendet werden.

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS werden in tailwind-preset.js verwendet
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT werden in pages/index.js & pages/posts/[slug].js über das globalData -Objekt verwendet.

Hinzufügen neuer Beiträge

Alle Beiträge werden im Verzeichnis /posts gespeichert. Um einen neuen Beitrag zu erstellen, erstellen Sie eine neue Datei mit der .mdx -Erweiterung.

Da die Beiträge im MDX -Format geschrieben sind, können Sie Requisiten und Komponenten übergeben. Das heißt, Sie können React -Komponenten in Ihren Beiträgen verwenden, um sie interaktiver zu gestalten. Erfahren Sie mehr darüber, wie dies in den MDX -Dokumenten zu Inhalten ist.

NEXTJS-bejamas-Blog_New-post.mp4

[ALT: Video -Walkthrough des Hinzufügens eines neuen Blog -Beitrags]

Netlify Visual Editor

Diese Vorlage ist so konfiguriert, dass sie mit visueller Bearbeitung und Git -Inhaltsquelle funktioniert.

Entwickeln Sie mit Netlify Visual Editor lokal

Der typische Entwicklungsprozess soll mit der lokalen Arbeit beginnen. Klonen Sie dieses Repository und führen Sie npm install in seinem Root -Verzeichnis aus.

Führen Sie den nächsten.js -Entwicklungsserver aus:

cd nextjs-blog-theme
npm run dev

Installieren Sie die Netlify Visual Editor CLI. Öffnen Sie dann ein neues Terminalfenster im selben Projektverzeichnis und führen Sie den Netlify Visual Editor Dev Server aus:

npm install -g @stackbit/cli
stackbit dev

Dies gibt Ihre eigene Netlify -URL zum visuellen Editor aus. Öffnen Sie dies, registrieren Sie sich oder melden Sie sich an und Sie werden für Ihr neues Projekt an den visuellen Editor von Netlify angewiesen.

Nächste Schritte

Hier sind einige Vorschläge, was Sie als nächstes tun sollen, wenn Sie neu sind, um Netlify Visual Editor zu erhalten:

• Netlify Visual Editor Übersicht lernen
• Überprüfen Sie die Netlify Visual Editor Referenzdokumentation

Testen

Eingeschlossene Standardtests

Wir haben einige Werkzeuge beigefügt, mit denen wir diese Vorlagen beibehalten können. Diese Vorlage verwendet derzeit:

• Renovieren - regelmäßig unsere Abhängigkeiten aktualisieren

Wenn Ihr Team nicht an diesem Werkzeug interessiert ist, können Sie sie mühelos entfernen!

Renovat entfernen

Um unser Projekt mit Abhängigkeiten auf dem neuesten Stand zu halten, verwenden wir ein Tool namens Renovate. Wenn Sie nicht an diesem Tooling interessiert sind, löschen Sie die Datei renovate.json und verpflichten Sie sie in Ihrer Hauptzweig.

Unterstützung

Wenn Sie auf dem Weg stecken bleiben, erhalten Sie Hilfe in unseren Support -Foren.