30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Middleman
Webdesign

Projekt: Erstellen Sie eine komplette Website mit Middleman  

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
Working With Data, Assets, and Templates in Middleman
Project: Continuing Our Website Build With Middleman

German (Deutsch) translation by Tanya Ira (you can also view the original English article)

In Teil drei dieser Serie wir machen uns die Hände schmutzig und bauen Sie eine Website für einen fiktiven podcast Website: "Matcha Nerdz". Wir werden über Zwischenhändler, Bourbon, Neat und Bitter. Let ' s go! 

In Diesem Beitrag 

  • Fahrplan 
  • Basic Setup-Blog 
  • LiveReload 
  • Die Organisation Posts 
  • GitHub-Seiten-Bereitstellung 
  • Schlauer Vermögenswerte 
  • Bourbon-Setup 
  • Normalisieren und jQuery 

Fahrplan 

Beginnen wir mit ein wenig heads-up, wo es geht.   In den nächsten Artikeln werde ich bauen, eine kleine statische Website für ein fiktives podcast namens "Matcha Nerdz"—ein podcast für Menschen, die eintauchen wollen in allen Dingen pulverisierten grünen Tee. Es wird auf den folgenden Seiten:

  • Eine Seite für jeden tag 
  • Eine Detailseite für jede episode 
  • Eine index-Seite für die bisherigen podcasts 

 Wir verwenden Zwischenhändler für die Generierung der statischen Website und die Bourbon-suite für alle styling. Ich hoffe, dass Sie genommen haben, einen Blick auf meine vorherigen tutorials über Bourbon, Neat und Zwischenhändler, bevor Sie an diesem Punkt angekommen. Wenn nicht, empfehle ich Ihnen, gehen Sie vor und Lesen Sie Sie, es sei denn, Sie fühlen sich sicher genug, in die Grundlagen bereits. 

Für alle Dinge in Bezug auf styling, ich habe stark unter Berufung auf Bourbon für eine ganze Weile. Auch, ich habe wirklich Graben die eingerückt Sass-syntax—ich weit lieber, die .scss syntax.   Die .sass-syntax ist das einzige (wahrscheinlich) unbekannte bit ich möchte werfen die Neulinge, weil ich das Gefühl, es ist es wirklich Wert kennen gelernt zu werden.

Basic Setup-Blog 

Wir initiieren eine neue app für unsere podcast-Seite, durch Eingabe im terminal: 

und dann Wechsel auf unser Projekt-Verzeichnis: 

Jetzt bekommen wir Git geht: 

 Als Nächstes fügen wir die blog-Vorlage, um den mix. Dies ist eine gute basis für unsere podcast-Seite. Später passen wir die Artikel anzeigen, podcast-audio-tracks von SoundCloud. Für jetzt, jedoch, es ist nur ein blog.

In dem Gemfile hinzufügen: 

Dann über das terminal: 

Dies wird aktualisieren Sie Ihre "matcha_nerdz" - Ordner. “.config.rb" und Ihr index-Vorlage Holen Sie sich ein kleines update als gut.  Obendrein erhalten Sie neue Vorlagen für Ihre Feeds, tags-Seite, Kalender-Seite ist ein Beispiel-Artikel und ein neues layout. Überprüfen Sie die Ausgabe aus dem terminal: 

Git: 

Erstellen Von Neuen Artikeln 

Nun können Sie neue Artikel über die Kommandozeile: 

Dies erstellt ein neues markdown-Artikel unter "/source". Dies ist nicht die optimale storage-wise, aber wir werden es schaffen. Starten Sie Ihren server, um zu sehen, Ihr erstes Beispiel blog-Artikel: 

Aufräumen Dinge 

Als Nächstes müssen wir einige der Hauswirtschaft zu tun. Die blog-Vorlage erstellt ein neues layout unter “Quelle/layout.erb". Wir müssen löschen, die orginal in “source/layouts/layout.erb" und verschieben Sie die neue ein. Also über das terminal: 

 Wir brauchen auch ein update der neuen “layout.erb" mit Sachen, die gelöscht wurde, in der layout-Datei. Fügen Sie den folgenden Code in den - tag in “source/layouts/layout.erb":

