Advertisement
  1. Web Design
  2. Middleman

So richten Sie eine statische Webseite mit Middleman ein

by
Read Time:16 minsLanguages:
This post is part of a series called Building Static Websites with Middleman.
Working With Data, Assets, and Templates in Middleman

German (Deutsch) translation by Eva Collados Pascual (you can also view the original English article)

Dies ist Teil einer kleinen Serie über Middleman, „einen statischen Seitengenerator, der alle Verknüpfungen und Tools der modernen Webentwicklung verwendet“. In den ersten beiden Tutorials werden die Grundlagen behandelt. Anschließend setzen wir das Gelernte mit einem praktischen Projekt in die Tat um. Middleman erfordert die Verwendung von Ruby, aber zögern Sie nicht weiterzulesen, wenn Ihnen dies fremd ist. Diese Serie ist völlig für Anfänger geeignet.

Middleman und statische Seiten

Was ist in letzter Zeit mit statischen Webseiten los? Nun, sie sind schnell, ziemlich einfach einzurichten und leichtgewichtig. Da Sie keine datenbankbezogenen Dienste bereitstellen, sind statische Webseiten ziemlich zuverlässig und schnell. HTML, CSS und bei Bedarf JS - das ist alles.

Viele Menschen verwenden statische Webseiten, um ihre Blogs und persönlichen Seiten einzurichten. Startseiten, die stark frequentiert sind, sind ebenfalls ein guter Kandidat. HealthCare.gov, von der Obama-Administration, verwendete Jekyll, einen anderen statischen Seitengenerator, für ihre Seite. Wenn Sie schnell und einfach etwas benötigen, das sich sofort skalieren lässt, können statische Webseiten erstaunlich sein. Zumal Sie sie kostenlos auf GitHub Pages oder Heroku gehostet werden können.

filefilefile

Wahrscheinlich begannen die gesamten statischen Seiten vor ein paar Jahren, als Jekyll kam. Natürlich sind statische Seiten so alt wie die erste „Hallo Welt!“ Von Sir Tim Berners-Lee, aber in den letzten 15 Jahren waren datenbankgestützte Apps „alles, was zählt“. Vor ein paar Jahren brauchte einer der Mitbegründer von GitHub eine bessere Möglichkeit Blogs zu schreiben und er entwickelte Jekyll - diesen angesagten statischen Seitengenerator für „Bloggen wie ein Hacker“. Ich habe es ein paar Mal benutzt und habe nur gute Dinge zu berichten. Das Kernteam ist auch großartig. Jedenfalls waren sich mein Herausgeber und ich für diese Serie einig, dass es interessanter wäre, über Middleman zu berichten. Man kann mit Recht sagen, dass Middleman von Anfang an ein bisschen weniger „blogbewusst“ ist, aber dennoch genauso leistungsfähig und qualitativ hochwertig.

filefilefile

Ruby

Middleman verwendet Ruby und bietet eine ziemlich umfangreiche Reihe von Funktionen, um coole Sachen zu erstellen. Wenn Sie jemals Rails oder Sinatra verwendet haben, werden Sie sich wie zu Hause fühlen. Es scheint, dass Middleman und Jekyll die Anlaufstelle für statische Seiten in der Ruby-Community sind. Ich habe auch immer mehr Designer argumentieren hören, dass Sie sie gerne zum Prototyping und zum Einrichten ihrer eigenen persönlichen Seiten verwenden. Viele dieser statischen Seitenframeworks haben gemeinsam, dass sie recht einfach zu verwenden sind.

In diesem Artikel gehe ich davon aus, dass Sie zumindest ein wenig an Ruby interessiert sind und es auf Ihrem System installiert haben. Wenn Sie Hilfe benötigen, schauen Sie sich Ruby for Newbies an: Installieren von Ruby und Erste Schritte von Andrew Burgess.

Es ist auch wichtig zu wissen, wie man mit RubyGems umgeht, und auch Andrew Burgess' Ruby for Newbies: Arbeiten mit Gems hilft Ihnen bei Bedarf beim Einstieg. Ich werde mein Bestes tun, um nicht mit Programmierkonzepten über ihren Kopf zu wachsen, aber ich werde nicht auf Programmiergrundlagen wie Schleifen, Codeblöcke und dergleichen eingehen. Keine Sorge, für die Neulinge unter Ihnen hat Middleman nicht so viele bewegliche Teile, und ich werde zeigen, wie einfach es ist, sie zu lernen.

