Share
Octopress ist ein statisches Blogging-Framework, das auf Jekyll basiert. Es verwendet Skripts zum Erstellen statischer Dateien, die auf einem Server bereitgestellt werden sollen.
… Wir erklären hier alles richtig. Wenn Sie jedoch noch nie die Befehlszeile berührt haben, möchten Sie möglicherweise zuerst eine kleine Einführung. In diesem Handbuch finden Sie einige grundlegende Befehle und Funktionen.
Browser lesen HTML, CSS und JavaScript nativ. Jede andere Sprache wird verwendet, um diese drei Dateitypen zu generieren. Statische Sites werden aus hartcodierten statischen Dateien erstellt, die nicht auf Serverprozessen angewiesen sind (im Gegensatz zu PHP oder anderen serverseitig generierten Sites). Jekyll, das zugrunde liegende Framework, verlässt sich stattdessen auf die lokale Umgebung des Content-Editors, um die statischen Dateien zu generieren, die schließlich bereitgestellt werden.
Angenommen, Sie haben beispielsweise fünf Blogeinträge in Ihrem Wordpress-Blog. Wenn Sie http://yoursite.com besuchen, werden Auszüge aus diesen fünf Beiträgen auf Ihrer Startseite angezeigt. Sie klicken auf einen Link, um zur vollständigen Postseite zu gelangen. Jede dieser Seiten wird Ihrem Browser als HTML im CSS-Format bereitgestellt. Möglicherweise verfügen Sie nicht über JavaScript, mit dem interaktives Verhalten definiert werden kann.
Die Seiten in Ihrem Wordpress-betriebenen Blog sind im Nu gebaut. Datenbankabfragen werden ausgeführt, um die verschiedenen Teile wie Titel, Inhalt oder Permalink abzurufen. Diese werden dann für jede Anfrage zurückgegeben und von PHP verarbeitet (vorausgesetzt, Sie haben kein Caching-Plugin installiert)..
Bei Jekyll sind die Dinge anders.
Ich bin froh, dass du gefragt hast. Jekyll macht das alles weiter dein Computer, bevor die Dateien auf den Server gelangen. Es liest einige lokale Konfigurationen und Vorlagen und erstellt dann alle HTML-, CSS- und JavaScript-Dateien direkt auf Ihrem lokalen Computer, sodass Ihr Server dies nicht muss. Dies macht Ihre Server-Administration wesentlich einfacher, sicherer und einfacher schneller.
Auf diese Frage gibt es einige Antworten. Hier sind drei:
Welche Probleme löst dieser Ansatz also nicht? Nun, zum einen, wenn Ihre Site von vom Benutzer erstellten Daten abhängt, geben statisch generierte Sites insgesamt wenig Platz dafür. Wenn Sie sich bei Kommentaren nur auf eine Datenbank verlassen, können Sie dies natürlich leicht in etwas wie Disqus verlagern. Wenn Sie sich auf Live-Daten verlassen, die nicht per JavaScript vom Frontend abgerufen werden können, sind statische Websites möglicherweise nicht für Ihre Anforderungen geeignet.
Der beste Fall: Blogs oder inhaltsorientierte Websites, die von Webentwicklern verwaltet werden. Vielleicht haben Sie das mit dem Octopress-Slogan "Ein Rahmen für Blogger für Hacker" entdeckt.
webuild.envato.com - erstellt mit Octopress, verwaltet vom Envato-Entwicklerteam Octopress und Jekyll eignen sich im Allgemeinen nicht für einen nicht-techorientierten Content-Ersteller. Wenn Sie jedoch bereit sind, genug Zeit zu verbringen, um diesen Beitrag zu lesen, sind Sie für eine Octopress-basierte Website gut geeignet.
Wenn Sie verstehen, dass alle Ihre Benutzer HTML, CSS und JavaScript sehen, ist dies das wahre Geheimnis des Webs. Für das lokale Testen Ihrer Octopress-Site sind daher keine Apache-, PHP- oder MySQL-Server-Installationen erforderlich. Sie benötigen lediglich einen Browser, der lokale Dateien ausführen kann.
Jede gute Sache hat einen Preis; Sie müssen Ruby Version 1.9.3 sowie die Jekyll- und Bundler-Ruby-Gems sowie Git installiert haben. (Git ist zwar nicht unbedingt erforderlich, kann es aber auch sein.) Sobald diese Teile installiert sind, können Sie mit der Entwicklung beginnen. Um Git zu installieren, gehe hier.
Die folgenden Anweisungen gelten für Mac. Ähnliche Befehle können für Windows über einen Ruby-Versionsmanager für Windows namens "pik" gefunden werden.
Prüfen Sie zunächst, welche Version von Ruby Sie auf Ihrem Computer installiert haben Rubin -v. Wenn die Version nicht 1.9.3 ist, fahren Sie mit diesen Anweisungen fort. Sie können mit "Tricky Part Nummer 2: Gems" fortfahren, wenn Sie bereits 1.9.3 haben.
Die Installation von Ruby Version 1.9.3 ist mit RVM relativ einfach zu bewerkstelligen. Mit RVM oder Ruby Version Manager können Sie mehrere Ruby-Versionen auf Ihrem System installieren, ohne vorherige Versionen löschen zu müssen. Die Schnellinstallationsanweisungen für RVM und Ruby 1.9.3 lauten wie folgt:
\ curl -L https://get.rvm.io | bash -s stable --ruby = 1.9.3
Hinweis: wenn Sie Probleme haben gcc (oder die "gnu compiler collection", die zum Erstellen von Ruby aus der Quelle benötigt wird), kann es hilfreich sein, stattdessen die folgenden Befehle auszuführen.
\ curl -L https://get.rvm.io | bash -s stable CFLAGS = "- Wno-error = Verkürzung von 64-auf-32" rvm install ruby-1.9.3-p392
Alternativ kann die Installation von XCode dazu beitragen, viele Probleme für Mac-Benutzer im Zusammenhang mit GCC zu lösen. In diesem Thread auf GitHub findest du weitere Informationen zum Thema.
Um sicherzustellen, dass Ruby 1.9.3 erfolgreich installiert wurde, führen Sie es aus rvm liste. Nach Abschluss dieses Vorgangs können Sie Folgendes ausführen, um die Standard-Version von Ruby auf 1.9.3 festzulegen:
rvm --default use 1.9.3
Um zu überprüfen und sicherzustellen, dass 1.9.3 ausgewählt wurde, können Sie erneut ausführen Rubin -v. Dadurch wird die aktuelle Ruby-Version ausgedruckt.
RubyGems ist ein Codepaketmanager für die Programmiersprache Ruby. Einer der Hauptgründe, warum Rubys Community sich den Ruf erworben hat, hilfreich und vereinheitlicht zu sein. Benutzer können Open-Source-Code-Pakete direkt über die Befehlszeile installieren. Diese Edelsteine werden an offiziellen Aufbewahrungsorten gelagert.
Um die Ruby-Edelsteine zu installieren, führen Sie die folgenden Befehle über die Befehlszeile aus. (Wenn Sie RubyGems noch nicht installiert haben, befolgen Sie die Anweisungen hier, bevor Sie diese Befehle ausführen. Sie können überprüfen, ob RubyGems installiert ist, indem Sie ausführen welcher Edelstein von der Kommandozeile aus, die nach dem sucht Juwel ausführbares Programm, das zum Installieren von Gems verwendet wird.)
gem install jekyll gem install Bundler
Dadurch werden die Jekyll- und Bundler-Edelsteine heruntergefahren und an einem Ort auf Ihrem Computer gespeichert, den Ruby automatisch als Sortierbibliothek verwendet, die als "Gemset" bezeichnet wird. Jekyll ist der mächtige Generator für statische Sites hinter Octopress. Bundler ist ein Spezifikationsformat für Gem-Installationen, mit dem die Abhängigkeiten von Gems leichter erfüllt werden können. Mit anderen Worten, Sie können die benötigten Edelsteine in einer einfachen Datei mit dem Namen Gemfile, und Renn Bundle installieren im selben Verzeichnis, um alle Edelsteine aufgelistet zu bekommen (anstatt sie einzeln per Hand zu installieren).
Zunächst sollten Sie Octopress in ein Verzeichnis ziehen, in dem Sie Ihre Site aufbewahren. Im Gegensatz zu den meisten datenbankgesteuerten Sites spiegelt Ihre Live-Site im Allgemeinen Ihre lokale Site, sowohl inhaltlich als auch in der Darstellung. Wir kopieren das Remote-Git-Repository in einen Ordner mit dem Namen "mysite" im Sites-Verzeichnis. (Dies ist insbesondere für Mac-Benutzer eine gute Standardeinstellung.)
cd ~ / Sites git clone git: //github.com/imathis/octopress.git mysite
Nachdem Sie dies getan haben, möchten Sie in das Verzeichnis wechseln und das Bundle installieren.
cd mysite bundle install
Dadurch wird eine Sammlung von Edelsteinen installiert, wenn diese derzeit nicht auf Ihrem Computer installiert sind.
Ihr Verzeichnisinhalt sollte an dieser Stelle so aussehen… Als Nächstes sollten Sie das Standarddesign von Octopress installieren.
Rake installieren
Ihr Verzeichnisinhalt sowie die Designdateien Wissenswert: Rechen ist ein Ruby Script Runner. Es liest aus einem "Rakefile", das Anweisungen für die Rechen Befehl.
Die Octopress-Site bietet einen umfassenden Überblick über die Blog-Konfigurationen, die in gefunden werden _config.yml. Schau es dir hier an. Hier ist ein Beispiel:
url: http://myblog.com title: Mein Super-Blog-Untertitel: Ein Superautor: Jonathan Cutrell simple_search: http://google.com/search description: Eine Website, die erklärt, wie Octopress funktioniert. date_format: "ordinal" subscribe_rss: /atom.xml # Dies ist die Standardeinstellung # subscribe_email: --- Wir haben momentan noch keine. category_feeds: # Aktiviert pro Kategorie RSS-Feeds (Standardeinstellung ist "false" in 2.1) E-Mail: # E-Mail-Adresse für den RSS-Feed, falls gewünscht.
Es gibt auch eine Reihe von Plugins und eine Reihe weiterer Konfigurationen für Jekyll, die optional sind. Wir werden nicht alles abdecken, da wir nur versuchen, vom Boden loszukommen und zu rennen.
Die Einstellungen von Drittanbietern können im ausgefüllt werden _config.yml Datei; Diese werden zum Zeitpunkt der Erstellung der Site ausgewertet und ermöglichen eine einfache Integration mit externen Diensten. Hier ist zum Beispiel eine einfache GitHub-Integration:
# Github-Repositorys github_user: jcutrell github_repo_count: 14 github_show_profile_link: true github_skip_forks: true
Hinweis: All dies ist bereits in der Datei _config.yml enthalten. Füllen Sie es einfach aus, um die integrierten Funktionen zu nutzen.
Gut! Sie können sehr schnell mit dem Verfassen eines Posts beginnen. Die Syntax zum Erstellen eines Beitrags (gemäß den Dokumenten) ist einfach:
rake new_post ["Some Awesome Title"]
Hinweis: Wenn Sie ZSH verwenden, müssen Sie dieses Update in GitHub überprüfen und einen Alias zu Ihrer Zshrc-Datei hinzufügen.
mysite / source / _posts / 2013-03-27-some-awesome-title.markdown Dadurch wird eine Datei für Ihren Beitrag in Ihrem erstellt Quelle / _posts Verzeichnis. Standardmäßig wird der Beitrag als Markdown-Datei erstellt. Der Name des Beitrags definiert die URL (dies ist übrigens eine gute Sache für SEO). Wenn Sie zu der neu erstellten Datei navigieren, werden einige Standard-YAML-Inhalte angezeigt. Hier können Sie eine oder mehrere Kategorien hinzufügen. Zum Beispiel:
--- Layout: Beitragstitel: "Some Awesome Title" Datum: 2013-03-21 00:11 Kommentare: wahre Kategorien: [Awesome, Amazing, Beautiful, Cool] ---
Sie können dann Ihren Inhalt unterhalb der Frontsache hinzufügen.
Um Ihren neuen Blogbeitrag zu sehen, starten Sie zuerst Rechenvorschau, Dann verweisen Sie mit Ihrem Browser auf localhost: 4000. Dadurch wird Ihr Beitrag auf der Indexseite angezeigt!
Klicken Sie auf die Benutzeroberfläche, um ein Gefühl für die Benutzeroberfläche und ihre Funktionen zu erhalten. Hinweis: Das Standarddesign ist ansprechend! In kürzester Zeit haben Sie einen statischen Blog zum Laufen gebracht.
Um eine Seite (und nicht einen Beitrag) zu erstellen, führen Sie Folgendes aus.
rake new_page [über]
mysite / source / about / index.markdown Dies erstellt eine Seite um source / about / index.markdown. Sie können auch ausführen:
rake new_page [about / index.html]
Welches wird das auswählen .html Dateityp statt Markdown. Auf dieser Seite können Sie auf die gleiche Weise wie Posts Änderungen vornehmen.
Wenn Sie einen Beitrag erstellen, können Sie ihn direkt mit einer externen Seite verknüpfen, ähnlich wie die Seitenverknüpfungen mit dem Wordpress-Plugin (aber viel weniger kompliziert)! Setzen Sie einfach die vordere Angelegenheit yaml so, dass sie Folgendes enthält:
externe-url: http://yourexternallink.com
Eine weitere großartige Frage. Du bist auf der Rolle.
Wie bereits erwähnt, ist alles, was ein Browser liest, HTML, CSS und JavaScript (vorausgesetzt, Sie verwenden weder Flash noch eine andere externe Technologie). Wenn Sie sich auf eine serverorientierte Implementierung verlassen, können sich HTML, CSS und JavaScript in dem Moment ändern, in dem der Benutzer die Seite lädt. Die Anforderung an den Server führt Code aus HTML direkt erstellen basierend auf was auch immer der Code zurückgibt.
Bei einer Site wie Wordpress verweisen beispielsweise die Links zu Seiten und Posts auf Weblayouts, die die richtigen Informationen aus der MySQL-Datenbank holen, sobald der Benutzer auf die Site zugreift.
Octopress (und insbesondere Jekyll) durchläuft einen sehr ähnlichen Prozess, aber anstatt es auf Anfrage zu tun, wird es nur einmal auf Ihrem lokalen Computer ausgeführt.
So funktioniert das. Eine Jekyll-Site besteht aus drei Grundelementen: der Konfiguration, den Layouts / Includes und den Beiträgen / Seiten. Wenn Sie aus der Wordpress-Welt kommen, können diese den Optionen, den Designdateien bzw. der Datenbank zugeordnet werden (mit undeutlichen Linien hier und da)..
Wenn Jekyll den Prozess zum Generieren der Site durchläuft, beginnt diese bei der Indexdatei und erstellt alle verknüpften Seiten, die durch die Layouts definiert werden. Während des gesamten Buildouts verwendet Jekyll Konfigurationen, die durch _ definiert werden.config.yml Datei sowie die YAML-Front-Angelegenheit in Beiträgen, Seiten und Layouts. Jekyll verwendet die statischen Post- und Seitendateien als eine Sammlung von aufzählbaren Objekten und füllt den Inhalt in alle zugehörigen Layouts.
Das Endergebnis ist ein wartbarer DRY-Satz von Quelldateien im Quelle Verzeichnis und einheitlich generierte statische Inhalte im Öffentlichkeit Verzeichnis.
Der öffentliche Ordner wird mit jeder Seite der Site gefüllt. Dies bedeutet, dass immer wenn Sie eine Seite sehen, egal ob es sich um eine paginierte Liste von Beiträgen, um eine 404-Seite oder um eine Info-Seite handelt, es sich tatsächlich um eine einzelne HTML-Seite handelt, die Sie direkt im öffentlichen Ordner anzeigen können.
Ein kurzer Blick in den öffentlichen Ordner zeigt Ihnen einige Dinge. Erstens ist die Verzeichnisstruktur leicht navigierbar, da ein standardmäßiger, von Apache betriebener statischer Server unter einer URL bereitgestellt wird, die der Verzeichnisstruktur entspricht. Die zweite Feststellung ist, dass zwei gegebene HTML-Dateien einen sehr ähnlichen Inhalt haben. Dies ist ein Ergebnis des kopierten Headers, Footers und Sidebar-Inhalts Layouts und beinhaltet, das ist völlig akzeptabel. Der Grund, warum dies völlig akzeptabel ist, ist einfach: Der Inhalt im öffentlichen Verzeichnis wird nicht direkt von Ihnen verwaltet, sondern durch programmgesteuerte Aktionen. Daher ist DRY nicht anwendbar, da dies die Wartbarkeit oder Leistung der Website nicht beeinflusst geringfügig.
Als Designer wird dies der Teil sein, auf den Sie gewartet haben.
Octopress ist sicherlich für den Blogger gedacht. Mit einigen sehr direkten Informationen darüber, wie Sie das Thema ändern sollten, wurde erklärt, wie Sie die Dateien verwenden, die im Ordner gefunden werden quelle / gewohnheit in diesem Führer. Kurz und bündig: Octopress wurde für Blogbeiträge und -seiten sowie für benutzerdefinierte Inhalte für die Seitenleiste und den Fußbereich erstellt. Sie können die Seitenleiste jedoch problemlos erweitern. Das unterstützte Muster besteht darin, eine neue HTML-Datei darin zu erstellen Quelle / Brauch / Beilagen / mit Inhalten, die diesem Format folgen:
Irgendein Titel
Foo, Bar
Sie können die Kopf- und Fußzeile auch einfach ändern quelle / gewohnheit. Dies macht es einfach, weitere JS / CSS-Dateien hinzuzufügen, die Standard-Google-Schriftarten usw. zu ändern oder zu entfernen.
Octopress wird mit SCSS gebaut. Das Design kann mit Hilfe von geändert werden sass / custom / _styles.scss Datei. Diese Datei ist zuletzt enthalten. Um wirklich zu verstehen, wie man Octopress stylen kann, müssen wir zuerst in die Kernvorlagen eintauchen.
Hinweis: Ändern Sie die Kernvorlagen nicht, wenn Sie nicht ganz sicher sind, was Sie tun, oder wenn Sie etwas kaputt machen möchten. Dies sind die Dateien, die den endgültigen Build Ihrer statischen Site definieren!
Octopress bietet die Möglichkeit, Themen einfach zu wechseln. effektiv kopiert das Quellverzeichnis. In dem .themen Verzeichnis sehen wir das "klassische" Design, das beim Laufen installiert wurde Rake installieren. Die Quelldateien für das Design werden in das Verzeichnis der obersten Ebene kopiert und zum Erstellen der statischen Site verwendet.
Im Quellordner finden wir einige offensichtliche Themenordner.
Die Dateien im Ordner _layouts Definiert die allgemeinen Layouts von Beiträgen, Seiten, Kategorieindizes und die "Standardeinstellung". Hierbei handelt es sich um eine Fallback-Vorlage, um alles zu erfassen, das nicht zu den ersten drei gehört. Die Mappe _partials erlaubt es, nur Teile von Dateien, wie die Navigation oder nur den Artikel, selbst einzubinden. Bei diesen Dateien handelt es sich um flüssigkeitsbasierte HTML-Vorlagen, die die Weitergabe von Daten ermöglichen. Diese Daten stammen von den YAML-Front-Matter-Sets an verschiedenen Stellen der Site. Betrachten Sie beispielsweise das flüssige Etikett von _partials / article.html unten.
% if site.disqus_short_name und page.comments! = false und post.comments! = false und site.disqus_show_comment_count == true% | Kommentare % endif%
Dieses Tag sagt folgendes:
Wenn der Benutzer den disqus-Kurznamen in der Hauptkonfiguration der Site festgelegt hat und die Kommentare für diese Seite oder diesen Beitrag aktiviert sind und die Site so konfiguriert ist, dass die Anzahl der Disqus-Kommentare angezeigt wird, geben Sie den Link in der nächsten Zeile aus. Der Link verweist auf root_url und post.url, wenn wir uns auf der Indexseite befinden. Andernfalls wird direkt auf #disqus_thread verwiesen, ein div, das die Kommentare enthält.
Wenn Sie dies verstehen, können wir verstehen, wie Sie bestimmte Teile der Website finden und umgestalten oder umgestalten können. Wenn wir zum Beispiel eine Klasse zu Beiträgen hinzufügen möchten, die direkte externe Links sind, können wir so etwas tun.
% if page.external-link oder post.external-link%content | Auszug% else%content | Auszug% endif%
Dies prüft einfach, ob page.external-link oder post.external-link existiert. Wenn dies der Fall ist, fügen wir ein zusätzliches div hinzu div.eintragsinhalt Element. Es gibt viele Möglichkeiten, die Sie mit der einfachen Konfiguration von YAML-Front-Mats nutzen können. Stellen Sie sicher, dass Sie experimentieren und neue Lösungen für neue Probleme finden!
Es gibt so viel mehr Leistung in Octopress! Sehen Sie sich die ausführliche Dokumentation an und verpassen Sie nicht diese umfangreiche Liste von Octopress-Plugins von Drittanbietern. Mit fast sechzig Plugins kann die Integration mit Drittanbieter-Diensten viele häufige Implementierungsanforderungen und -probleme lösen.
Kommentieren Sie unten mit Ideen für andere Funktionen, die Sie möchten. Und denken Sie daran, der beste Weg zu lernen ist, sich die Hände schmutzig zu machen. Holen Sie sich in die Dokumente und den Code; zerbreche die Dinge und repariere sie. Lerne, wie du gehst!
Probleme haben? Benötigen Sie weitere Anleitungen oder suchen Sie jemanden, der sich Ihren Code anschaut und zeigt, wo alles schief gelaufen ist? Tuts + ist ein großartiger Ort, um zu sein! Wir waren alle dort, also sei nicht schüchtern. Setzen Sie Ihre Fragen in die Kommentare! Wenn Sie sich großzügig fühlen und jemand in dem Kommentarthread ein Problem hat, können Sie ihm gerne helfen!
Accentsconagua