Projekt: Erstellen Sie eine komplette Website mit Middleman  

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: 

1

middleman init matcha_nerdz

und dann Wechsel auf unser Projekt-Verzeichnis: 

1

cd matcha_nerdz

Jetzt bekommen wir Git geht: 

1

git init      

2

# => to initiate new Git repo

3

4

git add --all 

5

# => adds all the files for staging

6

7

git commit -m 'Initital commit' 

8

# => commits changes

 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: 

1

gem "middleman-blog"

Dann über das terminal: 

1

bundle

2

# or

3

bundle exec middleman

1

middleman init --template=blog

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: 

1

identical  .gitignore

2

   update  config.rb

3

    exist  source

4

   create  source/2012-01-01-example-article.html.markdown

5

   create  source/calendar.html.erb

6

   create  source/feed.xml.builder

7

   update  source/index.html.erb

8

   create  source/layout.erb

9

   create  source/tag.html.erb

10

    exist  source/stylesheets

11

    exist  source/javascripts

12

    exist  source/images

Git: 

1

git add --all

2

git commit -m 'Adds blog template'

Erstellen Von Neuen Artikeln 

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

1

middleman article 'My new fancy second article'

2

#=> create  source/2015-11-22-my-wonderful-second-article.html.markdown

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: 

1

middleman

2

#or

3

middleman server

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: 

1

rm source/layouts/layout.erb

2

mv source/layout.erb source/layouts/

 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":

1

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

2

<%= stylesheet_link_tag "normalize", "all" %>

3

<%= javascript_include_tag  "all" %>

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

Git 

1

git rm source/layout.erb

2

git add --all

3

git commit -m 'Moves new layout into /layouts

4

               Adds asset links

5

               Removes old layout'

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: 

1

gem 'middleman-livereload'

Im terminal: 

1

bundle

Dann in der config.rb: 

1

#uncomment

2

activate :livereload

Und schließlich unser Git-Befehle: 

1

git add --all

2

git commit -m 'Activates LiveReload'

 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.

1

mkdir source/posts

2

mv source/2012-01-01-example-article.html.markdown source/posts/

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

1

blog.sources = "posts/:year-:title.html"

Dann ist unser Git-Befehle: 

1

git rm source/2012-01-01-example-article.html.markdown

2

# Removes moved file from repo

3

4

git add --all

5

gco -m 'Adds new folder for posts and adds source in config.rb'

 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:

1

middleman article 'My awesome 3rd article'

2

# => create  source/posts/2015-my-awesome-3rd-article.html.markdown

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: 

1

gem "middleman-deploy"

Dann im terminal: 

1

bundle

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

1

activate :deploy do |deploy|

2

  deploy.method = :git

3

  deploy.branch = 'gh-pages'

4

  deploy.build_before = true

5

end

 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:

1

configure :build do

2

  activate :relative_assets

3

end

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

1

git remote add origin https://github.com/yourusername/repositoryname.git

2

3

middleman deploy

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! 

1

git add --all

2

gco -m 'Adds setup for GitHub Pages deployment'

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:

1

@charset "utf-8";

Git-Befehle: 

1

git add --all

2

git commit -m 'Removes unneccessary Middleman styles'

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

1

configure :build do

2

  activate :asset_hash

3

  activate :minify_javascript

4

  activate :css

5

  activate :gzip

6

end

Dann wieder Git-Befehle: 

1

git add --all

2

git commit -m 'Activates performance optimizations'

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 

 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)": 

1

<!doctype html>

2

<html>

3

  <head>

4

    <meta charset="utf-8" />

5

    <meta http-equiv='X-UA-Compatible' content='IE=edge;chrome=1' />

6

  	 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

7

    <title>Blog Title</title>

8

    <link rel="alternate" type="application/atom+xml" title="Atom Feed" href="/feed.xml" />

9

    <link href="stylesheets/normalize-6197e73d.css" rel="stylesheet" type="text/css" /><link href="stylesheets/all-0355b587.css" rel="stylesheet" type="text/css" />

10

    <script src="javascripts/all-da39a3ee.js" type="text/javascript"></script>

11

  </head>

12

  <body>

13

14

  ...

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: 

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: 

1

gem 'bourbon'

2

gem 'neat'

3

gem 'bitters'

Im terminal: 

1

bundle

 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.

1

cd source/styleheets

2

bitters install

Schauen Sie, was wir nach dieser: 

Abbildung 

 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":

1

@import "grid-settings";

 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": 

1

$column: 90px;

2

$gutter: 30px;

3

$grid-columns: 12;

4

$max-width: 1200px;

5

6

$visual-grid: true;

7

$visual-grid-index: back;

8

$visual-grid-opacity: 0.15;

9

$visual-grid-color: red;

 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": 

1

@charset "utf-8"

2

3

@import 'bourbon'

4

@import 'base/base'

5

@import 'neat'

 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: 

1

git add --all

2

git commit -m 'Sets up Bourbon and activates grid settings'

 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:

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": 

1

@charset "utf-8"

2

3

@import 'normalize'

4

5

@import 'bourbon'

6

@import 'base/base'

7

@import 'neat'

8

@import 'normalize'

 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": 

1

<%= stylesheet_link_tag "all" %>

Und dann Git: 

1

git rm source/stylesheets/normalize.css

2

git add --all

3

git commit -m 'Imports normalize partial properly'

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

1

gem "jquery-middleman"

 Und im terminal:

1

bundle

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: 

1

//= require jquery

Unsere Git-Befehle: 

1

git rm source/javascripts/all.js

2

git add -all

3

git commit 'Adds jQuery to the Mix

4

            Renames gobal js file to coffee'

Und bereitstellen: 

1

middleman deploy

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.