htmlgoddess
Ein minimalistisches Framework zum Erstellen einer Website wie im Jahr 1999.
Anforderungen
- Ein Computer mit Internet, einem Texteditor und einem Webbrowser
- npm
Erste Schritte
- Terminal öffnen
-
npm install -g @htmlgoddess/cli
Dadurch wird das Befehlszeilenprogramm installiert. -
htmlgoddess create path/to/your/new/site - Befolgen Sie die Anweisungen und Sie sollten in kürzester Zeit einsatzbereit sein.
Zu tun
- Refaktor: Tests isolieren.
- hinzufügen: Befehl „host“.
- add: Befehl zur Stilauswahl, damit der Benutzer das Thema nach der Erstellung ändern kann.
- Kunststück: Rechtschreibprüfung.
- Kunststück: Auto-Commitizen-Hook zum Auslösen beim Commit.
- feat: Korrekturlesebefehle.
- feat: „domain“-Befehl.
- feat: herunterladbare ausführbare Datei.
- Refactor: Tauschen Sie den CNAME gegen die Yaml-Konfiguration für das Hosting aus.
- Aufgabe: Berichterstattung
- Konvertieren Sie „Dokumente“ in konfigurierbare Variablen
- Aufgabe: Stellen Sie sicher, dass der Beobachter keinen Speicher verliert.
- Fehler: cli.action wird während der Tests immer noch an die Konsole ausgegeben.
- Kunststück: GUI
Ich kenne kein HTML
Das ist in Ordnung. Schauen Sie sich dieses Video an, um loszulegen.
Befehlszeilenmenü
Wenn Sie npm start ausführen, werden Ihnen die folgenden Optionen angezeigt.
Wie es funktioniert
- Dateien im Ordner „src“ werden zu statischen HTML-Dateien im Ordner „docs“ kompiliert (gedruckt).
- Der Ordner
src/templates enthält die Vorlagen. Diese werden mit dem Inhaltsordner kompiliert, um Ihre statischen HTML-Seiten zu generieren. - Der Ordner
src/content enthält den Inhalt Ihrer Website, der in HTML-Dateien gespeichert ist, die Teile des HTML-Codes sind. - Wenn Sie
npm run print ausführen (oder im Terminalmenü „Drucken“ auswählen), werden Ihre Inhalte und Vorlagen in statische HTML-Dateien kompiliert und der Ordner „docs“ neu erstellt. (HINWEIS: Alles in den Dokumenten wird überschrieben, also speichern Sie Inhalte nur in Ihrem src-Verzeichnis!) - Sie können Ihre Site lokal testen, indem Sie im Menü den Befehl „serve“ ausführen.
- Wenn Sie bereit sind, Ihre Site bereitzustellen, führen Sie einfach
npm run save && npm run publish aus - Sie können Ihren Webserver dann auf „docs“ verweisen, sei es Apache, Git Pages, Nginx oder irgendetwas anderes.
- Sie können jedes Stylesheet hinzufügen, das auf einfache HTML-Elemente abzielt, und es sollte funktionieren :)
Vorlagen
- Selbstschließende Tags in der Vorlage wie
<head /> oder <main /> suchen nach Vorlagendateien mit demselben Namen. entweder ein Verzeichnis mit einem Index-HTML wie main/index.html oder einfach eine Datei main.html- Tags müssen nicht aus Standard-HTML bestehen. Wenn Sie im Vorlagenordner eine Vorlage „foo.html“ erstellen, können Sie ein
<foo /> -Tag einfügen, das den Inhalt von „foo“ ersetzt. - Die Vorlagenkompilierung erfolgt rekursiv, sodass Sie Vorlagen innerhalb von Vorlagen verwenden können. Die verschachtelten Vorlagen müssen jedoch Dateien sein, die in der übergeordneten Vorlage enthalten sind oder an diese angrenzen. Andernfalls wird es einfach ignoriert.
- Das
<content/> Tag ist etwas Besonderes und zieht entweder eine Vorlage mit demselben Namen wie die Datei (mit Verzeichnis) oder die Hauptvorlage ('templates/index.html) ein. - Wenn Sie die gewünschten Seiten im Inhaltsverzeichnis erstellen. Relative Verzeichnisse werden auf Ihrer Site mit demselben Pfad angezeigt. Diese Struktur ermöglicht die Selbstorganisation von Ordnern und URLs.
Einschränkungen
- Kein JS
- Keine Attribute außer Basic Href usw.
- Keine Kurse. Auf diese Weise können Sie jedes Stylesheet hinzufügen, das auf Vanilla-CSS abzielt
- Kein SASS/SCSS/LESS. Bei einfachen HTML-Elementen sollte dies nicht notwendig sein
- Kein React, Angular oder irgendetwas anderes.
- Oder auch nicht, Sie können alles hacken, was Sie wollen.
Philosophie
HTML wurde so konzipiert, dass es einfach ist und es normalen Menschen ermöglicht, Dinge im Internet zu erstellen und zu nutzen. Das Web ist heute ziemlich großartig, aber es ist auch ziemlich komplex geworden und lässt viele Menschen zurück. Dieses CMS besinnt sich auf das Wesentliche, um Menschen die Möglichkeit zu geben, sich frei und einfach auszudrücken.
- Das Framework versucht, so viele vorhandene Technologien und Standards wie möglich zu nutzen.
- Für alles wird HTML verwendet (wie es die HTML-Göttin befohlen hat) anstelle proprietärer Template-Tags und anderer spezieller Syntax. Das Vorlagensystem sucht nach selbstschließenden HTML-Tags und ersetzt diese durch zugehörige Vorlagen oder Inhalte.
- Das Dateisystem wird sowohl zum Suchen/Benennen von Vorlagen als auch zum URL-Routing genutzt.
- Git dient neben den HTML-Dateien in Inhalten und Vorlagen als eigentliche Datenbank für das CMS.
- Die Site „druckt“ im Ordner „docs“, und dann „veröffentlichen“ Sie sie auf Git, wo Sie GitHub-Seiten einrichten können. Es ist unabhängig vom Webserver, sodass Sie die Dateien im Ordner „Docs“ tatsächlich an einer beliebigen Stelle ablegen und einen Webserver darauf richten können.
- Tags sollen keine Klassen oder Attribute benötigen. Dadurch können neue Themen nahtlos eingefügt werden. Sie können sich Vanilla HTML als Schnittstelle zum Anwenden von Stilen vorstellen.
- Von der Verwendung von JavaScript wird abgeraten, da es nicht unnötig sein sollte, obwohl nichts im Framework Sie daran hindert, es zu verwenden.
- Sie können alles, was ich gerade geschrieben habe, ignorieren und tun, was Sie wollen. Es ist das Internet!
Häufige Probleme
- Abhängigkeiten wirken seltsam:
Lerna führt unter der Haube einige Dinge durch, um Abhängigkeiten zu vernetzen. Wenn Sie ein neues Modul installieren und die Dinge nicht mehr funktionieren, versuchen Sie es lerna bootstrap vom Root aus. - Testverzeichnis wird nicht bereinigt. Wenn ein Test fehlschlägt, kann die Bereinigung des Testverzeichnisses möglicherweise verhindert werden. Führen Sie in diesem Fall
npm run clean-test-dir aus, wodurch es manuell entfernt wird.
Mitwirken
- Führen Sie Tests in Paketen/CLI aus, um sicherzustellen, dass alles mit dem Snuff
npm run test übereinstimmt - Übernehmen Sie Änderungen am Mono-Repo-
npm run commit und befolgen Sie die Anweisungen - lerna veröffentlichen --force-publish Dadurch wird sowohl auf NPM veröffentlicht als auch ein Tag an Git gesendet