Am wichtigsten ist, stellt dies sicher, dass Ihre JS und style Vermögen sind verfügbar. 

Git 

LiveReload 

 Um uns das Leben ein bisschen bequemer wir werden hinzufügen, LiveReload in den mix. Wir müssen schnappen Sie sich den Edelstein und dann aktivieren Sie es in unserer “config.rb" - Datei.

In unserem Gemfile: 

Im terminal: 

Dann in der config.rb: 

Und schließlich unser Git-Befehle: 

 Mit dieser aktiviert ist, starten Sie Ihren server und Ihre Seite wird automatisch aktualisiert, wenn Sie auf der Seite der Inhalt, Stile und Verhalten. Life saver, Vertrauen Sie mir!

 Achtung! Ein Wort der Vorsicht: Wenn Sie einen anderen lokalen server läuft, LiveReload kann nicht ball spielen. Sie müssen töten, die andere server für jetzt.

Die Organisation Posts 

 Wenn Sie schauen, wo die Artikel gespeichert werden, gerade jetzt, werden Sie schnell erkennen, dass diese Organisation direkt unter "/source" wird langweilig sehr schnell. Veröffentlichen Sie ein paar Artikel und Sie werden ertrinken in posts.  Es gibt keine Notwendigkeit zu sein, die chaotisch–stattdessen erstellen wir ein Verzeichnis unter "/source" für alle unsere Artikel. Bewegen Sie Ihren Artikel(s) in es und lassen Mittelsmann wissen, wo Sie zu finden sind.

 Dann fügen wir "/posts" als Quelle für den blog-Artikeln. In der config.rb:

Dann ist unser Git-Befehle: 

 Und das ist es. Nichts soll sich geändert haben und sollten Sie den Beispiel Artikel wie vorher. Speicherung der Beiträge, jedoch ist eine Menge mehr gesund.  Was auch cool ist, ist, dass, wenn Sie erstellen von neuen Artikeln über die Kommandozeile, werden Ihre neuen Beiträge bekommen wird gespeichert in "/post" automatisch:

GitHub-Seiten-Bereitstellung 

Für mich drängen statische Seiten auf GitHub-Pages solch eine komfortable Lösung, die ich nicht wollen, um durch die Bereitstellung von über Heroku oder Amazon S3-service. Halten wir es einfach! 

Im Gemfile: 

Dann im terminal: 

Wir brauchen Sie, um ein bereitstellen block “ - Konfiguration.rb": 

 Um für die GitHub-Seiten finden Sie Ihre CSS-und JS-assets, die wir benötigen, um zu aktivieren Folgendes in der config.rb:

Erstellen Sie dann ein repo auf GitHub, fügen Sie die remote und bereitstellen: 

Boom! Ihre Website ist live unter “IhrBenutzername.github.io/projectname" und Ihr Vermögen sollte aussortiert werden. Ich Liebe diesen Prozess—es könnte nicht einfacher sein und mehr Benutzer freundlich. Great job GitHub! 

Schlauer Vermögenswerte 

 Im letzten Schritt, bevor wir in die Bourbon-setup, würde ich mag, um loszuwerden, die Stile, die kommen mit Zwischenhändler und Optimierung unserer Anlagen zu einer besseren performance im browser—asset-Verkleinerung und-Verkettung.  Gehen Sie zu “Quelle/stylesheets/all.css" und löschen Sie dessen Inhalt. Halten Sie einfach die erste Zeile:

Git-Befehle: 

Als Nächstes aktivieren wir ein paar Optionen zur Optimierung der performance in “config.rb": 

Dann wieder Git-Befehle: 

Lassen Sie mich schnell erklären, was wir hier getan: 

  • :gzip 

In dem moment, gzip ist die beliebteste und effektivste Komprimierungsmethode. Seine Kompression Algorithmus findet ähnliche Zeichenketten in eine Datei und komprimiert Sie.   Für HTML, das ist voll von Leerzeichen und entsprechenden tags, das ist sehr effektiv und in der Regel reduziert die HTTP-response-Größe, die durch eine satte 70%.  Durch diese Aktivierung nicht nur Ihre Gzip-Dateien in HTML, aber auch CSS-und JS-Dateien. Während die einen bauen, Zwischenhändler schafft Ihre Dateien wie gewohnt, aber auch Duplikate, die Sie mit “.gz" - version.  Wenn ein browser bekommt in Kontakt mit Ihren Dateien, können Sie auswählen, wenn Sie es vorzieht, zu dienen gzip-komprimierte Dateien oder Stammkunden. Gzip unterstützt wird stark durch web-und mobilen Browsern.

  • :minify_css 