Installation und erste Schritte

Sie haben also Ruby und RubyGems am Riemen? Großartig, dann können wir loslegen.

Öffnen Sie Ihr Terminal und geben Sie Folgendes ein:

Wenn Ihnen die Berechtigung dazu verweigert wird, müssen Sie dem Befehl sudo voranstellen und Ihr Systemadministratorkennwort eingeben. Nach Abschluss dieses Vorgangs können Sie über die Eingabeaufforderung einige praktische Middlemanbefehle verwenden.

filefilefile

middleman init

Dieser Befehl initiiert ein neues Projekt. Sie müssen den Namen Ihrer App angeben und dann die Eingabetaste drücken.

Es werden auch zusätzliche Argumente benötigt, z. B. mit welcher Vorlage Sie beginnen möchten. Dies macht es sehr praktisch, Ihre Apps von Anfang an mit Vorlagen anzupassen, wodurch sich wiederholende Einrichtungsaufgaben erheblich reduziert werden! Weitere Informationen zu Vorlagen finden Sie in einem späteren Lernprogramm.

middleman server

Middleman wird mit einem lokalen Server für Ihre Entwicklung geliefert. Durch das Starten können Sie Ihre Seite unter https://localhost: 4567/ ** anzeigen. Wenn Sie nur ** middleman ohne zusätzliches Argument eingeben, wird auch Ihr Server gestartet. Fahren Sie Ihren Server mit STRG-c herunter.

middleman build

Sobald Sie etwas haben, das Sie auf einen mit dem Internet verbundenen Server stellen können, müssen Sie Ihre Seite erstellen. Dies bedeutet, dass alles, was Sie in Ihrem /source-Ordner vorbereitet haben, verarbeitet wird und die endgültige Ausgabe in den /build-Ordner ausgegeben wird, den middleman auch für Sie erstellt. Alle Ihre Dateien, die Preprozessoren wie Slim, Haml, Sass, CoffeeScript verwenden, werden in ihre jeweiligen Gegenstücke verarbeitet und in Ihr /build-Verzeichnis gestellt.

middleman deploy

Sobald Ihre Seite für das Internet bereit ist, stellt dieser Befehl Ihren Ordner /build auf Ihrem Webserver bereit. Jedes Update, das Sie vornehmen, durchläuft diesen Prozess.

LiveReload

Tun Sie sich selbst einen Gefallen und aktivieren Sie LiveReload, um Ihre Seiten nach Änderungen an Ihren HTML-, Sass- oder JS-Dateien automatisch zu aktualisieren. Dies ist während der Entwicklung von großem Komfort - Sie werden es nicht bereuen! Middleman bietet heutzutage LiveReload sofort an - Sie müssen es nur noch

zu Ihrem Gemfile hinzufügen und kommentieren Sie die folgende Zeile in config.rb:

Dann bündeln Sie Middleman

Source vs. Build vs. Deploy

Beginnen wir also mit den Ordnern /source und /build. Zwischen ihnen befindet sich die Trennlinie, die Ihre Entwicklungs- und Produktionsabschnitte trennt. Wenn Sie Ihren lokalen Webserver für die Entwicklung verwenden, wird /source verwendet, um Ihre App bereitzustellen. Der Ordner /build wird von Ihren nicht lokalen Servern verwendet, um Ihre statischen Seiten bereitzustellen. /build wird jedes Mal erstellt, wenn Sie den middleman build in Ihrer Befehlszeile verwenden. Daher sollten Sie darauf achten, dass Sie nicht versehentlich Ihre Zeit mit dem Codieren in /build verbringen, da diese Arbeit nach dem Build-Prozess verschwindet. Im Allgemeinen soll Ihre gesamte Entwicklung in /source erfolgen.

