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 test e/o una lint per 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:

  1. Aprire il terminale nella root del repository del sito Jekyll.
  2. 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 deploy

Non aggiungere alcun file a questo branch. Verrà popolato automaticamente dal flusso di lavoro GitHub Actions con il contenuto della cartella _site di Jekyll generata.

  1. Controllare il branch main:
git checkout main
  1. Creare una cartella .github/workflows in main.
  1. 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
  1. Eseguire il commit e inviare il codice al branch main.

Ad ogni push al branch main, il flusso di lavoro GitHub Actions:

  1. Costruisce il sito web Jekyll con i file statici sotto _site.
  2. Crea artefatti con il contenuto di _site.
  3. Controlla il branch deploy.
  4. 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:

  1. Aprire il file .gitignore del repo e rimuovere la riga con _site.
  2. 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.

  1. Accedere all’account MyKinsta o crearne uno nuovo.
  2. Andare alla dashboard di MyKinsta.
  3. Cliccare sull’icona del menu nell’angolo in alto a sinistra dello schermo.
  4. Nella barra laterale, cliccare su Siti statici.
  5. Nell’angolo in alto a destra, cliccare su Aggiungi sito.
  6. Autorizzare il provider Git.
  7. Selezionare il repository.
  8. Selezionare il branch deploy come branch predefinito (dove si trova il contenuto della cartella _site).
  9. Selezionare Distribuzione automatica su commit per distribuire il sito ad ogni push del repo.
  10. Aggiungere un nome di visualizzazione unico per il sito e cliccare su Continua.
  11. Impostare le impostazioni di build:
    1. Comando di build: lasciare vuoto.
    2. Versione node: lasciare così com’è.
    3. Directory di pubblicazione: _site.
  1. 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.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.