Tutorial su Jekyll: Come Creare un Sito Web Statico

Avere un sito web è essenziale per stabilire una presenza online, promuovere il vostro brand e raggiungere potenziali clienti. Tuttavia, creare un sito web può essere un compito scoraggiante.

È qui che entrano in gioco i generatori di siti statici (Static Site Generator o SSG), che permettono di creare facilmente siti web belli e veloci da caricare, senza dover ricorrere a complessi sistemi backend o database.

In questo articolo vi presenteremo uno dei più popolari SSG, Jekyll, vi spiegheremo come funziona e come potete creare un sito web statico con questo strumento.

Ecco una demo live del sito blog che realizzeremo con Jekyll.

Potete accedere al repository GitHub del progetto se volete dare un’occhiata più da vicino.

Cos’è Jekyll?

Jekyll è un SSG open-source gratuito che si basa sul linguaggio di programmazione Ruby. Non è necessario conoscere il funzionamento di Ruby per usare Jekyll; è sufficiente che Ruby sia installato sul vostro computer.

Jekyll si può usare per creare vari tipi di siti statici come un blog personale, un sito web di portfolio e un sito web di documentazione senza bisogno di un database o di un sistema di gestione dei contenuti come WordPress.

Ecco cosa distingue Jekyll dagli altri SSG:

1. Facile da usare: Jekyll usa file di testo semplice e la sintassi markdown per creare e gestire i contenuti, il che significa che non è necessario avere conoscenze di HTML o CSS per iniziare.
2. Veloce e sicuro: Jekyll non ha a che fare con database o scripting lato server, il che significa che il rischio di vulnerabilità e attacchi è minore. Genera file HTML statici rendendo il vostro sito web incredibilmente veloce e sicuro.
3. Personalizzabile: Jekyll è altamente personalizzabile e vi permette di usare layout e template o di creare plugin per estendere le funzionalità.
4. Facile da distribuire: Jekyll genera file HTML statici che possono essere distribuiti su un server web o un provider di hosting senza bisogno di un sistema di gestione dei contenuti dinamici.
5. Sostenuto da una grande community: Jekyll ha una grande comunità di utenti, sviluppatrici e sviluppatori, il che significa che avrete a disposizione molte risorse se avete bisogno di aiuto o volete estendere le funzionalità del vostro sito.

Come installare Jekyll

Prima di procedere all’installazione di Jekyll, come indicato nella documentazione di Jekyll, dovete installare Ruby sul vostro computer.

Come Installare Jekyll su macOS

Per impostazione predefinita, Ruby è preinstallato su macOS, ma non è consigliabile usare questa versione di Ruby per installare Jekyll, perché è vecchia. Per esempio, su Ventura, l’ultimo sistema operativo di Apple, la versione di Ruby preinstallata è la 2.6.10, di cui l’ultima versione è la 3.1.3 (al momento della stesura di questo articolo).

Per risolvere questo problema, dovete installare Ruby correttamente usando un gestore di versioni come chruby. Per prima cosa dovete installare Homebrew sul vostro Mac usando il comando seguente nel vostro terminale:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Una volta che l’installazione è andata a buon fine, uscite e riavviate il terminale, quindi verificate se Homebrew è pronto per l’uso eseguendo questo comando:

brew doctor

Se ottenete il messaggio “Your system is ready to brew”, potete passare all’installazione di chruby e ruby-install con il comando seguente:

brew install chruby ruby-install

Ora potete installare l’ultima versione di ruby, la 3.1.3, usando il pacchetto ruby-install appena installato:

ruby-install 3.1.3

L’operazione richiederà alcuni minuti. Una volta completata l’installazione, configurate la vostra shell per usare automaticamente chruby con il comando seguente:

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

A questo punto potete uscire e rilanciare il Terminal, quindi verificare che tutto funzioni eseguendo questo comando:

ruby -v

Dovrebbe esserci scritto ruby 3.1.3.

Ora avete installato l’ultima versione di Ruby sul vostro computer. Potete procedere all’installazione dell’ultima gemma di Jekyll e di bundler:

gem install jekyll bundler

Come installare Jekyll su Windows

Per installare Ruby e Jekyll su un computer Windows, dovete usare il RubyInstaller. Questo può essere fatto scaricando e installando una versione di Ruby+Devkit da RubyInstaller Downloads e utilizzando le opzioni predefinite per l’installazione.

