Het bouwen van een Jekyll Site – Deel 2 van 3: het Toevoegen van een Jekyll CMS met CloudCannon

0
49

Het volgende is een gesponsorde gastpost door Mike Neumegen van CloudCannon. Deze serie is al over niet alleen het bouwen van een Jekyll site, maar dan is het toevoegen van eenvoudige bewerkbaarheid door CloudCannon.

Dit is een drie-delige serie:

Deel 1: het Omzetten van een Statische Website Naar Jekyll
Deel 2: (Deze post) Toevoegen van een Jekyll CMS met CloudCannon
Deel 3: het Maken van een Firebase-Back-Commentaar-Systeem

In deze serie willen we bouwen aan een site voor een fictieve café genaamd Koffie Café. Deze tutorial voegt een content management systeem om de website met CloudCannon. CloudCannon is een content management systeem voor Jekyll en statische sites. Het staat uw team/klanten om de informatie te updaten inline en houden de voordelen van een statische site.

Wij hosten de Koffie Cafe site, het definiëren van bewerkbare gebieden en delen met een niet-ontwikkelaar medewerker.

Installatie

Start door het aanmelden voor een (gratis) CloudCannon account.

Het eerste scherm dat u ziet is het dashboard, waar u toegang tot uw sites in CloudCannon. Het maken van een site en bel het Koffie Café.

Om bestanden toe te voegen aan de site, het uploaden van de site hebben we gemaakt uit de vorige tutorial door het slepen van de bron-bestanden in de browser. CloudCannon ook ondersteunt het synchroniseren van bestanden met GitHub, Bitbucket en Dropbox.

Voor het configureren van de Jekyll site en vertel CloudCannon te gebruiken Jekyll voor onze site, moeten we een configuratiebestand. Maak een leeg bestand van het Add Files-menu in de rechterbovenhoek en de naam van het `_config.yml`.

Wanneer een bestand is gewijzigd, CloudCannon bouwt de site en duwt hem live aan een *.cloudvent.net adres. Klik op de link bovenaan uw live-Koffie Cafe site.

Het bewerken van de Inhoud

Niet-ontwikkelaars update-inhoud in CloudCannon met bewerkbare gebieden gedefinieerd door de ontwikkelaars. Bewerkbare gebieden zijn HTML-elementen in de bewerkbare klasse. Om dit toe te voegen, opent u de code-editor door te klikken op de `index.html` bestand.

Voeg de bewerkbare klasse HTML-elementen wilt u niet-ontwikkelaars te werken. Dit voorbeeld maakt een hele div bewerkbare:

<div class=”kolom derde bewerkbare”>
<div class=”center-text”><img src=”//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg” alt=”zoeken” width=”100″ data-cms-origineel-src=”/images/zoeken.svg” /></div>
<h3>Verbeteren</h3>
<p>Onze klanten rang tot 20% hoger op hun gerichte zoekwoorden</p>
</div>

Dit voorbeeld beperkt bewerken naar een aantal elementen binnen de div:

<div class=”kolom derde”>
<div class=”center-text”><img src=”//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg” alt=”zoeken” width=”100″ data-cms-origineel-src=”/images/zoeken.svg” /></div>
<h3 class=”editable”>Verbeteren</h3>
<p class=”editable”>Onze klanten rang tot 20% hoger op hun gerichte zoekwoorden</p>
</div>

Sla uw wijzigingen op en open de visual editor in de rechter bovenhoek om te zien de bewerkbare gebieden in actie. In de visuele editor, de inhoud in een geel vak kan worden bijgewerkt inline.

Delen met Niet-Ontwikkelaars

Het delen van de site met andere medewerkers hen in staat stelt om samen te werken aan de inhoud. Ga naar Site-Instellingen -> Delen, voert u het e-mailadres van een collega, ingesteld toestemming niveau aan Niet-Ontwikkelaar en druk op de knop Delen.

CloudCannon stuurt een e-mail met de uitnodiging voor het bewerken van de site.

De niet-ontwikkelaars log in, open de Koffie Cafe site naar de visual editor en bijwerken van de bewerkbare gebieden.

Ze kunnen bijwerken van de pagina titel en andere metadata in het paneel instellingen, toegankelijk via de knop instellingen in de rechterbovenhoek. De CloudCannon documentatie gedetailleerde opties om de front kwestie interface.

Bloggen

Bloggen is beschikbaar via Collecties -> Berichten) op de linkerzijbalk.

Maken van een ontwerp voor een nieuwe post, gebruik de Add Files-menu in de rechterbovenhoek. Nieuwe concepten en bestaande blog posts openen in een eenvoudig te gebruiken editor. Er zijn opties voor het opslaan van wijzigingen en het publiceren van concepten.

Status

Er zijn suggesties, status en een geschiedenis van wijzigingen aan de site op de Status pagina.

Workflows

Lokaal werken is geweldig voor ontwikkelaars zo kunt u gebruik maken van uw bestaande instrumenten. Houd deze workflow door het synchroniseren van uw site vanaf GitHub of Bitbucket met CloudCannon, en git push to wijzigingen publiceren. CloudCannon pakt de wijzigingen, bouwt de website en publiceert het leven. Wanneer niet-ontwikkelaars update-inhoud in CloudCannon, de wijzigingen zijn gepubliceerd live en verbonden aan het archief.

U kunt meerdere omgevingen (bijvoorbeeld voor het organiseren en productie) met Git takken. Het opzetten van een Git branch voor elke omgeving en maak een CloudCannon site voor elke tak. Werken in de staging dan het samenvoegen van wijzigingen aan de productie, alle binnen CloudCannon.

Onze Bewerkbare Site

De Koffie Cafe site is nu live en bewerkt met CloudCannon. De fictieve personeel update zelf inhoud zonder code. Ontwikkelaars lokaal samen te werken met hun favoriete code-editors en duw wijzigingen met Git.

Dit is een drie-delige serie:

Deel 1: het Omzetten van een Statische Website Naar Jekyll
Deel 2: (Deze post) Toevoegen van een Jekyll CMS met CloudCannon
Deel 3: het Maken van een Firebase-Back-Commentaar-Systeem

Deel Op

Twitter

Facebook

Google+