skeleventy

Ein elf Starter -Skelett

SKELEVENY bietet Ihnen ein solides Fundament, um schnelle und zugängliche statische Websites zu bauen. Sehen Sie sich die Demo -Site an.

Merkmale

• Eine saubere, minimale Build -Pipeline mit SCSS und Laravel -Mischung zum Kompilieren von Vermögenswerten
• Gorko, ein intelligentes kleines Sass-Versorgungsklassengenerator
• PURGECSS, um ungenutzte CSS zu entfernen
• HTML Minifier
• Unterstützt ES2017 JavaScript mit Babel -Zusammenstellung
• SEO -freundliches Seiten -Meta, einschließlich offener Grafik und Twitter
• Bild fauler Laden
• Mobile Navigation
• XML Sitemap
• Sauberer und einfacher Blog mit Kategorien und vorgestellten Bildern

Erste Schritte

Voraussetzungen

Knoten v10+

Installation

1. Klon den Repo git clone https://github.com/josephdyer/skeleventy.git
2. cd in den Projektordner und führen Sie npm install aus
3. Starten Sie den lokalen Entwicklungsserver, indem Sie npm run dev Tipp ausführen: ELESTY hat eine Live -Reload -Reload eingebacken!

Ordnerstruktur

ELFEN

• site/ enthält alle globalen Daten, Vorlagen und Inhalte
• utilities/ enthält elf filters und transforms
• Jede Seite sollte über ihren eigenen Ordner verfügen, der eine index.md -Datei enthält
• Sie können dann das am besten geeignete Layout für jede Seite auswählen (oder mehr erstellen, wenn Sie müssen)
• Die Navigation wird vom offiziellen elf Navigations -Plugin angetrieben

Vermögenswerte

• css/ für kompilierte CSS
• js/ für kompilierte JavaScript
• images/ enthält die Bilder unserer Website, ein SVG -Symbol Sprite und einen Ordner für Meta -Bilder (OG, Twitter usw.)

Die Build -Pipeline

Laravel Mix gibt uns eine schöne API -Ebene auf dem Webpack. SKELEVYS verwendet eine simple -Setup.

Sie finden die nicht kompilierten SCS und JS der Website in resources/ Wo Mix diese Verzeichnisse nach Änderungen ansehen. Tipp: Es ist am besten, den Server immer neu zu starten, wenn neue Teilnehmer oder Ordner erstellt werden

SCSS

• scss/ wird in macht verwandte Subordner strukturiert
• In der Datei _config.scss können Sie die Farben der Website und die von Gorko generierten Versorgungsklassen ändern
• Eine typografische Skala wurde bereits unter Verwendung meiner persönlichen Lieblings -Major -Major -Skala eingerichtet.
• Tipp: Weitere Skalen finden Sie auf der Typ -Skala

Gorko

Ich beschloss, Rückenwind zugunsten von Gorko zu entfernen, nur wegen seiner Einfachheit und Wartbarkeit (insbesondere für neuere Entwickler). Wenn Sie nicht zu viel haben und das, was Sie benötigen, sind nicht zu viel zu sein, wird zu einer einfacheren, wartbaren Codebasis führen. Mit Gorko können Sie einen Streuung wiederverwendbarer Versorgungskurse hinzufügen, um Ihren Code trocken zu halten. Kredit an Andy Bell für die Herstellung dieses praktischen kleinen Werkzeugs

JavaScript

• utilities/ enthält alle globalen Dienstprogramm-/ Helferfunktionen
• modules/ enthält das tatsächliche JavaScript Ihrer Website, die alle in ihren jeweiligen modularen Unterordnern ordentlich und ordentlich gehalten wurden
• Sie können diese Unterordner mithilfe von import '@modules/example-module' in main.js importieren.
• Tipp: Sie können optionale Import -Aliase über die Datei webpack.mix.js einrichten

Ein Hinweis zu reaktionsschnellen Bildern

Skeleventy hat keine reaktionsschnellen Bilder, die Hauptgrund dafür sind: Es ist am besten mit CDN. Schauen Sie sich dieses Tutorial an, um ELLEITY mit Wolkinie einzurichten.