Ein persönliches Portfolio und ein Blog, das mit dem Gatsbyjs -Framework erstellt wurde, um eine statische Reaktionswebsite zu generieren. Es ist blitzschnell, SEO und PWA -freundlich und bereitet direkt zu einem CDN -wie GitHub -Seiten oder Netlify ein.
Dies ist eine JavaScript -Alternative zu den statischen Site -Generator -Lösungen, die in Go oder Ruby geschrieben wurden. Es ist auch ausgegrenzter als der Gatsby Starter -Blog mit Funktionen wie Blog -Archiven, Bildhandling, SEO -Optimierung und einigen mehr.
---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---
Your post here
blog
oder project
sein.Kopieren Sie den Einbettungscode und entfernen Sie das JS -Skript, das importiert wird.
Tweets nahtlos in Beiträge einbetten, indem Sie den Blockquote -Teil des Einbettungscodes in Ihre Markdown -Datei kopieren. Kopieren Sie die verknüpfte JS -Datei nicht, das Plugin verarbeitet dies automatisch.
Konfigurieren Sie in gatsby-config.js
.
Konfigurieren Sie in gatsby-config.js
.
Läuft auf Gatsbyjs, einer SSG, die statische Reaktionen erstellt.
npm install
npm run develop
Wir erstellen die Dateien lokal und stellen dann ein NPM-Skript bereit, das eine bestimmte GIT-Repo-Filiale namens gh-pages
aktualisiert.
Um dies zu aktivieren, initiieren Sie einfach ein Git -Repo im Projekt, verpflichten Sie Ihre Änderungen und fügen Sie Ihr Github -Repo als Remote -Repo hinzu. Stellen Sie sicher, dass Sie die Fernbedienung als origin
kennzeichnen. Andernfalls weiß der Gatsby -Berg nicht, auf welches Repo er drücken soll.
Site für origin
Remote Repo bereitstellen:
npm run deploy
git pull
aus abgelegenen Herkunft, um sicherzustellen, dass Sie über die neuesten Beiträge verfügen und Konflikte zusammenführen.src/content/projects
oder src/content/blog
das nach Ihrem Beitrag benannt ist, einen neuen Ordner hinzu. Dies wird in die Schnecke des Artikels umgewandelt-Sie müssen Ihren Titel nicht 'Kebab-Case' ', sondern das Format im Auge halten.<img src="./my-image.jpg" />
.npm run deploy
im Projektroot aus, um auf GitHub -Seiten bereitzustellen. Diese Website ist auch in der Lage, auf Netlify bereitzustellen. Melden Sie sich einfach bei Netlify an, erstellen Sie eine neue App und verweisen Sie auf dieses Repository. Befolgen Sie die Schritte, stellen Sie sicher, dass Netlify gatsby build
betreibt und auf das /public
Verzeichnis hinweist. Auf diese Weise können Sie auch das Netlify-CMS verwenden, da ein Server für die Unterstützung und das Hosting von OAuth2 auf Netlify erforderlich ist, um jede Bearbeitung neu aufzubauen (anstatt von Ihrem persönlichen Computer und bereitzustellen und von dort aus bereitzustellen).