teeny

Teeny: Ein einfacher statischer Site -Generator

Euen Haftungsausschluss: Dies ist ein Tool, das ich in ein paar Stunden gebaut habe, um mein persönliches Blog Yakkomajuri.github.io zu generieren. Es tut momentan nicht viel und werden es wahrscheinlich nie.

? Schneller Start

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

Für ein Beispiel für ein Projekt mit Teeny finden Sie das Repo meines persönlichen Blogs.

Hintergrundgeschichte

Sie können über meine Motivation zum Aufbau von Teeny in diesem Blog -Beitrag mit dem Titel "Warum ich meinen eigenen statischen Site -Generator erstellt" lesen.

Unterstützte Befehle

Initialisieren Sie ein Teeny -Projekt im aktuellen Verzeichnis

teeny init

Erstellen Sie die statischen HTML -Dateien und fügen Sie sie der public/

teeny build

Starten Sie einen lokalen Teeny -Server, der auf Dateiänderungen hört

teeny develop

? Wie es funktioniert

Teeny ist ein super einfacher statischer Site -Generator, der meinen Bedürfnissen und meinen Bedürfnissen entspricht.

Alles, was es tut, ist, Seiten basierend auf HTML -Vorlagen und Markdown -Inhalten zu generieren.

Es tut sehr wenig und ist stark übereinstimmend ( lesen Sie: Ich war zu faul, um Anpassungen/bedingte Handler aufzubauen ), aber ich habe es mir erlaubt, einen Blog zu erstellen, mit dem ich sehr schnell zufrieden bin.

Im Wesentlichen gibt es wirklich nur 2 Konzepte, über die Sie nachdenken müssen: Vorlagen und Seiten.

Vorlagen

Vorlagen sind einfach HTML und sollten zu einer templates/ einem Unterverzeichnis hinzugefügt werden.

Sie können ein Element mit der ID page-content enthalten, in der Teeny das HTML hinzugefügt hat, das durch Parsen des Markdown-Inhalts erzeugt wird.

Seiten

Markdown ist ein erstklassiger Bürger in Teeny, daher werden alle Seiten Ihrer Website durch eine Markdown-Datei definiert.

Die Datei muss jedoch keinen tatsächlichen Inhalt haben. Wenn also eine Seite nur in HTML definiert werden soll, müssen Sie nur eine Vorlage erstellen, auf die aus einer Datei verwiesen wird.

Um anzugeben, welche Vorlage eine Seite verwenden sollte, können Sie sie in der Frontmatter der Seite angeben, wie Sie:

 ---
template: blog
---

Im obigen Beispiel sucht Teeny nach einer Vorlage namens blog.html . Wenn keine Vorlage angegeben ist, sucht Teeny in default.html templates/ und verwendet dies.

Beispiel Verwendung

Hier ist ein Beispiel für Teeny bei der Arbeit.

Um ein Teeny -Projekt zu starten, leiten Sie teeny init . Dadurch werden in Ihrem aktuellen Verzeichnis Folgendes erstellt:

 .
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

Wenn Sie dann teeny build laufen, werden Sie folgendermaßen erhalten:

 .
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

index.md verwendet die homepage -Vorlage und generieren zusammen index.html . Wie bei anderen SSGs standardmäßig werden statische Dateien von public/ .

Sie werden auch bemerken, dass main.js auch in public/ auch in die Öffentlichkeit verschoben wurde. Teeny entnimmt tatsächlich alle Nicht-Template- und Nicht-Seiten-Dateien von pages/ , templates/ und static/ und kopiert sie in public/ , folgt derselben Struktur aus dem Ursprungsverzeichnis.

Der Grund dafür ist, dass ich eigentlich keine "magischen" Importe haben wollte, bei denen Sie statische Vermögenswerte aus Pfaden importieren müssen, die der tatsächlichen Verzeichnisstruktur nicht entsprechen. Infolgedessen entschied ich, dass statische Dateien nur in templates/ und pages/ nach Bedarf leben würden.

Später habe ich mich jedoch dem static/ Verzeichnisansatz ergeben, da es möglicherweise sowohl Seiten als auch Vorlagen verwenden, die sie verwenden möchten. Importe aus static/ sind "Magie", was bedeutet, dass Sie über die Ausgabe von teeny build nachdenken müssen, damit sie arbeiten können.

Das letzte Kommando, das Teeny unterstützt, ist teeny develop . Dadurch wird ein HTTP -Server zu Serverdateien aus dem public/ Unterverzeichnis erstellt.

Es hört auf Änderungen an den Dateien zu und aktualisiert die statischen Dateien im laufenden Fliegen (naiv, indem es jedes Mal wieder aufgebaut wird, wenn es eine Änderung erkennt).

? Potenzielle zukünftige Verbesserungen

Ich möchte Teeny so winzig wie möglich halten. Ich stelle den gesamten Code absichtlich in eine Datei als Erinnerung an mich, dass dies nur ein einfaches Werkzeug für mich sein soll, um einfache statische Blogs schnell zu erstellen.

Es könnte jedoch einige "Entwicklererfahrung" -Abgrades verwenden, z teeny develop