Jekyll Tutorial: come creare un sito web statico

Nell'era digitale odierna, avere un sito Web è essenziale per stabilire una presenza online, promuovere il proprio marchio e raggiungere potenziali clienti. Tuttavia, la creazione di un sito Web può essere un compito arduo.

È qui che entrano in gioco i generatori di siti statici (SSG): semplificano la creazione di siti Web belli e a caricamento rapido senza la necessità di complessi sistemi di back-end o database.

In questo articolo, ti verrà presentato uno dei popolari SSG: Jekyll, scopri come funziona e come puoi creare un sito Web statico con esso.

Ecco una demo dal vivo del sito blog che costruirai con Jekyll.

Puoi accedere al repository GitHub del progetto se desideri dare un'occhiata più da vicino.

Cos'è Jekyll?

Jekyll è un SSG open source gratuito creato e eseguito sul linguaggio di programmazione Ruby. Non è necessario capire come funziona Ruby per usare Jekyll; devi solo avere Ruby installato sulla tua macchina.

Jekyll può essere utilizzato 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 utilizzando un sistema di gestione dei contenuti come WordPress.

Ecco cosa distingue Jekyll tra gli SSG:

1. Facile da usare : Jekyll utilizza file di testo semplice e sintassi markdown per creare e gestire i contenuti, il che significa che non è necessario conoscere HTML o CSS per iniziare.
2. Veloce e sicuro: Jekyll non si occupa di alcun database o scripting lato server, il che significa che c'è meno rischio di vulnerabilità e attacchi. Genera file HTML statici che rendono il tuo sito Web incredibilmente veloce e sicuro.
3. Personalizzabile: Jekyll è altamente personalizzabile e ti consente di utilizzare layout e modelli o persino di creare plug-in per estendere le funzionalità.
4. Facile da implementare : 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 dinamico.
5. Supportato da una grande comunità: Jekyll ha una grande comunità di utenti e sviluppatori, il che significa che sono disponibili molte risorse se hai bisogno di aiuto o desideri estendere le funzionalità del tuo sito.

Come installare Jekyll

Devi prima installare Ruby sulla tua macchina prima di poter procedere con l'installazione di Jekyll come indicato nella documentazione di Jekyll.

Come installare Jekyll su macOS

Per impostazione predefinita, Ruby viene preinstallato con macOS, ma non è consigliabile utilizzare una tale versione di Ruby per installare Jekyll perché è vecchia. Ad 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, dovresti installare Ruby correttamente usando un gestore di versioni come chruby. Dovresti prima installare Homebrew sul tuo Mac usando il comando seguente nel tuo terminale:

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

Una volta che l'installazione è andata a buon fine, esci e riavvia Terminal, quindi controlla se Homebrew è pronto eseguendo questo comando:

 brew doctor

Se ottieni " Il tuo sistema è pronto per la preparazione" , ora puoi passare all'installazione di chruby e ruby-install con il comando seguente:

 brew install chruby ruby-install

Ora puoi installare l'ultima versione di ruby ​​che è la 3.1.3 usando il pacchetto ruby-install che hai appena installato:

 ruby-install 3.1.3

Ci vorranno alcuni minuti. Una volta che ha successo, configura la tua 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

Ora puoi uscire e riavviare il tuo terminale, quindi verificare che tutto funzioni eseguendo questo comando:

 ruby -v

Dovrebbe dire ruby ​​3.1.3 .

Ora hai l'ultima versione di Ruby installata sulla tua macchina. Ora puoi procedere con l'installazione dell'ultima gemma Jekyll e bundler:

 gem install jekyll bundler

Come installare Jekyll su Windows

Per installare Ruby e Jekyll su un computer Windows, devi utilizzare RubyInstaller. Questo può essere fatto scaricando e installando una versione di Ruby+Devkit da RubyInstaller Downloads e usando le opzioni predefinite per l'installazione.

Nell'ultima fase della procedura guidata di installazione, esegui il passaggio ridk install , che viene utilizzato per installare le gemme. Maggiori informazioni tramite la documentazione di RubyInstaller.

