staticfy
1.0.0
Grundlegendes Starterkit für statische Websites basierend auf Gatsby.js.
Beginnen Sie mit der Entwicklung.
Navigieren Sie in das Verzeichnis Ihrer neuen Site und starten Sie sie.
cd my-site/
gatsby developÖffnen Sie den Quellcode 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.
Öffnen Sie das Verzeichnis my-site im Code-Editor Ihrer Wahl und bearbeiten Sie src/pages/index.js . Speichern Sie Ihre Änderungen und der Browser wird in Echtzeit aktualisiert!
Ein kurzer Blick auf die Dateien und Verzeichnisse der obersten Ebene, die Sie in einem Gatsby-Projekt sehen.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock
/node_modules : Dieses Verzeichnis enthält alle Codemodule, von denen Ihr Projekt abhängt (npm-Pakete) werden automatisch installiert.
/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), wie z. B. Ihren 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 verwalten soll.
.prettierrc : Dies ist eine Konfigurationsdatei für Prettier. Prettier ist ein Tool, mit dem Sie die Formatierung Ihres Codes konsistent halten können.
gatsby-browser.js : In dieser Datei erwartet Gatsby jegliche Verwendung der Gatsby-Browser-APIs (falls vorhanden). Diese ermöglichen die Anpassung/Erweiterung der Standard-Gatsby-Einstellungen, die sich auf den Browser auswirken.
gatsby-config.js : Dies ist die Hauptkonfigurationsdatei für eine Gatsby-Site. Hier können Sie Informationen zu Ihrer Site (Metadaten) angeben, wie den Site-Titel und die Beschreibung, 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 Node APIs (falls vorhanden). Diese ermöglichen die Anpassung/Erweiterung der Standardeinstellungen von Gatsby, die sich auf Teile des Website-Erstellungsprozesses auswirken.
gatsby-ssr.js : In dieser Datei erwartet Gatsby jegliche Verwendung der serverseitigen Rendering-APIs von Gatsby (falls vorhanden). Diese ermöglichen die Anpassung der Standard-Gatsby-Einstellungen, die sich auf das serverseitige Rendering auswirken.
LICENSE : 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 Ihrer npm-Abhängigkeiten basiert, die für Ihr Projekt installiert wurden. (Sie werden diese Datei nicht direkt ändern).
package.json : Eine Manifestdatei für Node.js-Projekte, die Dinge wie Metadaten (Name des Projekts, 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.
yarn.lock : Yarn ist eine Paketmanager-Alternative zu npm. Sie können entweder Yarn oder NPM verwenden, obwohl alle Gatsby-Dokumente auf NPM verweisen. Diese Datei dient im Wesentlichen demselben Zweck wie package-lock.json , nur für ein anderes Paketverwaltungssystem.
Für die Bereitstellung können Sie Gitlab CI verwenden. Im Projekt befinden sich zwei Dateien – Beispiel .gitlab-ci.yml und für S3-Bereitstellung .gitlab-ci-s3.yml .
