gatsby template
1.0.0
Beginnen Sie Ihr Projekt mit dieser Vorlage. Dieser Launcher enthält die wichtigsten Gatsby-Dateien und -Einstellungen, die Sie möglicherweise benötigen, um mit dem blitzschnellen App-Generator für React mit Höchstgeschwindigkeit loszulegen.
Erstellen Sie eine Gatsby-Website.
Verwenden Sie die Gatsby-CLI, um eine neue Site zu erstellen, und geben Sie dabei diese Vorlage an.
# Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-templateBeginnen Sie mit der Entwicklung.
Navigieren Sie zum Verzeichnis Ihrer neuen Site und starten Sie sie.
cd my-project/
gatsby developÖffnen Sie den Code und beginnen Sie mit der Bearbeitung!
Ihre Site läuft jetzt unter http://localhost:8000 !
Hinweis: Sie sehen auch einen zweiten Link: http://localhost:8000/___graphql . Dies ist ein Tool, mit dem Sie mit der Abfrage Ihrer Daten experimentieren können. Erfahren Sie mehr über die Verwendung dieses Tools im [Gatsby-Tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).
Öffnen Sie das Verzeichnis my-project in Ihrem Code-Editor Ihrer Wahl und bearbeiten Sie src/pages/index.js . Speichern Sie Ihre Änderungen und der Browser wird in Echtzeit aktualisiert!
Progressive Web App ist ein Begriff, der eine neue Softwareentwicklungsmethodik bezeichnet. Im Gegensatz zu herkömmlichen Apps kann eine Progressive Web App als hybride Weiterentwicklung zwischen regulären Webseiten und einer mobilen App betrachtet werden.
Das vom Manifest-Plugin unterstützte Web-App-Manifest (Teil der PWA-Spezifikation) ermöglicht es Benutzern, Ihre Website in den meisten mobilen Browsern zum Startbildschirm hinzuzufügen – siehe hier. Das Manifest stellt Konfigurationen und Symbole für das Telefon bereit.
Dieses Plugin bietet zusätzlich zur Manifestkonfiguration mehrere Funktionen, die Ihnen das Leben erleichtern:
Für jede dieser Funktionen stehen umfangreiche Konfigurationsmöglichkeiten zur Verfügung, sodass Sie immer die Kontrolle behalten.
Wo kann man nach diesen Plugins suchen? Klicken Sie hier und suchen Sie
Ein kurzer Blick auf die Dateien und Verzeichnisse der obersten Ebene, die Sie in dieser Gatsby-Vorlage sehen.
.
├── node_modules
├── config/
│ └── MetaData.js
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── logo.png
│ ├── components/
│ ├── Pages/
| │ └── index.js
│ ├── posts/
| │ └── 2020-04-08--nosso-primeiro-post/
| │ └── index.md
│ ├── styles/
│ | ├── themes/
│ | └── GlobalStyles.js
│ ├── templates/
│ | ├── post.js
│ | └── tag.js
│ └── html.js
├── static/
│ ├── favicon.ico
│ └── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
| Dateien/Ordner | Beschreibung |
|---|---|
| /node_modules | Dieses Verzeichnis enthält alle Codemodule, von denen Ihr Projekt abhängt (npm-Pakete), die automatisch installiert werden. |
| /src | Dieses Verzeichnis enthält den gesamten Code, der sich auf das bezieht, was Sie im Frontend Ihrer Website sehen (was Sie im Browser sehen), beispielsweise den Website-Header oder eine Seitenvorlage. src ist eine Konvention für „Quellcode“. |
| .gitignore | Diese Datei teilt Git mit, welche Dateien es nicht verfolgen/keinen Versionsverlauf führen soll. |
| .prettierrc | Dies ist eine Konfigurationsdatei für Prettier. Prettier ist ein Tool, das Ihnen dabei hilft, die Formatierung Ihres Codes konsistent zu halten. |
| * gatsby-browser.js | In dieser Datei erwartet Gatsby eine Verwendung der Gatsby-Browser-APIs (falls vorhanden). Dies ermöglicht die Anpassung/Erweiterung der Standard-Gatsby-Einstellungen, die sich auf den Browser auswirken. |
| gatsby-config.js | Dies ist die Hauptkonfigurationsdatei für eine Gatsby-Website. Hier können Sie Informationen zu Ihrer Website (Metadaten) angeben, z. B. den Titel und die Beschreibung Ihrer Website, welche Gatsby-Plugins Sie einbinden möchten usw. (Weitere Informationen finden Sie in den Konfigurationsdokumenten.) |
| gatsby-node.js | In dieser Datei erwartet Gatsby jegliche Verwendung der Gatsby-Knoten-APIs (falls vorhanden). Dies ermöglicht die Anpassung/Erweiterung der Standardeinstellungen von Gatsby, die sich auf Teile des Site-Erstellungsprozesses auswirken. |
| gatsby-ssr.js | In dieser Datei erwartet Gatsby eine Verwendung der Gatsby-Server-Rendering-APIs (falls vorhanden). Dies ermöglicht die Anpassung der Standard-Gatsby-Einstellungen, die sich auf das serverseitige Rendering auswirken. |
| LIZENZ | Gatsby ist unter der MIT-Lizenz lizenziert |
| package-lock.json | (siehe zuerst package.json unten). Dies ist eine automatisch generierte Datei, die auf den genauen Versionen der NPM-Abhängigkeiten basiert, die für Ihr Projekt installiert wurden. (Sie ändern diese Datei nicht direkt). |
| package.json | Eine Manifestdatei für Node.js-Projekte, die Dinge wie Metadaten (Projektname, Autor usw.) enthält. Anhand dieses Manifests weiß npm, welche Pakete für Ihr Projekt installiert werden müssen. |
| README.md | Eine Textdatei mit nützlichen Referenzinformationen zu Ihrem Projekt. |
| **** |
Suchen Sie weitere Anleitung? Die vollständige Gatsby-Dokumentation finden Sie [auf der Website] (https://www.gatsbyjs.org/). Hier sind einige Orte, an denen Sie beginnen können:
Den meisten Entwicklern empfehle ich, mit unserem [ausführlichen Tutorial zum Erstellen einer Website mit Gatsby] (https://www.gatsbyjs.org/tutorial/) zu beginnen. Es beginnt mit keinerlei Annahmen über Ihr Leistungsniveau und durchläuft jeden Schritt des Prozesses.
Um direkt in die Codebeispiele einzutauchen, besuchen Sie die [Dokumentation] (https://www.gatsbyjs.org/docs/). Sehen Sie sich insbesondere die Abschnitte „Anleitungen“ , „API-Referenz“ und „Erweiterte Tutorials“ in der Seitenleiste an.