Dalle opzioni, scegli la toolchain di sviluppo MSYS2 e MINGW. Apri una nuova finestra del prompt dei comandi e installa Jekyll e Bundler utilizzando il comando seguente:

 gem install jekyll bundler

Come verificare che Jekyll sia installato correttamente

Per verificare che Jekyll sia installato correttamente sulla tua macchina, apri il tuo terminale ed esegui il seguente comando:

 jekyll -v

Se vedi il numero di versione, significa che Jekyll è installato e funziona correttamente sul tuo sistema. Ora sei pronto per usare Jekyll!

Comandi e configurazione di Jekyll

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

Comandi Jekyll CLI

Ecco alcuni dei popolari comandi CLI di Jekyll. Non hai bisogno di memorizzarli, ma sappi solo che esistono e sentiti libero di ricontrollare cosa fa ognuno di loro quando noti il ​​​​loro utilizzo più avanti in questo articolo.

• jekyll build : Genera il sito statico nella directory _site .
• jekyll serve : Crea il sito e avvia un server web sul tuo computer locale, permettendoti di visualizzare l'anteprima del sito nel tuo 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 : Emette eventuali problemi di configurazione o dipendenza che possono essere presenti.
• jekyll clean : Elimina la directory _site , che è dove sono archiviati i file del sito generati.
• jekyll help : restituisce la documentazione di aiuto per Jekyll.
• jekyll serve --draft : genera e serve il tuo sito Jekyll, inclusi tutti i post che si trovano nella directory _drafts .

Puoi anche aggiungere alcune opzioni a questi comandi. Consulta un elenco completo dei comandi e delle opzioni di Jekyll nella documentazione di Jekyll.

File di configurazione di Jekyll

Il file di configurazione di Jekyll è un file YAML denominato _config.yml che contiene impostazioni e opzioni per il tuo sito Jekyll. Viene utilizzato per configurare vari aspetti del tuo sito, inclusi il titolo del sito, la descrizione, l'URL e altre impostazioni.

Ecco alcune delle opzioni di configurazione più comunemente utilizzate:

• titolo: il titolo del tuo sito.
• descrizione: una breve descrizione del tuo sito.
• url: l'URL di base del tuo sito.
• baseurl: la sottodirectory del tuo sito, se è ospitata in una sottodirectory di un dominio.
• permalink: la struttura dell'URL per i tuoi post e le tue 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 utilizza l'impaginazione.
• plugins: un elenco di plugin Jekyll da caricare.
• tema: per impostazione predefinita, è impostato su minima . Puoi utilizzare qualsiasi altro tema impostandone il nome e implementando altre impostazioni di cui parleremo più avanti in questo articolo.

Puoi anche creare variabili personalizzate nel tuo file di configurazione e utilizzarle nei modelli, nei layout e nelle inclusioni del tuo sito. Ad esempio, puoi creare una variabile chiamata author_name e utilizzarla nei tuoi modelli in questo modo: {{ site.author_name }} .

Per modificare il file di configurazione di Jekyll, apri il file _config.yml nella directory del tuo progetto Jekyll in un editor di testo e apporta le modifiche.

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

Come si crea un sito web statico su Jekyll?

Ora che hai installato Jekyll sulla tua macchina, è ora possibile creare un sito Web statico Jekyll con un comando in pochi secondi. Apri il tuo terminale ed esegui questo comando:

 jekyll new joels-blog

Assicurati di sostituire "joels-blog" con il nome del tuo sito preferito.

