Jekyll è uno dei più popolari generatori di siti statici (SSG), ampiamente utilizzato dalla comunità degli sviluppatori per creare blog, portfolio e siti web personali. Questo articolo spiega come creare un sito Jekyll con GitHub Actions e distribuirlo gratuitamente con l’Hosting di Siti Statici di Kinsta.
L’Hosting di Siti Statici di Kinsta è in grado di creare automaticamente siti a partire da SSG e applicazioni web costruite su Node.js. Per servire altri contenuti statici, come i siti statici generati da Jekyll (costruito su Ruby), abbiamo bisogno di un altro approccio.
Requisiti
Per questo tutorial è necessario avere:
- Esperienza con Jekyll e Git.
- Un sito web Jekyll attivo e funzionante in locale.
Per seguirci, potete usare questa base di codice di esempio come riferimento.
Distribuire un sito web Jekyll su Kinsta
Esistono diversi modi per distribuire un sito web Jekyll su Kinsta, ad esempio:
- Utilizzando l’Hosting di Applicazioni di Kinsta.
- Utilizzando l’Hosting di Siti Statici di Kinsta attraverso uno di questi metodi:
- A. Creando il sito web con Continuous Integration e Continuous Deployment (CI/CD) prima di distribuirlo su Kinsta.
- B. Servendo solo i file statici.
In questo articolo vedremo entrambi i metodi per distribuire Jekyll con l’Hosting di Siti Statici di Kinsta.
A. Creare il sito web con GitHub Actions prima di distribuirlo su Kinsta
Questo metodo utilizza un flusso di lavoro GitHub Actions (GHA) per eseguire la build del sito web in un branch specifico (deploy) e utilizzare questo branch per distribuire i file statici generati su Kinsta.
Per utilizzare questo metodo, dato che usiamo GitHub Actions, la base di codice deve essere ospitata su un repository GitHub (pubblico o privato). Ma è possibile utilizzare altri strumenti CI/CD per ottenere lo stesso risultato.
I vantaggi più significativi di questo metodo sono:
- Possibilità di implementare processi di Integrazione Continua (CI) per il sito, ad esempio una fase
teste/o unalintper verificare il codice. - Creazione automatica del sito ad ogni push del repo. Non è necessario costruirlo prima del push.
- Garanzia che il sito venga aggiornato solo se la pipeline CI/CD viene completata con successo.
Passi:
- Aprire il terminale nella root del repository del sito Jekyll.
- Creare un nuovo branch orfano (vuoto) (
deploy) e inviarlo al repo:
git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deployNon aggiungere alcun file a questo branch. Verrà popolato automaticamente dal flusso di lavoro GitHub Actions con il contenuto della cartella _site di Jekyll generata.
- Controllare il branch
main:
git checkout main- Creare una cartella .github/workflows in
main.
- Per configurare GHA, creare un nuovo file gh-actions.yml in .github/workflows con il seguente contenuto:
name: Deploy Jekyll
on:
# The workflow runs only on pushes to the <main> branch
push:
branches: ["main"]
workflow_dispatch:
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: '3.2'
- name: Set up Jekyll
run: gem install bundler && bundle install
- name: Build site
run: bundle exec jekyll build
env:
JEKYLL_ENV: production
- name: Upload artifact
uses: actions/upload-artifact@v3
with:
name: compiled-site
path: _site
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
permissions:
contents: write
steps:
# Commit and push the artifacts to the <deploy> branch
- uses: actions/checkout@v4
with:
ref: deploy
- name: Download artifacts
uses: actions/download-artifact@v3
with:
name: compiled-site
path: _site
- name: Commit and push
# Replace "<username>" with your GH org or user name
run: |
git config user.name "<username>"
git config user.email "<username>@users.noreply.github.com"
git pull origin deploy
git add _site
git commit -m "Auto generated from ${GITHUB_SHA::7}"
git push- Eseguire il commit e inviare il codice al branch
main.
Ad ogni push al branch main, il flusso di lavoro GitHub Actions:
- Costruisce il sito web Jekyll con i file statici sotto _site.
- Crea artefatti con il contenuto di _site.
- Controlla il branch
deploy. - Apporta le modifiche di _site al branch
deploy.
Per aggiornare il sito, sarà necessario solo inviare le modifiche al branch main.
Non inviate direttamente le modifiche al branch deploy. Potete scegliere di bloccare questo branch su GitHub per evitare push involontari.
Parleremo in seguito di come effettuare il deploy su Kinsta.
B. Creare un sito web in locale e distribuirlo direttamente su Kinsta
In alternativa al metodo precedente, si può creare un sito localmente (e aggiornare il contenuto della cartella _site localmente), quindi inviare il contenuto della cartella _site di Jekyll a un repository (su GitHub, GitLab o Bitbucket). Utilizzando questo metodo, non avrete bisogno di GH Actions o di altri strumenti CI/CD per eseguire la build del sito a ogni push del repo, quindi è molto più semplice del metodo precedente.
Lo svantaggio di questo metodo è che dovrete eseguire la build dei contenuti del sito prima di ogni push al repository.
Questo metodo utilizza solo i contenuti della cartella _site e li serve direttamente sull’Hosting di Siti Statici di Kinsta.
Passi:
- Aprire il file .gitignore del repo e rimuovere la riga con
_site. - Eseguire il commit e inserire la cartella _site nel repo.
Per aggiornare il sito web, assicuratevi di creare il sito con Jekyll prima di inviarlo al repo.
Distribuire un sito Jekyll su Kinsta con l’Hosting di Siti Statici
Metodo con GitHub Actions
Se avete utilizzato il workflow GitHub Actions per creare il sito web, seguite i passaggi qui sotto per distribuirlo con l’Hosting di Siti Statici di Kinsta.
- Accedere all’account MyKinsta o crearne uno nuovo.
- Andare alla dashboard di MyKinsta.
- Cliccare sull’icona del menu nell’angolo in alto a sinistra dello schermo.
- Nella barra laterale, cliccare su Siti statici.
- Nell’angolo in alto a destra, cliccare su Aggiungi sito.
- Autorizzare il provider Git.
- Selezionare il repository.
- Selezionare il branch
deploycome branch predefinito (dove si trova il contenuto della cartella _site). - Selezionare Distribuzione automatica su commit per distribuire il sito ad ogni push del repo.
- Aggiungere un nome di visualizzazione unico per il sito e cliccare su Continua.
- Impostare le impostazioni di build:
- Comando di build: lasciare vuoto.
- Versione node: lasciare così com’è.
- Directory di pubblicazione:
_site.
- Cliccare su Crea sito.
Kinsta distribuisce il sito e vi chiede l’URL predefinito del sito. Se lo desiderate, potete aggiungere un dominio personalizzato e un certificato SSL.
Metodo di creazione locale
Se avete utilizzato il metodo di creazione locale, seguite gli stessi passi per distribuire il vostro sito web. Dovete solo cambiare il branch da cui volete distribuire (al punto 8). Al posto di deploy, usate main o qualsiasi altro branch a vostra scelta.
Riepilogo
Questo articolo vi ha fornito due metodi possibili per distribuire un sito web Jekyll con l’Hosting di Siti Statici di Kinsta.
Il primo metodo utilizza il CI/CD per eseguire la build dell’applicazione e generare il contenuto della cartella _site in un altro branch del repository. I maggiori vantaggi dell’utilizzo di questo metodo con l’Hosting di Siti Statici di Kinsta sono:
- Con il CI/CD, si possono aggiungere numerosi processi al sito.
- È possibile distribuire il sito con un servizio di hosting eccellente e servirlo con le massime prestazioni.
- Non c’è bisogno di un account premium GitHub per mantenere il repository privato (come ad esempio se si utilizza GitHub Pages).
Nel secondo metodo, abbiamo costruito Jekyll localmente e abbiamo effettuato il push del contenuto della cartella _site nello stesso branch del resto dei file di Jekyll. Questo metodo può essere ripetuto per i repository ospitati su altri provider Git (GitLab e Bitbucket) senza bisogno di ulteriori configurazioni. Si tratta del metodo più semplice, ma con l’inconveniente di dover eseguire la build del sito prima di ogni push al repo.
Oltre a queste opzioni, potete scegliere di distribuire il vostro sito Jekyll con l’Hosting di Applicazioni di Kinsta. Questo offre una maggiore flessibilità di hosting, una gamma più completa di vantaggi e l’accesso a funzioni più robuste. Ad esempio, la scalabilità, la distribuzione personalizzata tramite un Dockerfile e l’analisi completa dei dati storici e in tempo reale.
Date un’occhiata agli altri articoli sui siti web statici sul Blog di Kinsta.
Sono l'Editorial Team Lead di Kinsta. Sono un'appassionata di open source e amo il coding. Con più di 7 anni di esperienza in scrittura tecnica e di editing per l'industria tecnologica, amo collaborare con le persone per creare contenuti chiari e concisi e migliorare i flussi di lavoro.
Lascia un commento