Nell’ultima fase dell’installazione guidata, eseguite ridk install, che serve per installare le gemme. Per saperne di più, consultate la Documentazione di RubyInstaller.

Tra le opzioni, scegliete MSYS2 e la toolchain di sviluppo MINGW. Aprite una nuova finestra del prompt dei comandi e installate Jekyll e Bundler con il comando seguente:

gem install jekyll bundler

Come verificare che Jekyll sia installato correttamente

Per verificare che Jekyll sia installato correttamente sul vostro computer, aprite il terminale ed eseguite il seguente comando:

jekyll -v

Se vedete il numero di versione, significa che Jekyll è installato e funziona correttamente sul vostro sistema. Ora tutto è pronto per iniziare a usare Jekyll!

Comandi e configurazione di Jekyll

Prima di iniziare a creare e personalizzare un sito statico con Jekyll, è bene familiarizzare con i suoi vari comandi CLI e i parametri dei file di configurazione.

Comandi CLI di Jekyll

Ecco alcuni dei più diffusi comandi CLI di Jekyll. Non è necessario che li memorizziate, ma sappiate che esistono e sentitevi liberi di controllare le funzioni di ognuno di essi quando ne noterete l’uso nel corso di questo articolo.

• jekyll build: genera il sito statico nella directory _site.
• jekyll serve: costruisce il sito e avvia un server web sul vostro computer locale, permettendovi di visualizzare un’anteprima del sito nel vostro browser all’indirizzo http://localhost:4000.
• jekyll new [site name]: crea un nuovo sito Jekyll in una nuova directory con il nome del sito specificato.
• jekyll doctor: mostra tutti i problemi di configurazione o di dipendenza eventualmente presenti.
• jekyll clean: cancella la directory _site, dove sono memorizzati i file del sito generato.
• jekyll help: visualizza la documentazione di supporto di Jekyll.
• jekyll serve --draft: genera e serve il vostro sito Jekyll, compresi i post che si trovano nella directory _drafts.

Potete anche aggiungere alcune opzioni a questi comandi. Per un elenco completo dei comandi e delle opzioni di Jekyll, consultate la documentazione.

File di Configurazione di Jekyll

Il file di configurazione di Jekyll è un file YAML chiamato _config.yml che contiene impostazioni e opzioni per il vostro sito Jekyll. Si usa per configurare vari aspetti del vostro sito, tra cui il titolo, la descrizione, l’URL e altre impostazioni.

Ecco alcune delle opzioni di configurazione più comunemente utilizzate:

• title: il titolo del sito.
• description: una breve descrizione del sito.
• url: l’URL di base del sito.
• baseurl: la sottodirectory del sito, se è ospitato in una sottodirectory di un dominio.
• permalink: la struttura URL dei post e delle pagine.
• exclude: un elenco di file o directory da escludere dal processo di generazione del sito.
• include: un elenco di file o directory da includere nel processo di generazione del sito.
• paginate: il numero di post da mostrare per pagina quando si usa la paginazione.
• plugins: un elenco di plugin Jekyll da caricare.
• theme: per impostazione predefinita, questo tema è impostato su minima. Potete usare qualsiasi altro tema impostandone il nome e implementando altre impostazioni che scopriremo più avanti in questo articolo.

Potete anche creare delle variabili personalizzate nel vostro file di configurazione e usarle nei template, nei layout e negli include del sito. Per esempio, potete creare una variabile chiamata author_name e usarla nei template in questo modo: {{ site.author_name }}.

Per modificare il file di configurazione di Jekyll, aprite il file _config.yml nella directory del vostro progetto Jekyll con un editor di testo e apportate le modifiche.

Nota: qualsiasi modifica apportata al file di configurazione avrà effetto la prossima volta che genererete il vostro sito con jekyll build o jekyll serve.

Come si crea un sito web statico su Jekyll?

Ora che avete installato Jekyll sul vostro computer, potete creare un sito web statico su Jekyll con un solo comando in pochi secondi. Aprite il terminale ed eseguite questo comando:

jekyll new joels-blog

Sostituite “joels-blog” con il nome del vostro sito preferito.

Ora navigate nella cartella del sito web. Noterete una struttura di base del sito Jekyll che include directory e file come questi:

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

Ecco a cosa serve ciascuna di queste directory e file:

• _config.yml: il file di configurazione di Jekyll contenente le impostazioni e le opzioni del vostro sito.
• _posts: una directory che contiene i contenuti del vostro sito (possono essere i post del blog). Questi possono essere file Markdown o HTML con una specifica convenzione di denominazione dei file: YEAR-MONTH-DAY-title.MARKUP.
• Gemfile e Gemfile.lock: Bundler usa questi file per gestire le gemme Ruby su cui si basa il vostro sito.
• index.md: la homepage predefinita del sito, generata da un file Markdown o HTML.

Ma ci sono altri file/cartelle che si possono usare per personalizzare il sito web Jekyll. Queste cartelle includono:

• _includes: una directory che contiene snippet HTML riutilizzabili che possono essere inclusi nei layout e nelle pagine. Come navbar, footer, ecc.
• _layouts: una directory che contiene template di layout HTML che definiscono la struttura delle pagine.
• assets: una directory che contiene tutti i file utilizzati dal vostro sito, come immagini e file CSS.
• _sass: una directory che contiene i file Sass che si possono usare per generare il CSS del sito.

Questa struttura di file costituisce una solida base per un progetto Jekyll, ma potete modificarla in base alle esigenze specifiche del vostro progetto.

Opzione di avvio rapido: usare il nostro template GitHub

In alternativa all’avvio del progetto tramite Jekyll CLI, potete creare un repository Git usando il template Jekyll “Hello World” di Kinsta su GitHub. Selezionate Use this template > Create a new repository per copiare il codice iniziale in un nuovo repository all’interno del vostro account GitHub.

Come visualizzare l’anteprima di un sito Jekyll

Ora avete un sito Jekyll, ma come potete visualizzare un’anteprima del sito per vederne l’aspetto prima di iniziare a personalizzarlo secondo le vostre esigenze? Aprite il terminale e spostatevi nella directory del vostro progetto, quindi eseguite il seguente comando:

jekyll serve

Questo genera una cartella _site che include tutti i file statici generati dal progetto. Avvierà anche il server Jekyll e potrete visualizzare un’anteprima del vostro sito su http://localhost:4000.

Se visitate l’URL nel vostro browser web, dovreste vedere il sito Jekyll con il tema minima:

Come personalizzare un sito Jekyll

Quando create un sito con Jekyll e usate un tema, potete personalizzare il sito in base alle vostre esigenze. Per esempio, potreste voler aggiungere nuove pagine, modificare il layout di una pagina o regolare la visualizzazione di alcuni elementi. Tutto questo è possibile con Jekyll.

Come funziona il front matter in Jekyll

Quando aprite una pagina o un post del vostro progetto, noterete un blocco di informazioni all’interno di tre trattini (—) nella parte superiore della pagina. Questo blocco sia chiama “front matter”.

Si tratta di un formato di metadati usato in Jekyll per memorizzare le informazioni relative a una pagina o a un post; può essere scritto sia in YAML che in JSON.

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

Nell’esempio precedente, il front matter include variabili come il titolo, la descrizione e la data del post. Queste variabili si possono usare nel layout o nel contenuto della pagina o del post.

Jekyll analizza il front matter e lo usa per generare l’HTML di output del sito. Potete usare il front matter per specificare varie opzioni, come il layout, il permalink, lo stato di pubblicazione, ecc.

Come configurare l’immagine di copertina predefinita

Potete anche configurare dei front matter predefiniti, in modo da non doverli ridefinire per file simili. Per esempio, se ogni post del blog usa lo stesso nome dell’autore e lo stesso layout, potete definire un front matter personalizzato nel vostro file _config.yml per servire tutti i post del blog.

Il modo in cui è strutturato è un po’ complesso, ma ecco come si presenterà. Incollatelo sotto l’ultima configurazione del vostro file _config.yml:

defaults:
 -
   scope:
 	path: "posts" # empty string means all files
   values:
 	layout: "post"
 	author: "John Doe"

Quando ora eseguite il comando jekyll serve, noterete che anche se non definite il layout e l’autore per ogni post, avete comunque accesso ad essi all’interno dei vostri file.

Nota: quando non definite un percorso, tutti i file useranno i valori di front matter definiti.

Creare pagine in Jekyll

Quando create un file nella directory principale del vostro progetto, questo viene considerato una pagina. Il nome che date al file si usa spesso nell’URL, quindi dovrete dare a ogni file di pagina un nome che suoni bene.

Per esempio, se volete creare una pagina con l’URL https://example.com/about, create un file chiamato about.html o about.md. L’estensione del file determina il linguaggio di markup da usare per il contenuto della pagina (HTML o Markdown).