Successivamente, vai alla cartella del sito web. Noterai 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 tuo sito.
• _posts: una directory che contiene i contenuti del tuo sito (possono essere post di 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 utilizza questi file per gestire le gemme Ruby su cui si basa il tuo sito.
• index.md: la home page predefinita per il tuo sito, generata da un file Markdown o HTML.

Ma ci sono più file/cartelle che possono essere usati per personalizzare il tuo sito web Jekyll. Queste cartelle includono:

• _includes: una directory che contiene frammenti HTML riutilizzabili che possono essere inclusi nei layout e nelle pagine. Come barra di navigazione, piè di pagina, ecc
• _layouts: una directory che contiene modelli di layout HTML che definiscono la struttura delle tue pagine.
• risorse: una directory che contiene tutti i file utilizzati dal tuo sito, come immagini e file CSS.
• _sass: una directory che contiene i file Sass che possono essere utilizzati per generare CSS per il tuo sito.

Questa struttura di file fornisce una solida base per un progetto Jekyll, ma puoi modificarla secondo necessità per soddisfare le esigenze specifiche del tuo progetto.

Opzione di avvio rapido: utilizza il nostro modello GitHub

In alternativa all'avvio del progetto utilizzando la Jekyll CLI, potete creare un repository Git utilizzando il modello Jekyll "Hello World" di Kinsta su GitHub. Seleziona Usa questo modello > Crea un nuovo repository per copiare il codice iniziale in un nuovo repository all'interno del tuo account GitHub.

Come visualizzare l'anteprima di un sito Jekyll

Ora hai un sito Jekyll, ma come puoi visualizzare in anteprima il sito Web per vedere come appare prima di iniziare a personalizzarlo in base alle tue esigenze? Apri il tuo terminale e spostati nella directory del tuo progetto, quindi esegui il seguente comando:

 jekyll serve

Questo genererà una cartella _site che include tutti i file statici generati dal tuo progetto. Avvierà anche il server Jekyll e potrai visualizzare l'anteprima del tuo sito tramite http://localhost:4000 .

Se visiti l'URL nel tuo browser web, dovresti vedere il tuo sito Jekyll con il tema minimo:

Come personalizzare un sito Jekyll

Quando crei un sito con Jekyll e utilizzi un tema, puoi personalizzare il sito in base alle tue esigenze. Ad esempio, potresti voler aggiungere nuove pagine, modificare il layout di una pagina o modificare la modalità di visualizzazione di alcuni elementi. Tutto questo è possibile con Jekyll.

Come funziona il Front Matter in Jekyll

Quando apri ogni pagina o post del blog della cartella del tuo progetto, noterai un blocco di informazioni all'interno di tre trattini (—) nella parte superiore della pagina. Questo è indicato come questione frontale .

È un formato di metadati utilizzato in Jekyll per archiviare informazioni su una pagina o un post: può essere scritto in YAML o 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 sopra, la parte introduttiva include variabili, come il titolo, la descrizione e la data del post. Queste variabili possono essere utilizzate nella pagina o nel layout o nel contenuto del post.

Jekyll parse è l'argomento principale e lo utilizza per generare l'HTML di output per il tuo sito. Puoi utilizzare la parte introduttiva per specificare varie opzioni, come layout, permalink, stato pubblicato, ecc.

Come configurare il Front Matter predefinito

Puoi anche configurare la parte introduttiva predefinita, quindi non è necessario definire la stessa parte introduttiva per file simili. Ad esempio, se ogni post del blog utilizza lo stesso nome e layout dell'autore. Puoi definire una parte introduttiva personalizzata nel tuo file _config.yml per servire tutti i post del tuo blog.

Il modo in cui è strutturato è un po' complesso, ma ecco come sarà. Incollalo sotto l'ultima configurazione nel tuo file _config.yml :

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

Quando ora esegui il comando jekyll serve , noterai che anche quando non definisci il layout e l'autore su ogni post, hai ancora accesso ad essi all'interno dei tuoi file.

Nota: quando non definisci un percorso, tutti i file utilizzeranno i valori definiti per la parte introduttiva.

Creazione di pagine in Jekyll

Quando crei un file nella directory principale del tuo progetto, viene considerato una pagina. Il nome che dai al file è spesso usato nell'URL, quindi nominerai ogni file di pagina con un nome che risuoni bene.

Ad esempio, se desideri creare una pagina con l'URL https://example.com/about , crea un file denominato about.htm l o about.md . L'estensione del file determina il linguaggio di markup da utilizzare per il contenuto della pagina (HTML o Markdown).

Dopo aver creato un file, aggiungi la parte introduttiva e il contenuto appropriati. Salva il file e aggiorna il tuo sito Jekyll nel browser. La nuova pagina dovrebbe ora essere accessibile all'URL corrispondente al nome del file.

Creazione di layout in Jekyll

Puoi utilizzare i layout per definire la struttura e il design delle pagine e dei post del tuo sito. Questo di solito viene fatto principalmente con il codice HTML. Puoi includere un'intestazione, un piè di pagina, meta informazioni con i metadati della pagina.

Il primo passaggio consiste nel creare una cartella _layouts nella directory principale del progetto. Quindi crea un file per ogni layout: il file dovrebbe avere un nome descrittivo che rifletta lo scopo del layout. Ad esempio, potresti creare un file denominato page.htm l per definire il layout di pagina per tutte le pagine del tuo sito.

È meglio definire la struttura complessiva dei tuoi layout con HTML o un altro linguaggio di markup.

Puoi includere segnaposto per qualsiasi contenuto dinamico che verrà inserito nel layout, come il titolo della pagina, il contenuto e i metadati. Ad esempio, potresti creare un layout di base che includa un'intestazione, un piè di pagina e un'area del contenuto come questa:

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

In questo esempio, i segnaposto {{ page.title }} e {{ content }} verranno sostituiti con il titolo effettivo e il contenuto della pagina visualizzata.

A questo punto, qualsiasi pagina o post che utilizza page come valore di layout nella parte introduttiva avrà questo layout. Puoi creare più layout all'interno della cartella _layouts e modellare i tuoi layout come preferisci. Puoi 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 frammenti di codice riutilizzabili che puoi includere in diverse parti del tuo sito web. Ad esempio, puoi creare un file navbar.html nella cartella include e aggiungerlo al file di layout page.html utilizzando il tag {% include %} .

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

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

La cartella _includes può contenere qualsiasi tipo di file, ad esempio file HTML, Markdown o Liquid. L'obiettivo principale è mantenere il codice DRY (Don't Repeat Yourself) consentendoti di riutilizzare il codice nel tuo sito.

