So erstellen Sie ein statisches Blog mit Cactus [OS X]

Aktualisieren: Die Cactus-App wurde eingestellt.

Wenn Sie kein CMS benötigen und lieber eine statische Website oder ein Blog haben möchten, ist Jekyll ein gutes Werkzeug, um eine Chance zu nutzen. Wenn Sie jedoch ein Tool mit einer grafischen Benutzeroberfläche bevorzugen, anstatt mit Befehlszeilentools zu arbeiten, möchten Sie vielleicht auschecken Kaktus.

Kaktus ist kostenlos statischer Standortgenerator ausgestattet mit leistungsstarken Tools, die Ihnen helfen können Erstellen Sie Websites lokal, schneller und einfacher mit modernen Web-Technologien. Es bietet Ihnen einen Ausgangspunkt in Ihrem Projekt mit 4 vordefinierten Vorlagen, sodass Sie sofort loslegen können.

Während Sie an Ihrem Projekt arbeiten, wird Cactus dies tun Überwachen Sie jede Änderung, die Sie an Ihrem Projekt vornehmen und den Browser automatisch aktualisieren So können Sie die Änderungen sofort auf Ihrem Mac oder mobilen Gerät sehen. Es unterstützt auch SASS / SCSS und Coffescript, so dass jede Änderung an dieser Datei automatisch generiert wird.

Loslegen

Zunächst müssen Sie Cactus von der Homepage herunterladen und anschließend die Installation ausführen. Wenn Sie fertig sind, öffnen Sie es und Sie sehen vier Schaltflächen: Erstellen, Bereitstellen, Bearbeiten und Vorschau.

Klicken Sie auf, um ein neues Projekt zu erstellen Erstellen. Dort werden 4 Vorlagen angezeigt. Für dieses Tutorial gehen wir mit der Blog-Vorlage. Klicken Erstellen.

Sie werden aufgefordert, den Namen Ihres Projekts anzugeben und den Ort zu wählen, an dem sich das Projekt befindet. Hier gebe ich einen Namen “Mein toller Blog” für das Projekt. Danach sehen Sie Ihr Projekt bereits in Cactus.

Dateien ändern

Das mit der Blogvorlage erstellte Projekt ist jetzt in Ihrem Finder vorhanden. Wir werden nun die Elemente prüfen, die zum Erstellen unseres Blogs erforderlich sind. Gehen Sie zu dem Verzeichnis, in dem Ihre Dateien gespeichert sind. Die Hauptverzeichnisse, die wir verwenden werden, sind Vorlagen, Seiten, und Statisch Verzeichnis. Lassen Sie uns die anderen erst einmal überspringen.

Um es kurz zu halten: Hier ist, wozu jedes Verzeichnis dient:

• Vorlagen: Enthält HTML-Dateien, die sich als Vorlage verhalten und von HTML-Dateien auf Seiten verwendet werden, auf denen aufgebaut werden soll.
• Seiten: Enthält alle HTML-Dateien, die zu einer Seite mit demselben Pfad werden. zB: hello.html hier wird http://yoursite.com/hello.html
• Statisch: Enthält alle statischen Ressourcen wie CSS, Javascript und Bilder.

Jetzt werden wir drei Hauptdateien aus den Verzeichnissen bearbeiten: base.html und post.html im Templates-Verzeichnis und index.html im Verzeichnis Pages.

Kaktus verwendet Django Template Engine für die Templatiersprache. Damit können Sie HTML-Elemente aus anderen HTML-Dateien einfügen, sodass Sie keine Codes kopieren müssen. Die Funktionen, die hier am häufigsten verwendet werden, sind Vorlagenvererbung und Variable.

Um zu sehen, wie sie funktionieren, öffnen Sie zuerst die base.html im Vorlagenverzeichnis.

             % block content% Hauptinhalt % endblock content% ---   