Der Erstellungsprozess erstellt die statischen Seiten, die Ihr Server hosten soll. Jede Datei in Ihrem /source-Ordner wird verarbeitet und dann in /build gespeichert. Wie bereits erwähnt, werden Ihre Sass, CoffeeScript, Slim / Haml und Partials zu ihren zuverlässigen Gegenstücken verarbeitet. Alle Layouts werden ebenfalls zusammengesetzt. Wenn Sie die Komprimierung für diese Dateien aktiviert haben, ist dies der Moment, in dem sie ebenfalls "verunstaltet" werden. Während dieses ganzen Shabang wird der Ordner /build verjüngt, indem Dateien entfernt werden, die keine Referenz mehr in /source haben. Während des middleman build lösen alle Änderungen, die Sie an Dateien in /source vorgenommen haben, eine Regeneration neuer entsprechender statischer Dateien für /build aus.

Der Bereitstellungsprozess ist der letzte Schritt. Mit dem Verzeichnis /build haben Sie alles, was Sie brauchen, um Ihre App dort herauszubringen. Ich empfehle, dies frühzeitig zu tun, um Überraschungen zu vermeiden.

Eine neue Seite

Schauen wir uns die Grundstruktur einer Middleman-App an. Die Hauptkomponenten sind:

  • /images
  • /javascripts
  • /layouts
  • /stylesheets
  • config.rb
  • Eine index.html.erb-Datei
  • Ein Gemfile

Wie Sie unten sehen können, wird der meiste Jazz in den Ordner /source verschoben. Was ich an Middleman-Apps mag, ist ihre einfache Organisation. Das Navigieren in der Dokumentstruktur ist auch für Anfänger unkompliziert.

filefilefile

Wenn Sie mit der Benennung einiger dieser Ordner nicht zufrieden sind, können Sie dies in Ihren Konfigurationen (config.rb) ändern. Die gleichen Namen werden für Ihren fertigen /build-Ordner verwendet.

Sobald Ihr Server läuft, können Sie andere Optionen zum Konfigurieren von Middleman direkt in Ihrem Browser überprüfen: http://localhost:4567/__ middleman/config/. Nicht alle von ihnen sind möglicherweise sinnvoll oder in dieser Phase zu verstehen. Werfen Sie einen Blick darauf und ein mentales Lesezeichen ist vorerst völlig ausreichend.

Wenn Sie einen middleman build ausführen, können Sie einen Blick in den Ordner /build werfen. Alle einfachen HTML-, CSS- und JS-Dateien, die Sie für die Bereitstellung Ihrer statischen Seite benötigen.

filefilefile

Das ist so ziemlich alles, was Sie wissen müssen, um loszulegen und sich zu orientieren.

Vorschlag: An dieser Stelle wäre es sehr sinnvoll, selbst eine Test-App zusammenzustellen. Schauen Sie sich um und bekommen Sie ein Gefühl dafür, wie die Dinge organisiert sind und wie die Teile zusammenpassen.

Front Matter

Der Begriff Front Matter stammt aus dem Buchverlag und bezieht sich auf die Informationen auf der Vorderseite eines Buches. Bei statischen Website-Dateien handelt es sich um Informationsblöcke, die in YAML gespeichert sind. Auf jeder Seite können Sie Variablen haben, die ganz oben in einem führenden und einem nachfolgenden dreifachen Bindestrich gespeichert werden können. Hier ist beispielsweise der Anfang einer fiktiven Datei mit dem Namen: some.html.erb.

Die YAML-Variablen sehen genauso aus wie ein Hash. Sie können über das Objekt current_page auf diese lokalen Daten zugreifen:

Sie werden dies häufig verwenden, um Tags, Daten, Titel und Konfigurationsoptionen zu speichern, z. B. welches Layout Sie für bestimmte Seiten verwenden möchten. Front Matter ist ein YAML-Speicher für Ihre Variablen. Sie können auch JSON verwenden, wenn Sie dies bevorzugen. Stellen Sie sich das als einen Ort vor, an dem Daten abgelegt werden können, die sich normalerweise in einer Datenbank befinden. Ich werde die verschiedenen Optionen und Verwendungszwecke auf dem Weg besprechen, wenn sie auftauchen.

ERB

Dies ist eine gute Gelegenheit, kurz auf ERB einzugehen. Mit ERB können Sie dynamische Vorlagen erstellen, in die Code eingebettet ist. Ihre Dateinamen müssen die Erweiterung .erb haben und Sie müssen Ihren Code in die folgenden zwei "Container" einfügen.