Una volta creato il file, aggiungete il materiale e i contenuti appropriati. Salvate il file e aggiornate il sito Jekyll nel browser. La nuova pagina dovrebbe essere accessibile all’URL corrispondente al nome del file.

Creare layout in Jekyll

Potete usare i layout per definire la struttura e il design delle pagine e dei post del vostro sito. Di solito questo viene fatto principalmente con il codice HTML. Potete includere un header, un footer e delle meta-informazioni nei metadati della pagina.

Il primo passo consiste nel creare una cartella _layouts nella directory principale del progetto. Quindi create un file per ogni layout: il file deve avere un nome descrittivo che rifletta lo scopo del layout. Per esempio, potreste creare un file chiamato page.html per definire il layout di tutte le pagine del sito.

È meglio definire la struttura generale dei layout con l’HTML o un altro linguaggio di markup.

Potete includere dei segnaposto per qualsiasi contenuto dinamico che verrà inserito nel layout, come il titolo della pagina, il contenuto e i metadati. Potreste per esempio creare un layout di base che include un header, un footer e un’area di contenuto come questa:

<!DOCTYPE html>
<html>
	<head>
    	<title>{{ page.title }}</title>
	</head>
	<body>
    	<header>
            	
    	</header>
    	<main>{{ content }}</main>
    	<footer>
        	
    	</footer>
	</body>
</html>

In questo esempio, i segnaposto {{ page.title }} e {{ content }} saranno sostituiti dal titolo e dal contenuto effettivi della pagina che viene renderizzata.

A questo punto, qualsiasi pagina o post che usi page come valore di layout nella sua parte frontale avrà questo layout. Potete creare più layout all’interno della cartella _layouts e creare i vostri layout come preferite. Potete anche sovrascrivere il layout di un tema definendo un layout con un nome simile.

Come funziona la cartella _includes in Jekyll

La cartella _includes contiene snippet di codice riutilizzabili che potete includere in diverse parti del sito web. Per esempio, potete creare un file navbar.html nella cartella includes e aggiungerlo al file di layout page.html usando il tag {% include %}.

<!DOCTYPE html>
 <html>
 	<head>
     	<title>{{ page.title }} </title>
 	</head>
 	<body>
     	<header>{% include navbar.html %} </header>
     	<main>{{ content }} </main>
     	<footer>
         	
     	</footer>
 	</body>
 </html>

Al momento della creazione, Jekyll sostituirà il tag con il contenuto di navbar.html.

La cartella _includes può contenere qualsiasi tipo di file, come HTML, Markdown o Liquid. Lo scopo principale è quello di mantenere il codice DRY (Don’t Repeat Yourself) permettendovi di riutilizzare il codice in tutto il sito.

Scorrere in loop i post in Jekyll

Potreste voler creare una pagina blog dedicata per contenere tutti i post del blog, il che significa recuperare tutti i post del vostro sito e scorrerli in loop. Con Jekyll è facile farlo grazie al tag {% for %}.

Tutti i post di un sito web Jekyll sono memorizzati nella variabile site.posts. In questo modo potete scorrere i post e usare la variabile Liquid {{ post.title }} per visualizzare il titolo di ogni post:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

Potete anche usare altre variabili Liquid per visualizzare altre informazioni su ogni post, come la data o l’autore del post:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
  <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

Nell’esempio precedente, il filtro Liquid data formatta la data di ogni post in un formato più leggibile.

Ora avete un’idea di alcune formattazioni di base che si possono creare con un sito Jekyll. Potreste anche non aver bisogno di usare tutti questi elementi per costruire un sito Jekyll da zero, perché potete sempre cercare un tema che soddisfi le vostre esigenze e aggiungerlo al sito Jekyll.

Come aggiungere un tema a un sito Jekyll

Esistono diversi temi facili da aggiungere, ma la cosa positiva è che per ogni tema ci sono sempre informazioni chiare su come installarlo nel file ReadMe su GitHub. Potete decidere di clonare il tema mentre, se si tratta di un tema basato su una gemma, il processo è più semplice.

Per questo articolo, installerete un tema per blog e lo personalizzerete per avere un sito blog distribuito su Kinsta. Si tratta di un tema basato su gen e potete accedere al suo codice sorgente e alle istruzioni su GitHub.

