devblog
1.0.0
DevBlog ist eine vollständig anpassbare Blog-Vorlage, die für Entwickler (oder alle anderen) entwickelt wurde, die mit dem Bloggen beginnen möchten. Es ist sofort einsatzbereit (einfach) und kann nach Belieben bearbeitet und erweitert werden. Der Blog wird vollständig statisch über GatsbyJS generiert, verfügt standardmäßig über Syntaxhervorhebung (über PrismJS) und verfügt unter anderem über integriertes serverseitiges Rendering.
Um eine Live-Demo anzusehen, klicken Sie hier.
config.js Datei Der erste Schritt besteht darin, die GatsbyJS-CLI lokal zu installieren. Dies kann durch Ausführen des Befehls npm install --global gatsby-cli erreicht werden
Wenn Sie eine neue Gatsby-Site erstellen, können Sie über die CLI einen Starter angeben. Geben Sie in diesem Fall einfach die URL für dieses Repo an. Dies kann durch Ausführen des Befehls gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog erreicht werden
Nachdem Sie nun eingerichtet sind, können Sie einfach den Blog verwenden oder nach Bedarf Änderungen vornehmen. Führen Sie beispielsweise gatsby develop aus, um eine im laufenden Betrieb neu geladene Entwicklungsumgebung zu starten, die unter „localhost:8000“ verfügbar ist, oder führen Sie gatsby build aus, um einen optimierten Produktions-Build zu erstellen. Eine vollständige Liste der CLI-Befehle für Gatsby finden Sie in der Dokumentation.
Alternativ, wenn Sie dieses Repo einfach forken oder klonen möchten, müssen Sie einfach npm install und anschließend gatsby develop ausführen, und schon kann es losgehen.
Die Grundkonfiguration kann über die Datei config.js im Stammverzeichnis des Projekt-Repositorys erfolgen. Über diese Datei können Sie Änderungen an der Primärfarbe des Blogs vornehmen, einen Blog-Autor und eine Beschreibung hinzufügen und vieles mehr. Die Standardeinstellungen lauten wie folgt:
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;Hinweis: Jede als „Erforderlich“ gekennzeichnete Konfigurationsoption wird für grundlegende Präsentationszwecke benötigt. Alles ohne den Kommentar „Erforderlich“ kann entfernt werden, wenn Sie es nicht verwenden möchten.
Die oben genannten Konfigurationsvariablen werden wie folgt verwendet:
| Variable | Beschreibung der Verwendung |
|---|---|
| Titel | Der Titel des Blogs. Dies wird hauptsächlich für den Seitentitel verwendet. |
| Autor | Der Autor des Blogs. Dies wird für den Kopfzeilennamen und den Seitentitel verwendet. |
| Beschreibung | Die Beschreibung des Autors. Dies wird für die Kopfzeile unter dem Autor verwendet. |
| Primärfarbe | Die Primärfarbe des Blogs. |
| showHeaderImage | Flag, ob das Headerbild angezeigt werden soll oder nicht. |
| showShareButtons | Markieren Sie, ob in jedem Blog-Beitrag Schaltflächen zum Teilen in sozialen Medien angezeigt werden sollen oder nicht. |
| BeiträgePerSeite | Die Anzahl der Beiträge pro Seite auf der Blog-Startseite. Dies wird für die Paginierung verwendet. |
| sozial | Social-Media-Profile des Blog-Autors. Derzeit werden nur persönliche Websites, GitHub, Twitter und LinkedIn unterstützt. |
Um das Standard-Header-Bild zu ändern, überschreiben Sie einfach die Datei main.jpg im Ordner /src .
Um das Standard-Favicon zu ändern, überschreiben Sie einfach die Datei favicon.ico im Ordner /src .
Alle Blogbeiträge sind in /src/pages zu finden und werden statisch erstellt, sobald der Befehl gatsby build ausgeführt wird. Um einen neuen Beitrag zu erstellen, erstellen Sie einfach einen neuen Ordner in /src/pages mit dem Namen der URL, die Sie haben möchten. Wenn Sie beispielsweise möchten, dass die URL als myblog.com/hello-world angezeigt wird, erstellen Sie den Ordner als hello-world . Sobald der Ordner erstellt ist, erstellen Sie darin einfach eine index.md Datei.
Am oberen Rand der Seiten müssen alle denselben Markdown enthalten, der Gatsby die benötigten Informationen zu dem jeweiligen Beitrag mitteilt. Die Grundvorlage ist:
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end --> Im obigen Codeausschnitt sind lediglich der Titel und das Datum erforderlich. Das vorgestellte Bild ist optional und kann hinzugefügt werden, indem Sie einfach ein Bild zum gerade erstellten Seitenordner hinzufügen und wie im obigen Beispiel darauf verweisen. Der Auszugsteil ist ebenfalls optional und wenn Sie die Markierung <!-- end --> nicht verwenden, wird das erste Bit des Beitrags automatisch als Auszug verwendet.
Diese Vorlage enthält drei Beispiele für Blogbeiträge, die alles von der Verwendung von Code-Snippets über das Einfügen von Bildern bis hin zur Verwendung hervorgehobener Bilder und Auszüge und mehr enthalten.
Sobald Sie bereit sind, das Blog bereitzustellen und live zu schalten, stehen Ihnen mehrere Optionen zur Verfügung.
Für die manuelle Bereitstellung des Blogs müssen Sie lediglich einen gatsby build ausführen, um einen Produktions-Build zu erstellen. Danach können Sie jeden Server verwenden, auf dem Sie normalerweise eine React-App verwenden, z. B. ein Digital Ocean Droplet oder eine AWS-Instanz. Es ist lediglich eine Möglichkeit erforderlich, die statischen Dateien bereitzustellen.
Wenn Sie mit der Bereitstellung von React-Anwendungen nicht vertraut sind, gibt es eine Reihe anderer Optionen.
Um die Bereitstellung auf GitHub-Seiten durchzuführen, müssen Sie zunächst Ihr Pfadpräfix in gatsby-config.js festlegen. Der Standardwert ist pathPrefix: '/devblog' Dies sollte jedoch in den von Ihnen gewählten Repo-Namen geändert werden. Wenn sich Ihr Blog beispielsweise unter https://github.com/YOURUSERNAME/myblog befindet und Sie möchten, dass es unter https://YOURUSERNAME.github.io/myblog bereitgestellt wird, legen Sie das Pfadpräfix auf pathPrefix: '/myblog' fest pathPrefix: '/myblog' .
Als nächstes führen Sie einfach npm run deploy aus und Ihr Blog wird bereitgestellt.
Wenn Sie es alternativ auf https://YOURUSERNAME.github.io (d. h. auf Ihrer Benutzer-/Organisationsseite und nicht auf einer Projektseite) bereitstellen möchten, sind einige zusätzliche Änderungen erforderlich. In der offiziellen Gatsby-Dokumentation sind sie hier gut beschrieben.
Eine der einfachsten Methoden zur Bereitstellung des Blogs wäre die Verwendung von Netlify. Um die Bereitstellung auf Netlify durchzuführen, klicken Sie einfach auf die Schaltfläche unten und befolgen Sie die Anweisungen.
Die oben beschriebenen Optionen sind nicht die einzigen Optionen, die Ihnen zum Bereitstellen des Blogs zur Verfügung stehen. Die offizielle Gatsby-Dokumentation geht ausführlich auf eine Reihe weiterer Optionen ein. Um mehr über Bereitstellungsoptionen zu erfahren, klicken Sie hier.
Lizenziert unter MIT-Lizenz. Weitere Informationen finden Sie unter LICENSE.md.
