create static site Download - create static site Quellcode herunterladen

create static site

Andere Kategorien

1.0.0

Herunterladen

Erstellen Sie eine statische Site

Erstellen Sie statische Websites ohne Build-Konfiguration.

Überblick

 npx create-static-site my-site --template hugo
cd my-site
npm start

(npx wird mit npm 5.2+ und höher geliefert)

Öffnen Sie dann http://localhost:3000/, um Ihre App anzuzeigen.

Erstellen einer statischen Site

Auf Ihrem lokalen Entwicklungscomputer muss Knoten >= 6 vorhanden sein . Sie können nvm (macOS/Linux) oder nvm-windows verwenden, um problemlos Node-Versionen zwischen verschiedenen Projekten zu wechseln.

Um eine neue App zu erstellen, führen Sie Folgendes aus:

npx create-static-site my-site --template [template]

Ersetzen Sie [template] entweder durch hugo oder jekyll .

Es wird ein Verzeichnis namens my-site im aktuellen Ordner erstellt.
In diesem Verzeichnis wird die anfängliche Projektstruktur generiert und die transitiven Abhängigkeiten installiert:

 my-site
├── LICENSE
├── node_modules
├── package.json
├── README.md
├── static-scripts.config.js
├── .browserslistrc
├── .eslintrc.yml
├── .gitignore
├── .postcssrc.js
├── .stylelintrc.yml
├── site/ # Depends on the static site generator
└── src/
    ├── css/
    │   ├── styles.css
    │   └── imports
    │       └── resets.css
    ├── img/
    │   └── svg/
    │       ├── bitbucket.svg
    │       ├── github.svg
    │       └── gitlab.svg
    └── js/
        ├── scripts.js
        └── imports/
            └── index.js

Keine Konfiguration oder komplizierte Ordnerstrukturen, nur die Dateien, die Sie zum Erstellen Ihrer Site benötigen.
Sobald die Installation abgeschlossen ist, können Sie Ihren Projektordner öffnen:

 cd my-site

Innerhalb des neu erstellten Projekts können Sie einige integrierte Befehle ausführen:

`npm start` oder `yarn start`

Jekyll-Benutzer müssen zuerst bundle install ausführen

Führt die App im Entwicklungsmodus aus.
Öffnen Sie http://localhost:3000, um es im Browser anzuzeigen.

Die Seite wird automatisch neu geladen, wenn Sie Änderungen am Code vornehmen.

`npm build` oder `yarn build`

Erstellt die Site für die Produktion im dist -Ordner.

Philosophie

Eine Abhängigkeit: Es gibt nur eine Build-Abhängigkeit. Es verwendet Webpack, Babel, ESLint, PostCSS und andere erstaunliche Projekte, bietet darüber hinaus aber ein zusammenhängendes kuratiertes Erlebnis.
Keine Konfiguration erforderlich: Sie müssen nichts konfigurieren. Die einigermaßen gute Konfiguration von Entwicklungs- und Produktions-Builds wird für Sie übernommen, sodass Sie sich auf das Schreiben von Code konzentrieren können.
Kein Lock-In: Sie können jederzeit zu einem benutzerdefinierten Setup wechseln. Führen Sie einen einzigen Befehl aus und alle Konfigurations- und Build-Abhängigkeiten werden direkt in Ihr Projekt verschoben, sodass Sie genau dort weitermachen können, wo Sie aufgehört haben.

Was ist enthalten?

Ihre Umgebung verfügt über alles, was Sie zum Erstellen einer modernen statischen Website benötigen:

Ein statischer Site-Generator (Jekyll oder Hugo)
Sprachextras über ES6 hinaus, wie z. B. der Objektverbreitungsoperator.
CSS mit automatischem Präfix
Problemlose Updates für die oben genannten Tools mit einer einzigen Abhängigkeit.

Der Nachteil besteht darin, dass diese Tools so vorkonfiguriert sind, dass sie auf eine bestimmte Art und Weise funktionieren . Wenn Ihr Projekt weitere Anpassungen erfordert, können Sie es „auswerfen“ und anpassen, müssen dann aber diese Konfiguration beibehalten.

Statische Websites

Statische Websites sind Websites, die mit statischen, unveränderlichen Dateien erstellt werden. Da der Inhalt statisch ist, erfordert die Bereitstellung an Benutzer keine Serververarbeitungszeit. Diese Funktion macht statische Websites unglaublich schnell und leistungsstark.

Statische Site-Generatoren sind die moderne Art, statische Sites zu erstellen. Sie konvertieren einfache, textbasierte Inhaltsdateien in statische Dateien, die für das Web bereit sind.

Sie eignen sich hervorragend für Entwickler, da sie extrem schnell sind, auf Versionskontrolle ausgelegt sind und im Vergleich zu bestehenden monolithischen CMS-Lösungen wie Wordpress nur wenig bis gar keine Einrichtung erfordern.

Derzeit unterstützt create-static-site zwei statische Site-Generatoren:

Jekyll ist der in Ruby geschriebene statische Site-Generator, der vom GitHub-Gründer Tom Preston Werner erstellt wurde.
Hugo ist der in GoLang geschriebene und von Steve Francia erstellte statische Site-Generator.

Mitwirken

Wir würden uns über Ihre helfende Hand bei create-static-site freuen! Weitere Informationen darüber, wonach wir suchen und wie Sie beginnen können, finden Sie unter CONTRIBUTING.md.