Für Code, der ausgeführt, aber nicht auf der Seite „gedruckt“ wird, verwenden Sie Folgendes:

Betrachten Sie es als "nur zur Berechnung".

Andernfalls müssen Sie für Rückgabewerte, die auf der Seite "gedruckt" angezeigt werden sollen, ein Gleichheitszeichen, wie bei uns, hinzufügen Das ist Alles.

Layouts

Die Konzepte von Layouts und Partials sind eng miteinander verbunden. Lassen Sie mich Ihnen eine kleine Übersicht geben, falls Sie noch nie mit Rails, Sinatra oder ähnlichem gespielt haben. Ich denke, ich sollte zuerst mit layouts beginnen.

Layouts bieten Ihnen die Struktur, gemeinsame Überschriften für verschiedene Seiten zu verwenden, die zur selben „Familie“ von Seiten gehören. Dies ist ein Tool, um Doppelarbeit zu vermeiden und Ihre Arbeit zu beschleunigen. Anstatt überall dasselbe HTML-Skelett zu schreiben, erstellen Sie Layouts für bestimmte Anwendungsfälle. Beliebte Beispiele sind zwei verschiedene Layouts für einen Administrator und einen „normalen“ Benutzer. Sie haben normalerweise eine ganz andere Erfahrung, wenn sie dieselbe Seite betrachten.

Wenn Sie eine einfache middleman-App starten, erhalten Sie automatisch eine layout.erb-Datei in source/layouts. Beachten Sie, dass diese Datei mit .erb und nicht mit .html.erb endet. Layouts sollten nicht in HTML gerendert werden und Middleman gibt einen Fehler aus, wenn Sie Layouts mit der Erweiterung .html erstellen. Wenn Sie eine andere Vorlagensprache wie Slim oder Haml verwenden, können Layouts stattdessen ihre Erweiterungen haben. Wie in der Standardeinstellung vorgeschlagen, sollten Sie alle Ihre Layouts im Ordner /layouts in source ablegen.

Hier ist ein Beispiel für source/layouts/layout.erb:

Dieses Standardlayout ist ziemlich einfach, bietet aber alles, was Sie für den Einstieg benötigen. Werfen wir einen Blick darauf:

  • Ein bisschen Meta-Information.
  • Ein dynamischer Seitentitel, der Daten von der Titelseite jeder Seite liest.
  • Hilfsmethoden, die Stil- und JavaScript-Dateien enthalten.
  • Und schließlich ein Body-Tag, um Ihren Inhalt, der über <%=yield%> eingegeben" wird, in das Layout einzubinden.

Und von dort aus können Sie dieses Layout an Ihre Bedürfnisse anpassen. Ein potenziell verwirrender Aspekt für Ruby-Neulinge ist das Yield-Schlüsselwort. Dies bedeutet lediglich, dass es den Rest des von Ihnen erstellten Inhalts durchläuft. Mit anderen Worten, Yield ist ein Platzhalter für Ihre Ansichten, die darin gerendert werden. Wenn Ihnen dieses Konzept völlig fremd ist, denken Sie daran, es vorerst nicht zu berühren, da Ihre App sonst möglicherweise nicht wie erwartet funktioniert. Wenn Sie Ihre eigenen Layouts erstellen, ist es wichtig, dass Sie yield verwenden, da sonst Ihre Inhalte nicht angezeigt werden. Sie werden es in kürzester Zeit verstehen, das verspreche ich.

Wenn Sie verschiedene Layouts erstellt haben, können Sie über die Vorderseite festlegen, welches Layout Sie Seite für Seite verwenden möchten. Nehmen wir an, Sie haben ein spezielles Layout für die Begrüßung von Benutzern, das etwas verkaufsfördernder ist. Hier haben wir welcome.html.erb.

Alternativ können Sie Layouts in Ihrer Datei config.rb angeben.

Wenn Sie dies für jede Seite nicht manuell tun möchten, können Sie sie an einem Ort sammeln. Wiederum verwenden Sie in config.rb einen Platzhalter (**\***), um eine Reihe von Seiten zu sammeln, die dasselbe Layout verwenden.