Per aggiungere un tema basato su gemme, aprite il Gemfile del vostro sito e aggiungete la gemma del tema che volete usare. Il tema che useremo è il jekyll-theme-clean-blog. Potete sostituire il tema minima predefinito nel Gemfile:

gem "jekyll-theme-clean-blog"

Eseguite il comando bundle install nella directory del vostro sito per installare la gemma del tema e le sue dipendenze.

Nel file _config.yml del vostro sito, aggiungete la seguente riga per specificare il tema che volete usare:

theme: jekyll-theme-clean-blog

A questo punto il tema è pronto per essere utilizzato.

Dovrete rimuovere tutti i layout presenti nella cartella _layouts per evitare che sovrascrivano il layout del tema.

Potete trovare i nomi dei layout per i vostri file nella documentazione del tema. Per esempio, se state usando il tema jekyll-theme-clean-blog, il nome del layout del file index.html è home, quello delle altre pagine è page e quello di tutti i post è post.

Infine, eseguite jekyll serve per creare e servire il vostro sito con il nuovo tema.

Ecco fatto! Il vostro sito Jekyll dovrebbe ora usare il nuovo tema basato sulla gemma che avete aggiunto. Potete personalizzare ulteriormente il tema modificando il suo layout nella directory _layouts del vostro sito.

Personalizzare un tema Jekyll

Ora che il tema è stato aggiunto al vostro sito, la prossima azione sarà quella di personalizzare il sito in modo che risponda alle vostre esigenze e funzioni come dovrebbe. Per esempio, le immagini di ogni pagina e post non vengono visualizzate, ma viene visualizzato uno sfondo grigio.

Potete risolvere questo problema aggiungendo un’opzione “front matter” a ogni pagina e post, specificando il percorso di un’immagine che volete usare. In Jekyll, le risorse come le immagini sono memorizzate nella cartella assets. In questa cartella potete decidere di creare delle sottocartelle per organizzare le immagini.

Ora potete aggiungere un’opzione di sfondo al blocco della pagina principale e un percorso per la sua immagine. Per esempio, nella pagina about, questo è lo sfondo:

---
layout: page
title: About
description: This is the page description.
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

Se lo fate per tutte le pagine e i post, la vostra pagina avrà questo aspetto:

Potete ulteriormente personalizzare il sito regolando le opzioni della navbar. Per esempio, potreste non aver bisogno di una pagina di contatti e quindi dovreste rimuovere il suo link dalle opzioni della navbar. Potete farlo studiando il codice sorgente del tema, notando il file responsabile dei link della navbar e replicando esattamente il file nel vostro progetto, rimuovendo l’opzione che non vi serve.

I link di navigazione si trovano nel file navbar.html della cartella _includes. Potete creare questo file, incollare il codice dal vostro codice sorgente e rimuovere l’opzione di contatto o aggiungere qualsiasi altra opzione desideriate.

Quando salvate il vostro progetto, noterete che le opzioni della navbar saranno personalizzate:

Infine, un’ultima personalizzazione è la creazione di una pagina di post che conterrà tutti i post del vostro blog, il che significa che potrete scorrere tutti i post su questa pagina.

Create un file, posts.html e incollate il seguente codice:

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---

{% for post in site.posts %}

<article class="post-preview">
	<a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
    	<h2 class="post-title">{{ post.title }}</h2>
    	{% if post.subtitle %}
    	<h3 class="post-subtitle">{{ post.subtitle }}</h3>
    	{% else %}
    	<h3 class="post-subtitle">
        	{{ post.excerpt | strip_html | truncatewords: 15 }}
    	</h3>
    	{% endif %}
	</a>
	<p class="post-meta">
    	Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
    	}} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
    	read_time.html content=post.content %}
	</p>
</article>

<hr />

{% endfor %}

Modificate come volete l’immagine di sfondo per inserire l’immagine che avete salvato. Nel codice qui sopra, state scorrendo tutti i post per visualizzare tutti i post di questa pagina. Ecco come apparirà la pagina dei post una volta salvata.

Come aggiungere contenuti a un sito Jekyll

Ora avete creato un sito Jekyll e lo avete configurato in base alle vostre esigenze. L’ultimo passo consiste nel capire come si possono aggiungere contenuti a un sito Jekyll.

Tutti i contenuti sono archiviati nella cartella _posts. Ogni contenuto è memorizzato in un file con una convenzione di denominazione simile a YYYY-MM-DD-title.md (o .html per i file HTML). Per esempio, se volete creare un post chiamato “Il mio primo post”, create un file 2023-03-08-my-first-post.md nella cartella _posts.

