Das Folgende ist ein gesponserter Gastbeitrag von Mike Neumegen von CloudCannon. Diese Serie dreht sich darum, nicht nur eine Jekyll-Website zu erstellen, sondern sie dann durch CloudCannon einfach editierbar zu machen.
Artikelserie
In dieser Serie erstellen wir eine Website für ein fiktives Café namens Coffee Cafe. Dieses Tutorial fügt der Website ein Content-Management-System mit CloudCannon hinzu. CloudCannon ist ein Content-Management-System für Jekyll und statische Websites. Es ermöglicht Ihrem Team/Ihren Kunden, Inhalte inline zu aktualisieren und die Vorteile einer statischen Website beizubehalten.
Wir werden die Coffee Cafe-Website hosten, editierbare Bereiche definieren und sie mit einem nicht-technischen Mitarbeiter teilen.
Setup
Beginnen Sie mit der Registrierung für ein (kostenloses) CloudCannon-Konto.
Der erste Bildschirm, den Sie sehen, ist das Dashboard, auf dem Sie Ihre Websites in CloudCannon erstellen und darauf zugreifen. Erstellen Sie eine Website und nennen Sie sie Coffee Cafe.
Um Dateien zur Website hinzuzufügen, laden Sie die Website hoch, die wir aus dem vorherigen Tutorial erstellt haben, indem Sie die Quelldateien in den Browser ziehen. CloudCannon unterstützt auch die Synchronisierung von Dateien mit GitHub, Bitbucket und Dropbox.
Um die Jekyll-Website zu konfigurieren und CloudCannon mitzuteilen, dass es Jekyll für unsere Website verwenden soll, benötigen wir eine Konfigurationsdatei. Erstellen Sie eine leere Datei über das Menü "Dateien hinzufügen" in der oberen rechten Ecke und nennen Sie sie _config.yml.
Wenn sich eine Datei ändert, baut CloudCannon die Website auf und veröffentlicht sie unter einer *.cloudvent.net-Adresse. Klicken Sie auf den Link oben, um Ihre Live-Coffee-Cafe-Website anzuzeigen.
Inhalte bearbeiten
Nicht-Entwickler aktualisieren Inhalte in CloudCannon mit editierbaren Regionen, die von Entwicklern definiert werden. Editierbare Regionen sind HTML-Elemente mit der Klasse editable. Um dies hinzuzufügen, öffnen Sie den Code-Editor, indem Sie auf die Datei index.html klicken.
Fügen Sie die Klasse editable zu HTML-Elementen hinzu, die Nicht-Entwickler aktualisieren sollen. Dieses Beispiel macht ein ganzes div editierbar
<div class="column third editable">
<div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg" alt="search" width="100" data-cms-original-src="/images/search.svg"></div>
<h3>Improve</h3>
Our customers rank up to 20% higher on their targeted keywords
</div>Dieses Beispiel beschränkt die Bearbeitung auf einige Elemente innerhalb des div
<div class="column third">
<div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg" alt="search" width="100" data-cms-original-src="/images/search.svg"></div>
<h3 class="editable">Improve</h3>
Our customers rank up to 20% higher on their targeted keywords
</div>Speichern Sie Ihre Änderungen und öffnen Sie den visuellen Editor in der oberen rechten Ecke, um die editierbaren Regionen in Aktion zu sehen. Im visuellen Editor können Inhalte innerhalb einer gelben Box inline aktualisiert werden.
Teilen mit Nicht-Entwicklern
Das Teilen der Website mit anderen Mitarbeitern ermöglicht es ihnen, an den Inhalten zusammenzuarbeiten. Gehen Sie zu Site Settings -> Sharing, geben Sie die E-Mail-Adresse eines Kollegen ein, setzen Sie die Berechtigungsstufe auf Non-Developer und drücken Sie Add Share.
CloudCannon sendet eine E-Mail, in der sie eingeladen werden, die Website zu bearbeiten.
Die Nicht-Entwickler melden sich an, öffnen die Coffee Cafe-Website im visuellen Editor und aktualisieren die editierbaren Bereiche.
Sie können den Seitentitel und andere Metadaten im Einstellungsfenster aktualisieren, auf das Sie über die Schaltfläche Einstellungen in der oberen rechten Ecke zugreifen können. Die CloudCannon-Dokumentation enthält detaillierte Optionen zur Steuerung der Front-Matter-Oberfläche.
Bloggen
Das Bloggen ist möglich, indem Sie in der linken Seitenleiste zu Collections -> Posts gehen.
Um einen neuen Entwurfspost zu erstellen, verwenden Sie das Menü "Dateien hinzufügen" in der oberen rechten Ecke. Neue Entwürfe und vorhandene Blogbeiträge werden in einem einfach zu bedienenden Editor geöffnet. Es gibt Optionen zum Speichern von Änderungen und zum Veröffentlichen von Entwürfen.
Status
Auf der Statusseite finden Sie Vorschläge, den Status und eine Historie der auf der Website vorgenommenen Änderungen.
Workflows
Lokales Arbeiten ist großartig für Entwickler, da Sie Ihre vorhandenen Werkzeuge nutzen können. Behalten Sie diesen Workflow bei, indem Sie Ihre Website von GitHub oder Bitbucket mit CloudCannon synchronisieren und Änderungen mit git push veröffentlichen. CloudCannon nimmt die Änderungen auf, baut die Website auf und veröffentlicht sie live. Wenn Nicht-Entwickler Inhalte in CloudCannon aktualisieren, werden die Änderungen live veröffentlicht und im Repository committet.
Sie können mehrere Umgebungen (z. B. Staging und Produktion) mit Git-Branches haben. Richten Sie für jede Umgebung einen Git-Branch ein und erstellen Sie für jeden Branch eine CloudCannon-Website. Arbeiten Sie in Staging und mergen Sie dann Änderungen in die Produktion, alles innerhalb von CloudCannon.
Unsere editierbare Website
Die Coffee Cafe-Website ist jetzt live und mit CloudCannon editierbar. Die fiktiven Mitarbeiter aktualisieren Inhalte selbst ohne Code. Entwickler arbeiten lokal mit ihren bevorzugten Code-Editoren und pushen Änderungen mit Git.
Wie speichert CloudCannon die editierbaren Inhalte?
Hallo,
Alle Inhalte werden zurück in den ursprünglichen Quellcode gespeichert. Das bedeutet, dass alle Inhaltsänderungen zurück auf GitHub, Bitbucket oder Dropbox gepusht werden, wenn Sie diese verbunden haben.
Mike
Ich denke, es wäre hilfreich, die Dateien zu zeigen, die CloudCannon generiert und an den Jekyll-Compiler weiterleitet, damit die Leser besser verstehen, was vor sich geht und die Automatisierung durch CloudCannon würdigen können.
Die Art und Weise, wie der Teil 2 des Artikels geschrieben ist, hat nichts mit Jekyll zu tun (außer der Tatsache, dass CloudCannon zufällig Jekyll im Hintergrund verwendet).
Ich denke, anstatt dass CloudCannon "im Hintergrund Jekyll verwendet", bietet CloudCannon eher eine Benutzeroberfläche für Ihre Jekyll-Website. Es werden keine magischen Dateien generiert, es wird lediglich eine Möglichkeit geboten, die Markdown-Dateien für Blogs oder die HTML-Dateien zu bearbeiten. Aus Sicht des Quellcodes ist es genau dasselbe wie eine normale Jekyll-Website. Es ist nicht so, dass CloudCannon dies automatisiert, sondern dass es einem nicht-technischen Benutzer ermöglicht, eine Jekyll-Website zu aktualisieren.
Es ist erwähnenswert die völlig kostenlose Alternative prose.io, die vor einigen Jahren von dem exzellenten DevelopmentSeed als Open Source veröffentlicht wurde. Ich benutze dies für alle meine Jekyll-Projekte.
Dieses Jekyll sieht cool aus. Nach dieser Artikelreihe habe ich viele wichtige Nützlichkeiten über dieses Jekyll-Content-Management-System entdeckt. Es ähnelt stark anderen Enterprise-Web-Content-Management-Diensten, bei denen es neuerdings unterschiedliche Editoren für Front-End- und Back-End-Entwickler gibt. Jekyll CMS bietet Werkzeuge zur Gestaltung skalierbarer und sicherer statischer Websites, indem es CloudCannon nutzt, um die Seiten automatisch zu optimieren und über CDNs in verschiedenen Regionen zu verteilen. Die einfach zu bedienende Benutzeroberfläche und die Möglichkeit, bis zu einem gewissen Grad zu erweitern, machen Jekyll zu einem guten CMS für statische Websites, obwohl es schwierig ist, komplexe Websites darin unterzubringen. Verwenden Sie Sitefinity CMS, WordPress, Drupal oder Umbraco für die Verwaltung komplexer Websites.