Passare in rassegna i post in Jekyll

Potresti voler creare una pagina del blog dedicata per contenere tutti i post del tuo blog, questo significa che vorresti recuperare tutti i post sul tuo sito e scorrerli. Con Jekyll è facile ottenere risultati usando il tag {% for %} .

Tutti i post su qualsiasi sito web Jekyll sono memorizzati nella variabile site.posts . Puoi scorrere e utilizzare la variabile {{ post.title }} Liquid per generare il titolo di ogni post in questo modo:

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

Puoi anche utilizzare variabili Liquid aggiuntive per generare 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 %}

Si noti che nell'esempio sopra, il filtro data Liquid formatta la data di ogni post in un formato più leggibile.

Ora hai un'idea di una formattazione di base che può essere eseguita sul tuo sito Jekyll. Ma potresti non aver bisogno di usare tutto questo per creare un sito Jekyll da zero perché puoi sempre cercare un tema che soddisfi le tue esigenze e aggiungerlo al tuo sito Jekyll.

Come aggiungere un tema a un sito Jekyll

Esistono vari temi facili da aggiungere, ma la cosa buona è che per ogni tema ci sono sempre informazioni chiare su come installarli nel file Leggimi su GitHub. Puoi decidere di clonare il tema o, se si tratta di un tema basato su gemme, il processo è più semplice.

Per questo articolo, installerete un tema del blog e lo personalizzerete per avere un sito blog distribuito su Kinsta. Questo è un tema basato su gen e puoi accedere al codice sorgente e alle istruzioni su GitHub.

Per aggiungere un tema basato su gemme, apri il Gemfile del tuo sito e aggiungi la gemma per il tema che desideri utilizzare. Il tema che useremo è il jekyll-theme-clean-blog . Puoi sostituire il tema minimo predefinito nel Gemfile:

 gem "jekyll-theme-clean-blog"

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