Successivamente, per ogni file di post/contenuto, aggiungete in cima alla pagina le informazioni relative al post. Questo includerà il layout, il titolo, la descrizione, la data e altre informazioni.

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

Poi potrete aggiungere i vostri contenuti sotto il blocco front matter con i tag HTML o la sintassi markdown.

Salvate il file e Jekyll lo costruirà automaticamente e lo includerà nel vostro sito.

Come distribuire il vostro sito Jekyll su Kinsta

Kinsta è una piattaforma cloud che vi permette di ospitare siti web statici, compreso Jekyll. Per farlo è necessario impostare alcune configurazioni, inviare i codici a GitHub e infine distribuire il sito su Kinsta.

Prerequisiti: Configurazione del sito Jekyll

Controllate il vostro file Gemfile.lock e verificate che includa una piattaforma per tutti i dispositivi. Per essere sicuri che tutte le piattaforme siano configurate correttamente, eseguite il seguente comando:

bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

Quindi procedete alla creazione di un Procfile: questo file specifica i comandi che verranno eseguiti quando il vostro sito verrà distribuito. Questo file aggiorna automaticamente i comandi da eseguire nella scheda Processo di MyKinsta. Questo è il comando da aggiungere al vostro Procfile:

web: bundle exec jekyll build && ruby -run -e httpd _site

Portare il sito Jekyll su GitHub

Per questo articolo, usiamo i comandi Git per trasferire i vostri codici su GitHub. Per prima cosa, create un repository su GitHub; questo vi darà accesso all’URL del repository.

Ora potete inizializzare un repository Git locale aprendo il terminale, navigando nella directory che contiene il vostro progetto ed eseguendo il seguente comando:

git init

Ora aggiungete il vostro codice al repository Git locale con questo comando:

git add

Ora potete effettuare il commit delle vostre modifiche usando questo comando:

git commit -m "my first commit"

Nota: potete sostituire “my first commit” con un breve messaggio che descriva le vostre modifiche.

Infine, inviate il codice a GitHub con i seguenti comandi:

git remote add origin [repository URL]
git push -u origin master

Nota: sostituite “[repository URL]” con l’URL del vostro repository GitHub.

Una volta completati questi passaggi, il vostro codice verrà inviato a GitHub e sarà accessibile tramite l’URL del repository. Ora potete fare il deploy su Kinsta!

Distribuzione del sito Jekyll su Kinsta

La distribuzione su Kinsta avviene in pochi minuti. Iniziate dal cruscotto My Kinsta per accedere o creare il vostro account. Successivamente, autorizzate Kinsta su GitHub.

A questo punto potete seguire i seguenti passaggi per distribuire il vostro sito Jekyll:

1. Fate clic su Applicazioni nella barra laterale sinistra
2. Clic su Aggiungi servizio
3. Clic su Applicazione dal menu a tendina

Verrà visualizzata una maschera attraverso la quale potrete selezionare il repository che volete distribuire. Selezionate il ramo che volete distribuire se avete più branch nel vostro repository.

Potete quindi assegnare un nome a questa applicazione. Selezionate un data center tra i 25 disponibili e il Procfile fornirà automaticamente il comando del processo web.

L’applicazione inizierà a essere distribuita. Entro pochi minuti, verrà fornito un link per accedere alla versione distribuita del vostro sito web. In questo caso, il link è: https://myblog-84b54.kinsta.app/

Riepilogo

Finora avete imparato come funziona Jekyll e le varie personalizzazioni che potete fare con Jekyll. È ormai assodato che Jekyll è uno strumento eccellente per la creazione di siti web statici grazie alla sua semplicità, flessibilità e alle sue potenti funzioni.

L’intuitivo sistema di template di Jekyll, i template Liquid e il supporto integrato per markdown e altri linguaggi di markup facilitano la creazione e gestione fluida di siti ricchi di contenuti.

Non esitate a ospitare tutti i vostri siti web statici con l’Hosting di Applicazioni di Kinsta gratuitamente e, se vi piace, sottoscrivete il nostro Piano Hobby, a partire da 7 dollari al mese.

Qual è la vostra opinione su Jekyll? Avete mai usato Jekyll per costruire qualcosa? Condividete con noi i vostri progetti e le vostre esperienze nella sezione commenti qui sotto.