In questo articolo vorrei mostrare i passi per l’installazione di un CMS realizzato per siti pseudo-statici realizzati con Jekyll.
Un blog realizzato con Jekyll può essere gestito inserendo gli articoli in markdown all’interno della cartella Post.
Di solito gli articoli in Markdown seguono delle convenzioni da rispettare come i front YAML per impostare i parametri quali titolo, sottotitolo, tag, immagini ed altro ancora.
Per un blogger alla prima esperienza sono cose tecniche, non immediate.Si può ovviare utilizzando alcuni strumenti chiamati Markdown Editor che permettono in maniera visiva semplice di comporre i propri articoli in sintassi Markdown.
Esistono sia editor online ( consiglio StackEdit ) oppure per editing offline si può scegliere un editor da installare sul pc ( e tra questi consiglio Laverna ). Entrambi hanno funzionalità di sincronizzazione e pubblicazione su cloud o Github, quindi risultano molto comodi.
In alcuni casi può tornare invece utile usare un CMS per creare articoli per il proprio Blog.
Esistono diversi CMS per siti statici realizati con Jekyll o Hugo o altri sistemi di generazione di siti statici. Tra questi ci sono Siteleaf oppure Forestry.
Io invece ho provato ad installare NetlifyCMS che essendo realizzato da Netlify risulta comodo poichè integrato con Github, soluzione ottima per gestire il proprio sito e il version control. Inoltre Netlify permette l’hosting gratuito di un proprio sito con la possibilità di caricarlo da un repository di Github.
Prima di tutto per procedere con l’installazione bisogna creare una cartella admin nella radice del proprio sito. Poi bisogna creare un file index.html e un file config.yml all’interno della cartella admin.
Il file Index.html deve avere il seguente contenuto
<head>
<link href="https://unpkg.com/netlify-cms/dist/cms.css" rel="stylesheet"/>
</head>
<body>
<script src="https://unpkg.com/netlify-cms/dist/cms.js"></script>
</body>
Mentre il file config.yml deve avere il seguente contenuto
backend:
name: test-repo
media_folder: media_folder
collections:
- name: post
label: Post
folder: posts
create: true
fields:
- {name: title, label: Title}
- {name: body, label: Body, widget: markdown}
Ora la base del pannello è pronta ma bisogna configurarla in base alla propria necessità poichè il formato dei post può cambiare. Prima di tutto si deve impostare il backend che può avere diversi valori, nel caso il sito sia ospitato su Github si può inserire github e poi il nome del repository che ospita il codice sorgente del sito. Si possono impostare le cartelle per le risorse:
- media folder: per le risorse video o immagini
- public folder: per le risorse in upload da parte degli utenti
Poi viene la parte più complessa; individuare e configurare le collezioni che sono le risorse principali gestite dal CMS. Le risorse principali di norma sono Post e Pagine e quindi le due collezioni indispensabili sono Post e Pages. Di seguito un esempio di configurazione basilare ma completo per modificare pagine e post utilizzando il CMS
- name: "post" # Used in routes, e.g., /admin/collections/blog
label: "Posts" # Used in the UI
folder: "_posts/" # The path to the folder where the documents are stored
sort: "date:desc" # Default is title:asc
create: true # Allow users to create new documents in this collection
slug: "---" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Layout", name: "layout", widget: "hidden", default: "post"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Featured Image", name: "image", widget: "image",required: false}
- {label: "Tags", name: "tags", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
- {label: "Comments", name: "comments", widget: "boolean"}
meta: # Meta data fields. Just like fields, but without any preview element
- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD hh:mm:ss"}
- name: "page" # Used in routes, ie.: /admin/collections/:slug/edit
label: "Pages" # Used in the UI, ie
label_singular: "Page" # Used in the UI, ie.: "New Post"
folder: "/" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: ""
fields: # The fields each document in this collection have
- {label: "Layout", name: "layout", widget: "hidden", default: "post"}
- {label: "Title", name: "title", widget: "string", tagname: "h1"}
- {label: "Featured image", name: "feature_image", widget: "image", required: false}
- {label: "Feature text", name: "feature_text", widget: "markdown", required: false}
#- {label: "Excerpt", name: "excerpt", widget: "string", required: false}
- {label: "Body", name: "body", widget: "markdown"}
- {label: "Meta image", name: "image", widget: "image", required: false}
Ora dopo aver completato la configurazione di base bisogna configurare l’autenticazione; il metodo più semplice risulta essere utilizzando github. Per poterlo fare bisogna però creare i token all’interno di Github e poi inserirli all’interno di Netlify.
Per creare il token bisogna andare all’interno del proprio profilo di Github e poi impostazioni sviluppatore. Bisogna poi registrare una nuova OAuth per applicazioni inserendo i valori corrispondenti al proprio sito e poimettendo nel campo Callback URL il valore https://api.netlify.com. Infine verranno associate a tale token dei valori ID e Secret che dovranno essere inseriti all’interno del proprio account Netlify nella voce Access Control -> OAuth.
Al primo tentativo di login bisognerà abilitare l’autorizzazione per il proprio repository ed il gioco è fatto.
Per accedere al pannello di admin basta digitare l’indirizzo nel seguente formato : https://www.nomesito.com/admin/#/
Comunque ecco alcuni link utili per installare Netlify CMS:
Sono sempre disponibile per correzioni e suggerimenti.
Grazie e alla prossima!