Nel file _config.yml del tuo sito, aggiungi la seguente riga per specificare il tema che desideri utilizzare:

 theme: jekyll-theme-clean-blog

A questo punto, il tuo tema è pronto per l'uso.

Ti consigliamo di rimuovere tutti i layout nella directory _layouts per evitare che sovrascrivano il layout del tema.

Puoi quindi trovare i nomi dei layout per i tuoi file nella documentazione del tema. Ad esempio, se utilizzi il tema jekyll-theme-clean-blog , i nomi di layout per il file index.html sono home , other pages è page e all posts è post .

Infine, esegui jekyll serve per creare e servire il tuo sito utilizzando il nuovo tema.

Questo è tutto! Il tuo sito Jekyll dovrebbe ora utilizzare il nuovo tema basato su gemme che hai aggiunto. Puoi personalizzare ulteriormente il tema modificandone il layout nelle directory _layouts del tuo sito.

Personalizza un tema Jekyll

Ora hai il tuo tema aggiunto al tuo sito, l'azione successiva sarebbe quella di personalizzare il sito per soddisfare le tue esigenze e funzionare come dovrebbe funzionare. Ad esempio, le immagini per ogni pagina e post non vengono visualizzate ma viene visualizzato uno sfondo grigio.

Puoi risolvere questo problema aggiungendo un'opzione di presentazione a ogni pagina e post specificando il percorso di un'immagine che desideri utilizzare. In Jekyll, le risorse come le immagini sono archiviate nella cartella delle risorse . In questa cartella puoi decidere di creare delle sottocartelle per organizzare le tue immagini.

Ora puoi aggiungere un'opzione di sfondo al blocco della parte introduttiva e un percorso alla sua immagine. Ad esempio, nella pagina delle informazioni, questa è la parte introduttiva:

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

Fallo per tutte le pagine e i post e la tua pagina sarà simile a questa:

Un'altra personalizzazione che puoi fare è regolare le opzioni della barra di navigazione. Ad esempio, potresti non aver bisogno di una pagina di contatto, il che significa che dovresti rimuovere il suo collegamento dalle opzioni della barra di navigazione. Puoi farlo studiando il codice sorgente del tema, notando il file responsabile dei collegamenti di navigazione e replicando il file esattamente nel tuo progetto, rimuovendo l'opzione che non ti serve.

I collegamenti nav si trovano nel file navbar.html della cartella _includes. Puoi creare questo file, incollare il codice dal tuo codice sorgente e rimuovere l'opzione di contatto o aggiungere qualsiasi nuova opzione che desideri.

Quando salvi il tuo progetto, noterai che le opzioni di navigazione saranno personalizzate:

Infine, un'ultima personalizzazione sarebbe la creazione di una pagina di post che conterrà tutti i post del tuo blog, il che significa che passerai in rassegna tutti i post di questa pagina.

Crea un file, posts.html e incolla 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 %}

Sentiti libero di regolare l'immagine di sfondo per riflettere l'immagine salvata. Nel codice sopra, stai scorrendo tutti i post per visualizzare tutti i post in questa pagina. Ecco come apparirà la pagina dei post una volta salvata.

Come aggiungere contenuto a un sito Jekyll

Ora hai creato un sito Jekyll e configurato il sito per soddisfare le tue esigenze. L'ultimo passo sarebbe aggiungere contenuti o imparare come aggiungere contenuti a un sito Jekyll.

Tutto il contenuto è archiviato nella cartella _posts. Ogni contenuto è archiviato in un file con una convenzione di denominazione simile di AAAA-MM-GG-titolo.md (o .html per i file HTML). Ad esempio, se desideri creare un post chiamato "My First Post", crea un 2023-03-08-my-first-post.md nella directory _posts .

Successivamente, per ogni post/file di contenuto, assicurati di aggiungere una parte introduttiva sul post in alto. Ciò 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' ---