Dieser Prozess entfernt, allen unnützen Kram aus Ihrem Stile und verringert die Dateigröße erheblich. Kurz gesagt, die CSS wird zu einem großen blob—optimiert für das Lesen von einer Maschine. Definitiv nicht freundlich in die Augen. 

  • :minify_javascript 

Dies ist das gleiche wie minify_css, aber ein bisschen komplizierter und anspruchsvoller. 

  • :asset_hash 

 Dieser aktiviert eine Vermischung Ihres Vermögens. Es bedeutet, dass Ihre asset-Dateinamen ändern und erhalten einige zusätzliche Informationen (während der build-Prozess), welches die Information Browser, wenn Sie brauchen, um neu zu laden Vermögen oder nicht. Nun, der name der Datei ist abhängig von dem Inhalt der Datei. Hash-Vermögen-Cache von Browser und Ihre Websites Rendern schneller.   Ein anderes Wort HIERFÜR ist "Fingerabdruck", weil es stellt eine einfache Lösung zu informieren Browsern oder nicht, ob zwei Versionen einer Datei entsprechen. Die Bereitstellung Datum spielt keine Rolle—nur der Inhalt. Werfen Sie einen Blick unten, wie Hash-Dateien-Dateien suchen: 

Screenshots 

file
file
file

 Das sieht böse aus, aber jetzt Ihre Bilder, stylesheets und JavaScript-Dateien bekommen einen eindeutigen Namen durch das hinzufügen der "random-code": einen (eindeutigen) hash. Jedes mal, wenn Sie ein asset und gehen Sie durch den build-Prozess wieder, dieser hash ändert, was wiederum Signale an Browsern, dann, und nur dann, werden Sie brauchen, um neu zu laden Sie die betreffende Datei. Die Datei ist dann effektiv abgelaufen, ein Prozess, bekannt als "cache-busting". 

 Auch erwähnenswert: Sie verweisen können, um Ihre Dateien auf die gleiche Weise wie zuvor, aber während dem bauen die Verweise in Ihren HTML-get aktualisiert, um die Verwendung dieser Hash-Namen. Werfen Sie einen Blick:

“/build/index.html(.gz)": 

In Ihrem "/build" - Ordner, JS-und CSS-Dateien verwiesen wird, mit dem Hash-asset-Namen automatisch.   Als Ergebnis dieser hashing-Geschäft, wenn Sie durch die verschiedenen Seiten in der gleichen Sitzung oder zu überdenken, eine Seite später erneut, diese Vermögenswerte wurden zwischengespeichert und müssen nicht erneut angefordert werden—bis Sie etwas ändern.  Dieser Prozess reduziert die Anzahl der Anfragen von einer unglaublichen Menge. Ist das nicht cool? Das alles mit einer Zeile code in der “config.rb" und einige Ritzel Zauberei. Booyakasha! 

Der Schlüssel bei all diesen asset-Optimierung Techniken ist die Minimierung der Anzahl der Anfragen und die Größe der Anforderung von Dateien und assets. Zwischenhändler bietet große Leistung steigert, direkt aus der box, mit wenig Arbeit auf Ihrer Seite. 

Hinweis: GitHub Pages hat alles, was gzipped und minified aus der box. Aber es tut nicht weh, um sicherzustellen, dass alles an seinem Platz—vor allem, wenn Sie später entscheiden, für das hosten der app irgendwo anders. 

Wir haben Sie einen Blick auf unsere aktuellen Phase. Ihre index-Seite sollte sehen ziemlich nackt daher jetzt: 

file

Bourbon-Setup 

 Für dieses Projekt möchte ich drei Edelsteine von Bourbon:

  • Bourbon 
  • Ordentlich 
  • Bitter 

Fügen wir Sie zu unserem Gemfile und bundle: 

