wodle

Wodle

Wodle ist ein statischer Site-Generator, der neue Frameworks und Tools für die moderne Webentwicklung verwendet. Es basiert auf Next.js und Tachyons. Und Sie können die generierte statische Website ganz einfach in eine vollständig dynamische Website umwandeln.

Warum?

Da NextJS und funktionales CSS den Einstieg in ein Blog oder eine statische Seite sehr einfach machen, ist es ein guter Ausgangspunkt für Blogger und Entwickler, die diese Technologien erlernen möchten.

Installation

Sie können Wodle über npm installieren:

 npm install -g wodle

Erste Schritte

Sobald Wodle installiert ist, können Sie den Befehl wodle verwenden. Um eine neue Site zu erstellen, können Sie Folgendes ausführen:

 wodle myBlog

Dadurch wird eine neue Site namens myBlog in demselben Verzeichnis generiert, in dem Sie den Befehl ausgeführt haben

Um mit Ihrer neuen Site zu beginnen, müssen Sie sie nur per CD aufrufen und dann die Abhängigkeiten installieren:

 cd myBlog
yarn

Dadurch werden alle Abhängigkeiten abgerufen. Sobald das fertig ist, können Sie einen Server starten, der Folgendes ausführt:

 yarn dev

Und gehen Sie zu localhost:3000/ . Sie sollten eine Site wie diese sehen:

Dieser Server hört auf Änderungen in Ihrer App und lädt den Browser neu.

Wenn Sie Ihre Website ohne Hot-Reloading betreiben möchten, können Sie Folgendes ausführen:

 yarn start

Erstellen Sie Ihre Website

Um Ihre Website zu erstellen, können Sie Folgendes ausführen:

 yarn build

Dadurch wird ein out/ -Ordner mit Ihrer statischen Site generiert, die zur Veröffentlichung bereit ist.

Wie funktioniert es?

Ihre Site verfügt über verschiedene Ordner:

Seitenordner

Dieser Ordner enthält Ihre Seitendateien und ihre Namen stimmen mit ihren Routen überein. Wenn Sie also eine neue Seite in /new-page hinzufügen möchten, müssen Sie in diesem Ordner eine neue Komponente mit dem Namen new-page.js hinzufügen. Für erweitertes Routing klicken Sie hier.

Das Gerüst wird mit einigen vorgefertigten Seitenkomponenten im components geliefert.

Komponentenordner

In diesem Ordner finden Sie alle vorgefertigten Komponenten auf der Website. Die Kernkomponenten dieser Gerüst-App sind:

• Seitenleiste

Eine Seitenleistenkomponente, die Elemente abruft und ein Nav mit ihren NavItems rendert. Der Inhalt dieser Komponente befindet sich in content/sideBarOptions.js

• Hauptsächlich

Diese Komponente umschließt einfach alles, was Sie im Hauptbereich (der Mitte der Site) anzeigen möchten.

• Hauptartikel

Diese Komponente rendert den Hauptartikel, wie Sie ihn im Index und in jedem einzelnen Artikel sehen. Eine Demo des Inhalts, der von dieser Komponente verarbeitet werden kann, finden Sie unter content/mainArticle .

• Artikelliste

Diese Komponente rendert eine Liste von Artikeln, wie Sie sie auf jeder einzelnen Seite im Seitenleistenmenü sehen können. Sie können die Listen unter content/ in den Dateien <something>Articles.js sehen

unter anderem

Styles-Ordner

Ihr Styles-Ordner ist für Ihr gesamtes CSS (derzeit dank funktionalem CSS und Tachyonen fast leer).

Erweiterung der Site

Sie können weiterhin Seiten löschen (Dateien aus dem pages entfernen), weitere Seiten, Artikel und Optionen hinzufügen, indem Sie den Mustern auf dem Gerüst folgen, oder einfach alles nach Ihren Wünschen ändern! Auf der Next.js-Website und bei Tachyons können Sie tolle Anleitungen lesen, um Ihre fantastische Website oder Ihren Blog zu erstellen!

Basierend auf früherer Kunst chibicode.com und jspg