Quindi puoi aggiungere i tuoi contenuti sotto il blocco della parte frontale con tag HTML o sintassi markdown.

Salva il file e Jekyll lo creerà automaticamente e lo includerà nel tuo sito.

Come implementare il vostro sito Jekyll su Kinsta

Kinsta è una piattaforma cloud che consente di ospitare siti Web statici, incluso Jekyll. Questo può essere fatto impostando alcune configurazioni, inviando i vostri codici a GitHub e infine distribuendoli su Kinsta.

Prerequisiti: configurazione del tuo sito Jekyll

Controlla il tuo file Gemfile.lock e assicurati che includa una piattaforma per tutti i dispositivi. Per essere sicuri che tutte le piattaforme siano configurate correttamente, eseguire il seguente comando:

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

Quindi puoi procedere alla creazione di un Procfile : questo file specifica i comandi che vengono eseguiti quando il tuo sito viene distribuito. Questo file aggiorna automaticamente i comandi da eseguire nella scheda Processo di MyKinsta. Questo è il comando da aggiungere al tuo Procfile:

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

Invia il tuo sito Jekyll a GitHub

Per questo articolo, usiamo i comandi Git per inviare i tuoi codici a GitHub. Innanzitutto, crea un repository su GitHub; questo ti darà accesso all'URL del repository.

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

 git init

Ora aggiungi il tuo codice al repository Git locale usando il seguente comando:

 git add

Ora puoi eseguire il commit delle modifiche utilizzando il seguente comando:

 git commit -m "my first commit"

Nota: puoi sostituire "il mio primo commit" con un breve messaggio che descrive le tue modifiche.

Infine, invia il tuo codice a GitHub utilizzando i seguenti comandi:

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

Nota: assicurati di sostituire "[URL repository]" con il tuo URL repository GitHub.

Una volta completati questi passaggi, il tuo codice verrà inviato a GitHub e sarà accessibile tramite l'URL del tuo repository. Ora puoi implementare su Kinsta!

Distribuire il vostro sito Jekyll su Kinsta

Il deployment su Kinsta avviene in pochi minuti. Inizia dalla dashboard di My Kinsta per accedere o creare il tuo account. Successivamente, autorizzerai Kinsta su GitHub.

Puoi quindi seguire questi passaggi per distribuire il tuo sito Jekyll:

1. Fai clic su Applicazioni nella barra laterale sinistra
2. Fare clic su Aggiungi servizio
3. Fare clic su Applicazione dal menu a discesa

Apparirà un modale attraverso il quale è possibile selezionare il repository che si desidera distribuire. Seleziona un ramo che desideri distribuire se hai più rami nel tuo repository.

È quindi possibile assegnare un nome a questa applicazione. Seleziona una posizione del data center tra le 25 disponibili, quindi Procfile fornirà automaticamente il comando di elaborazione web.

La tua applicazione inizierà la distribuzione. Entro pochi minuti, verrà fornito un collegamento per accedere alla versione distribuita del tuo sito web. In questo caso, è: https://myblog-84b54.kinsta.app/

Riepilogo

Finora hai imparato come funziona Jekyll e le varie personalizzazioni che puoi fare con Jekyll. Ora è sicuro concordare sul fatto che Jekyll è uno strumento eccellente per la creazione di siti Web statici grazie alla sua semplicità, flessibilità e potenti funzionalità.

L'intuitivo sistema di modelli di Jekyll, i modelli liquidi e il supporto integrato per markdown e altri linguaggi di markup semplificano la creazione e la gestione rapida di siti ricchi di contenuti.

Sentitevi liberi di ospitare gratuitamente tutti i vostri siti web statici con l'Application Hosting di Kinsta e, se vi piace, optate per il nostro piano Hobby Tier, a partire da $7/mese .

Qual è il tuo pensiero su Jekyll? Hai utilizzato Jekyll per costruire qualcosa? Non esitate a condividere i vostri progetti e le vostre esperienze con noi nella sezione commenti qui sotto.