Im terminal: 

 Bourbon und Ordentlich sind jetzt gut zu gehen (fast). Bitter, muss zur Installation zuerst ein paar Dinge. Wir müssen zu ändern, in die stylesheets-Verzeichnis und aktivieren Sie einen generator, der Plätze ein Haufen von Bitter-Dateien in "/base" - Ordner.

Schauen Sie, was wir nach dieser: 

Abbildung 

file

 Bitter ist so etwas wie eine Grundlinie für Ihre Entwürfe. Es gibt Ihnen ein paar vernünftige designs für UI-Elemente wie buttons, Typ, Formulare, Fehlermeldungen und so weiter.  Bitter bereitet auch ein "Gitter-Einstellungen" - Datei für Ihre Gepflegten Netz, die haben wir auch einrichten, indem Sie die Kommentarzeichen vor der folgenden Zeile in "source/stylesheets/base/_base.scss":

 Unsere Bourbon-Einstellungen jetzt würde ich mag, um die folgenden Variablen hinzufügen, um unsere grid-Einstellungen. Sie legen den Grundstein für die Auslegung unserer raster und aktivieren Sie ein visuelles raster, das uns hilft, besser ausrichten unserer Konstruktion.

In “/source/stylesheets/base/_grid-Einstellungen.scss": 

 Der Letzte Schritt, um diese Arbeit zu benennen “/stylesheets/all.css" "/stylesheets.alle.sass" und importieren unsere Bourbon-Dateien.

 Hinweis: Da wir eingeschaltet, um die eingerückten Sass-syntax, müssen wir auch töten, das Semikolon am Ende der @charset-Zeile.

“alle.css.scss": 

 Wir importieren Bitter' base-Datei hier direkt nach Bourbon, weil wir Zugang brauchen, um Ordentlich grid-Einstellungen-Datei (in "/base" - Ordner), bevor wir importieren Ordentlich.

Git: 

 Lassen Sie uns einen Blick! Sehen Sie die roten visual grid und auch Dank Bitters, unsere Typografie hat sich verbessert ein wenig über browser-defaults. Werfen Sie einen Blick auf einen screenshot:

file

Normalisieren und jQuery 

 Zwischenhändler kommt mit einem Normalisieren Datei wird importiert in “alle.css" standardmäßig. Dies ist eine unnötige asset Anfrage können wir leicht loszuwerden, so benennen Sie “source/stylesheets/normalisieren.css - " zu "source/stylesheets/_normalize.css.scss". Jetzt haben wir eine partielle, die wir brauchen, um zu importieren rechts oben nach @charset in “source/stylesheets/all.sass": 

 Eine Sache sollten wir nicht übersehen wird, ist der link für unsere stylesheets in unserem layout. Da wir mit Hilfe der Sass-partials, die alle importiert werden, die in eine endgültige, "global" - stylesheet, wir brauchen nicht einen link zu normalisieren.css mehr—ein link zu allen.sass ist genug. 

In “source/layouts/layout.erb": 

Und dann Git: 

 Schließlich, bevor wir eine Pause machen, sollten wir hinzufügen, jQuery, welches wir später brauchen. Im Gemfile:

 Und im terminal:

Da möchte ich CoffeeScript für dieses Projekt müssen wir umbenennen "source/javascripts/all.js" Quelle "/javascripts/all.Kaffee". Dort benötigen wir jQuery für Kettenräder / Asset-Pipeline, und wir sind alle gesetzt. 

In allen.Kaffee: 

Unsere Git-Befehle: 

Und bereitstellen: 

Nach der Installation, öffnen Sie Ihre Website auf GitHub Pages um zu sehen, ob alles wie erwartet funktioniert. Nice job! 

Pause 

 Puh! Nehmen Sie eine Pause. Wir konnte sogar ein paar langweilige setup-Schritte aus dem Weg mit diesem ein. Hoffentlich waren Sie ein klares Bild von dem, was Sie brauchen, für eine solide basis, wenn Sie ein neues Zwischenhändler-Projekt. Als Nächstes werden wir erweitern auf das, was wir aufgebaut haben, hier und die Arbeit fortsetzen, in Richtung eine anständige Website für unseren podcast. 

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.