base.html ist die einfache HTML-Datei, die wir als 'Skelett'-Vorlage verwenden. Es enthält allgemeine Elemente unserer Website. Sie können einige sehen “Blöcke” da drin; Wir werden die untergeordnete Vorlage verwenden, um diese Blöcke zu überschreiben.

Jetzt öffnen Sie die post.html befindet sich im selben Verzeichnis mit base.html.

 % erweitert "base.html"% % block title% title | Kaktus % Endblocktitel% % Blockinhalt% --- 
 
 Titel 
 
headline 
 
 
 % block body% Hier befindet sich der Beitragsinhalt. % endblock body% 
 --- % endblock content% 

Das post.html enthält das Markup für unsere Blogeintragsseite. In der ersten Zeile sehen Sie das post.html erweitert das base.html. Dies bedeutet, dass wir die Blöcke überschreiben werden base.html mit den Blöcken hier.

Wir können hier auch Variablen finden, wie zum Beispiel Titel und headline. Wir werden die Werte dieser Variablen später in den Blogeinträgen definieren.

Nun schauen wir uns das an % block body% Block. Dies wird durch die untergeordnete Vorlage überschrieben, die die Posteinträge unseres Blogs enthält.

Wechseln Sie in das Verzeichnis Seiten / Beiträge. Hier sind die restlichen Beiträge.

 title: My Post Entries-Überschrift: My Post Autor der Überschrift: Agus-Datum: 15-01-2015 % erweitert "post.html"% % block body% % filter markdown% elit. Earum, perferendis inventore dolorem rerum und tempora sint nemo illum ab saepe, Annahme, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

In den Post-Einträgen geben wir der Variablen einen Wert, wie Titel, Überschrift, Autor und Datum. Dieser Wert wird übergeben, wenn der Variablenname in der übergeordneten Vorlage aufgerufen wird. Dann schreiben wir den Inhalt unseres Blogs mit Markdown.

Jetzt gehen wir auf die Indexseite unseres Blogs index.html in dem Seiten Verzeichnis. Es enthält die Liste unserer Blogeinträge und den Link zu jedem Eintrag. Der Hauptcode sieht wie folgt aus:

 % erweitert "base.html"% % block content% -- 
 % for post in posts% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

An dieser Stelle haben wir ein einfaches Blog mit zwei Hauptseiten, der Indexseite das enthält die Blogeinträge und die Blogeintragsseite selbst.

Gehen Sie zum Cactus-Fenster und klicken Sie auf die Schaltfläche "Vorschau", um den Server zu starten. Es öffnet automatisch den Browser und öffnet Ihre Website.

Gestaltung des Blogs mit SCSS

Ein großartiges Feature von Cactus ist, dass es mit SASS / SCSS sofort funktioniert. Gerade Legen Sie Ihre .sass- oder .scss-Dateien ab in die statisch Verzeichnis und jedes Mal, wenn Sie die Dateien bearbeiten und speichern, generiert Cactus automatisch das CSS.

Ich werde hier ein Beispiel für die Gestaltung unseres Blogs mit bootstrap-sass geben. Angenommen, Sie verwenden Laube, öffnen das Terminal und navigieren zum statisch Verzeichnis unseres Projekts mit CD Befehl. Dann installieren Sie bootstrap-sass mit diesem Befehl:

$ bower install bootstrap-sass-official

Sobald der Download abgeschlossen ist, wird ein angezeigt bower_components Verzeichnis innerhalb des statischen Verzeichnisses Bootstrap-sass-offiziell.

Gehen Sie jetzt in dieses Verzeichnis: statisch / css. Erstellen Sie die SCSS-Datei und geben Sie den Namen an syle-bs.scss und fügen Sie diesen Code ein.

 @import "… / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

Der Code importiert alles von bootstrap-sass. Nachdem Sie style-bs.scss gespeichert haben, wird style-bs.css in demselben Verzeichnis generiert, das alle Stile von bootstrap enthält.

Stellen Sie Ihr Projekt bereit

Wenn Ihr Projekt fertig ist, können Sie es problemlos in der Live-Version bereitstellen mit Amazon S3.