Share
Im dritten Teil dieser Serie werden wir uns die Hände schmutzig machen und mit dem Bau einer Site für eine fiktive Podcast-Site beginnen: „Matcha Nerdz“. Wir werden Middleman, Bourbon, Neat und Bitters verwenden. Lass uns gehen!
Beginnen wir mit einem kleinen Überblick darüber, wohin das führt. In den nächsten paar Artikeln werde ich eine kleine statische Website für einen fiktiven Podcast mit dem Namen "Matcha Nerdz" erstellen - einen Podcast für Menschen, die in alles eintauchen möchten, was mit pulverisiertem grünem Tee zu tun hat. Es wird die folgenden Seiten haben:
Wir werden Middleman verwenden, um die statische Site und die Bourbon-Suite für das gesamte Styling zu generieren. Ich hoffe, dass Sie sich meine vorherigen Tutorials zu Bourbon, Neat und Middleman angesehen haben, bevor Sie an diesem Punkt angekommen sind. Wenn nicht, empfehle ich Ihnen, sie zu lesen und zu lesen, es sei denn, Sie haben schon genug Vertrauen in die Grundlagen.
In Bezug auf das Styling habe ich mich schon seit geraumer Zeit stark auf Bourbon verlassen. Außerdem grabe ich wirklich die eingerückte Sass-Syntax - ich ziehe es weit vor der .scss Syntax. Das .sass Syntax ist das einzige (wahrscheinlich) unbekannte Stück, das ich Neulingen gefallen würde, weil es meiner Meinung nach wirklich wert ist, es kennenzulernen.
Lassen Sie uns eine neue App für unsere Podcast-Site initiieren, indem Sie im Terminal Folgendes eingeben:
bash middleman init matcha_nerdz und dann in unser Projektverzeichnis wechseln:
bash cd matcha_nerdz
Jetzt bringen wir Git zum Laufen:
"bash git init
# => um neues Git Repo zu initiieren
git add -all # => fügt alle Dateien für das Staging hinzu
git commit -m 'Initital Commit' # => Änderungen übernehmen "
Als nächstes fügen wir die Blog-Vorlage zum Mix hinzu. Dies ist eine gute Basis für unsere Podcast-Site. Später werden wir die Artikel anpassen, um Podcast-Audiospuren von SoundCloud anzuzeigen. Im Moment ist es jedoch nur ein Blog.
Im Gemfile hinzufügen:
Rubin Edelstein "Mittler-Blog"
Dann über das Terminal:
Bash Bundle # oder Bundle Exec Zwischenhändler
bash middleman init --template = Blog
Dadurch wird Ihr Ordner "matcha_nerdz" aktualisiert. ".Config.rb" und Ihre Indexvorlage erhalten ebenfalls ein kleines Update. Darüber hinaus erhalten Sie neue Vorlagen für Ihren Feed, die Tags-Seite, die Kalenderseite, einen Beispielartikel und ein neues Layout. Überprüfen Sie die Ausgabe vom Terminal:
bash identisch .gitignore update config.rb vorhanden source create source / 2012-01-01-example-article.html.markdown source / calendar.html.erb erstellen source / feed.xml.builder update source / index.html.erb erstellen create source / layout.erb create source / tag.html.erb vorhanden source / stylesheets vorhanden source / javascripts vorhanden source / images
Git:
bash git add --all git commit -m 'fügt eine Blogvorlage hinzu'
Jetzt können Sie neue Artikel über die Befehlszeile erstellen:
Bash-Mittelsmann-Artikel "Mein neuer, schicker zweiter Artikel" # => create source / 2015-11-22-my-wonderful-second-article.html.markdown
Dadurch wird ein neuer Abschriftenartikel unter "/ source" erstellt. Dies ist nicht optimal für die Lagerung, aber wir werden dorthin gelangen. Starten Sie Ihren Server, um Ihren ersten Blogartikel zu sehen:
bash middleman #oder Zwischenhändler-Server
Als nächstes müssen wir etwas zu tun haben. Die Blogvorlage erstellte ein neues Layout unter "source / layout.erb". Wir müssen das ursprüngliche in "source / layouts / layout.erb" löschen und das neue dort verschieben. Also über das Terminal:
bash rm source / layouts / layout.erb mv source / layout.erb source / layouts /
Wir müssen auch das neue "layout.erb" mit Elementen aktualisieren, die in der Layoutdatei gelöscht wurden. Fügen Sie Folgendes zu Ihrem hinzu Tag in "source / layouts / layout.erb":
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Dies stellt vor allem sicher, dass Ihre JS- und Style-Assets verfügbar sind.
Git
bash git rm source / layout.erb git hinzufügen --all git commit -m 'Verschiebt neues Layout in / layouts. Fügt Asset-Links hinzu.
Um unser Leben ein bisschen bequemer zu machen, fügen wir LiveReload zum Mix hinzu. Wir müssen den Edelstein packen und dann in unserer „config.rb“ -Datei aktivieren.
In unserem Gemfile:
Rubin-Edelstein "Mittler-Leber-Ladung"
Im Terminal:
Bash-Bündel
Dann in config.rb:
ruby #uncomment aktivieren: Leberlast
Und zum Schluss noch unsere Git-Befehle:
bash git add --all git commit -m 'Aktiviert LiveReload'
Wenn diese Option aktiviert ist, starten Sie Ihren Server neu und Ihre Seite wird automatisch aktualisiert, wenn Sie den Inhalt, die Formatvorlagen oder das Verhalten der Seite ändern. Lebensretter, vertrau mir!
Beachtung! Vorsicht: Wenn Sie einen anderen lokalen Server ausführen, spielt LiveReload möglicherweise nicht mit dem Ball. Sie müssen jetzt den anderen Server töten.
Wenn Sie nachsehen, wo Artikel gerade gespeichert werden, werden Sie schnell feststellen, dass diese Organisation direkt unter "/ source" sehr schnell langweilig wird. Veröffentlichen Sie ein paar Artikel und Sie ertrinken in Beiträgen. Es ist nicht nötig, so chaotisch zu sein. Stattdessen erstellen wir unter "/ source" ein Verzeichnis für alle unsere Beiträge. Bewegen Sie Ihre Artikel und lassen Sie Middleman wissen, wo er sie finden kann.
bash mkdir source / posts mv source / 2012-01-01-example-article.html.markdown source / posts / Dann fügen wir "/ posts" als Quelle für die Blogartikel hinzu. In config.rb:
ruby blog.sources = "posts /: year-: title.html"
Dann unsere Git-Befehle:
"bash git rm source / 2012-01-01-example-article.html.markdown # Entfernt die verschobene Datei aus dem Repo
git add -all gco -m 'Fügt einen neuen Ordner für Beiträge hinzu und fügt Quelle in config.rb hinzu. "
Und das ist es. Nichts sollte sich geändert haben und Sie sollten den Beispielartikel wie zuvor sehen. Die Lagerung von Posts ist jedoch viel vernünftiger. Cool ist auch, dass wenn Sie neue Artikel über die Befehlszeile erstellen, Ihre neuen Beiträge automatisch in "/ post" gespeichert werden:
bash middleman-artikel 'My awesome 3rd article' # => source / posts / 2015-my-awesome-3rd-article.html.markdown erstellen
Für mich ist das Übertragen statischer Sites auf GitHub Pages eine so bequeme Lösung, dass ich Sie nicht mit der Bereitstellung über Heroku oder den S3-Service von Amazon beauftragen möchte. Lass es uns einfach halten!
Im Gemfile:
Rubin Edelstein "Mittelsmann-Einsatz"
Dann im Terminal:
Bash-Bündel
Wir müssen einen Implementierungsblock zu "config.rb" hinzufügen:
ruby aktivieren: deploy do | deploy | deploy.method =: git deploy.branch = 'gh-pages' deploy.build_before = true Ende
Damit GitHub Pages Ihre CSS- und JS-Assets finden kann, müssen Sie Folgendes in config.rb aktivieren:
ruby configure: build aktiviert: relative_assets end
Dann erstellen Sie ein Repo auf GitHub, fügen Sie das Remote hinzu und stellen Sie Folgendes bereit:
"bash git remote fügt ursprung https://github.com/ihrusername/repositoryname.git hinzu
Zwischenhändler "
Boom! Ihre Site ist live unter "yourusername.github.io/projectname" und Ihre Assets sollten aussortiert werden. Ich liebe diesen Prozess - es könnte nicht einfacher und benutzerfreundlicher sein. Gute Arbeit GitHub!
bash git add --all gco -m 'Fügt Setup für die GitHub Pages-Bereitstellung hinzu'
Im letzten Schritt, bevor wir in das Bourbon-Setup einsteigen, möchte ich die Stile loswerden, die mit Middleman geliefert werden, und unsere Assets optimieren, um eine bessere Leistung bei der Minimierung und Verkettung von Browser-Assets zu erreichen. Gehen Sie zu „source / stylesheets / all.css“ und löschen Sie den Inhalt. Behalten Sie einfach die erste Zeile:
css @charset "utf-8";
Git-Befehle:
bash git add --all git commit -m 'Entfernt nicht mehr benötigte Middleman-Stile'
Als Nächstes möchten wir einige Optionen aktivieren, um die Leistung in "config.rb" zu optimieren:
Ruby Configure: Build aktivieren: Asset_hash aktivieren: Minify_javascript aktivieren: css aktivieren: gzip end
Dann wieder Git-Befehle:
bash git add --all git commit -m 'Aktiviert Leistungsoptimierungen'
Lassen Sie mich kurz erklären, was wir hier gemacht haben:
Im Moment ist gzip die populärste und effektivste Kompressionsmethode. Der Kompressionsalgorithmus findet ähnliche Zeichenfolgen in einer Datei und komprimiert sie. Für HTML, das voller Leerzeichen und übereinstimmenden Tags ist, ist dies sehr effektiv und reduziert die HTTP-Antwortgröße normalerweise um satte 70%. Durch die Aktivierung werden nicht nur HTML, sondern auch CSS- und JS-Dateien geladen. Während eines Builds erstellt Middleman Ihre Dateien wie üblich, dupliziert sie jedoch auch mit einer ".gz" -Version. Wenn ein Browser mit Ihren Dateien in Kontakt kommt, kann er auswählen, ob er komprimierte GZIP-Dateien oder reguläre Dateien bereitstellt. gzipping wird stark von Web- und mobilen Browsern unterstützt.
Bei diesem Vorgang werden alle nicht mehr benötigten Junk-Dateien aus Ihren Styles entfernt und deren Dateigröße erheblich reduziert. Kurz gesagt, Ihr CSS wird zu einem großen Blob, der für das Lesen durch eine Maschine optimiert ist. Auf jeden Fall nicht freundlich zu den Augen.
Das ist das Gleiche wie minify_css, aber ein bisschen mehr und anspruchsvoller.
Dies aktiviert das Hashing Ihrer Assets. Dies bedeutet, dass sich die Dateinamen Ihrer Assets ändern und während des Erstellungsprozesses zusätzliche Informationen erhalten, die den Browser darüber informieren, ob er Assets erneut herunterladen muss oder nicht. Nun hängt der Name einer Datei vom Inhalt dieser Datei ab. Hash-Assets werden von Browsern zwischengespeichert und Ihre Websites werden schneller gerendert. Ein anderes Wort dafür ist "Fingerprinting", da es eine einfache Lösung darstellt, um Browser darüber zu informieren, ob zwei Versionen einer Datei identisch sind. Das Bereitstellungsdatum ist nur für den Inhalt von Belang. Schauen Sie sich unten an, wie die Dateien von Hash-Assets aussehen:
Screenshots
Das sieht unangenehm aus, aber jetzt erhalten Ihre Bilder, Stylesheets und JavaScript-Dateien durch diesen hinzugefügten zufälligen Code einen eindeutigen Namen: einen (eindeutigen) Hash. Jedes Mal, wenn Sie ein Asset ändern und den Erstellungsprozess erneut durchlaufen, ändert sich dieser Hash, der wiederum den Browsern signalisiert, dass sie dann und nur dann diese bestimmte Datei erneut herunterladen müssen. Die Datei ist dann effektiv abgelaufen, ein Vorgang, der als "Cache Busting" bezeichnet wird..
Erwähnenswert: Sie können auf Ihre Dateien genauso verweisen wie zuvor, aber während des Builds werden die Verweise in Ihrem HTML-Code aktualisiert, um diese Hash-Namen zu verwenden. Schau mal:
"/Build/index.html(.gz)":
"html
Accentsconagua