Ich persönlich möchte diese Layout-Informationen in den Vordergrund stellen. Es ist sehr explizit und nicht zu repetitiv. Wenn ich jedoch eine ganze Reihe davon hätte, würde ich lieber den Platzhalter-Ansatz verwenden.

Partials

Partials bieten Ihnen die Möglichkeit, Ansichtscode zu kapseln, den Sie überall wiederverwenden können. Sie müssen Ihrer Ansicht nur mitteilen, wo ein Teil eingefügt werden soll, und es wird genau dort gerendert. Partials sind eine sehr verbreitete Technik zum DRYing Ihres Codes.

Sehr häufige Beispiele sind Navigationsleisten, Fußzeilen und Kopfabschnitte, die Sie nicht überall duplizieren möchten. Dateien für Partials beginnen mit einem Unterstrich. Für den Anfang können Sie sie unter /source platzieren. Ihre Layouts sind ein guter Ausgangspunkt, um Code zu sammeln und in Partials zu extrahieren. Wann immer Sie etwas finden, das Sie wiederverwenden müssen, sind Partials ein nützlicher Freund.

Hier ist ein Beispiel für /source/layouts/layout.erb.

Und die Partial source/_head.html.erb:

Manchmal möchten Sie einen Teil extrahieren, um nicht nur Doppelarbeit zu vermeiden, sondern um Ihre Ansichten besser lesbar zu machen. Im Laufe der Zeit sind Kopfabschnitte bekannt dafür, dass sie zum Beispiel ziemlich überlastet werden. In ihnen können Sie andere Partials haben, die sich nur mit Stil- oder JS-Dateien befassen.

Sie werden feststellen, wie praktisch Partials sind, wenn Sie Änderungen anwenden können, die sich auf Ihre gesamte App auswirken - unabhängig davon, wo Sie das Partial aufgenommen haben. Es ist nicht erforderlich, eine Reihe von Dateien zu durchsuchen, um dieselbe Änderung immer wieder anzuwenden.

Helpers

Helpers sind Methoden, die Sie in Ihren Ansichten für viele alltägliche Aufgaben verwenden können. Ich glaube, dies war Pionierarbeit im Rails-Land und wurde für die moderne Webentwicklung schnell allgegenwärtig. Sie haben bereits Helpers gesehen, die Stylesheets und JavaScript-Dateien enthalten. Es gibt aber noch viel mehr, wo das herkommt.

Hier ist noch einmal unser Partial /source/_head.html.erb:

Diese Helpers sollen Ihnen helfen, saubereren und präziseren Ansichtscode zu schreiben. In der unten stehenden Helpersliste finden Sie viele nützliche Dinge, die sofort einsatzbereit sind. Sie sind jedoch nicht darauf beschränkt. Schreiben Sie Ihre eigenen Helpermethoden in config.rb oder sammeln Sie sie separat in einem Modul.

Das funktioniert so: In Ihrer config.rb erstellen Sie einen helpers block und fügen alle Ihre Helpermethoden ein. Das ist alles. Jetzt haben Ihre Ansichten Zugriff darauf.

Beispiel: /source/_navbar.erb.

Und in config.rb:

Diese Helpers können nützlich sein, wenn ich schnell einen Prototyp erstellen und vermeiden möchte, selbst Dummy-Bilder und -Texte einzurichten. Insgesamt sollten Sie nach Code Ausschau halten, den Sie präziser gestalten oder den Sie immer wieder duplizieren möchten. Helpers sind dafür oft ein gutes Zuhause.

In diesen benutzerdefinierten Helpern habe ich andere Middleman-Helper zum Erstellen vonimg-Tags über image_tag sowie das lorem-Objekt für einige zufällige Benutzernamen und Bildplatzhalter verwendet. Diese Lorem-Dinger können ein bisschen an Ihre Bedürfnisse angepasst werden.

Bei Verwendung des Modulansatzes benötigen Sie jedoch eine separate Datei für Ihr Modul. Erstellen Sie ein "lib" -Verzeichnis in Ihrem Stammordner (dieselbe Ebene wie "source" und "build") und erstellen Sie eine Datei für Ihre Helfer.

Hier haben wir /lib/helpers.rb:

Dann müssen Sie Ihrer Datei config.rb mitteilen, dass Sie diese Helfer verwenden möchten:

Boom! Du bist bereit zu rollen. Im Allgemeinen würde ich mich sofort für den Modulansatz entscheiden. Es fühlt sich für mich viel sauberer an und Sie vermeiden es, Ihre Konfigurationsdatei mit zu viel Material zu verschmutzen.

Ich möchte mich auch mit Ausgabehilfen und content_for befassen, da diese für Neulinge etwas verwirrend sein können. Auf diese Weise können Sie eine Reihe von Inhalten erfassen, die Sie an einem anderen Ort bereitstellen / wiederverwenden können. Es ist eine Art Miniaturpartial. Ich persönlich würde die meiste Zeit mit einem Teil davon arbeiten, aber hin und wieder, wenn Sie On-Off-Änderungen chirurgischer anwenden möchten, ist dies praktisch zu wissen:

Hier ist index.html.erb:

Und admin_index.html.erb:

Dann in layout.erb:

content_for?

Der Schlüssel ist die Verwendung von Yield_Content, mit dem Ihre gesammelten Inhalte von der einzelnen Seite in das Layout eingefügt werden - sofern gefunden. Sie müssen sie auch nicht nur mit layouts verwenden. Wenn Sie dies etwas komplizierter gestalten möchten, verwenden Sie content_for? um nach bestimmten Inhaltsblöcken zu suchen, bevor Sie sie einfügen. Dies ist praktisch, wenn Sie kleine Anpassungen für Abschnitte vornehmen möchten, die sich nur geringfügig unterscheiden. Es ist großartig, dass Sie diesen Inhalt wie eine Konfiguration auf den entsprechenden Seiten selbst speichern und nur bei Bedarf "aktivieren" können. Sie sollten mit diesen Dingen wahrscheinlich nicht zu schlau werden.

link_to

Ein Wort zu demlink_to-helper, den ich oben verwendet habe. Dies ist wahrscheinlich die, auf die Sie am häufigsten stoßen werden. Sie geben der Methode im Wesentlichen einen Namen und eine URL oder einen Pfad, auf den dieser Link verweisen soll. Der Kürze halber habe ich den letzten Teil durch einen Platzhalter ersetzt.

Im Folgenden finden Sie eine Übersicht darüber, welche Helper sofort einsatzbereit sind. Ich denke, die Namen sind größtenteils selbsterklärend und ich sollte nicht darüber nachdenken, womit jeder dieser Namen Ihnen helfen kann. Machen Sie ein mentales Lesezeichen für das, was da draußen ist, und überprüfen Sie die Dokumentation, wenn Sie Probleme haben.

Tag Helpers

  • tag
  • link_to
  • input_tag
  • favicon_tag
  • stylesheet_link_tag
  • javascript_include_tag

Output Helpers

  • content_for
  • content_for?
  • capture_html
  • yield_content
  • concat_content

Form Helpers

  • form_tag
  • label_tag
  • select_tag
  • submit_tag
  • field_set_tag
  • text_field_tag
  • check_box_tag
  • password_field_tag

Format Helpers

  • truncate
  • pluralize
  • word_wrap
  • escape_html
  • simple_format
  • js_escape_html
  • time_ago_in_words
  • distance_of_time_in_words

Lorem Helper

  • lorem.date
  • lorem.word
  • lorem.name
  • lorem.email
  • lorem.image
  • lorem.words
  • lorem.sentence
  • lorem.last_name
  • lorem.paragraph
  • lorem.first_name
  • lorem.paragraphs

Abschließende Gedanken

Ich glaube, dies ist eine gute Basis, um mit einer Spielzeug-App herumzuspielen. Sie sollten ein gutes Gespür dafür bekommen haben, was Middleman bietet und wie Sie im Framework navigieren. Im nächsten Teil dieser Reihe werden wir die Dinge weiterentwickeln und etwas tiefer in das Framework eintauchen. Das Middleman-Team hat wirklich großartige Arbeit geleistet, indem es die API entworfen und die Dinge einfach gehalten hat.

Hoffentlich können Sie jetzt sehen, warum dieses Framework an Popularität gewonnen hat und warum es eine gute Wahl für alle Arten von statischen Projekten ist.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.