Sai che ne sono innamorato Hugo per realizzare siti web semplici che non necessitano di contenuti dinamici.
E una delle caratteristiche che mi piace di più è che ci sono molti servizi che ci offrono per ospitare gratuitamente i siti Web realizzati in Hugo.
Oggi vengo a parlarvi di uno di questi servizi: Netlify
Non lasciarti ingannare Netlify Hugo ci fa ospitare gratuitamente il nostro sito web.
Netlify è un servizio professionale e di qualità.
Te lo dico in video
Iscriviti a un canale mi:
Allora perché ci permettono di ospitare il nostro sito web gratuitamente?
Molto semplice: stanno evangelizzando 🙂
Quante persone conosci che non realizzano il loro sito Web in WordPress? Pochissimi vero?
Servizi come Netlify, Cloudflare, DigitalOcean offrono di ospitare gratuitamente il tuo sito Web statico per ottenere quote di mercato e quando lo riceveranno sono sicuro che non sarà gratuito.
Il fatto è che ora possiamo creare il nostro sito Web e ospitarlo sui migliori server e tutto questo gratuitamente 😉
Di cosa hai bisogno per ospitare il tuo sito web su Netlify
In questo tutorial non spiegherò come installa Hugo né nulla che abbiamo già spiegato nel Corso Hugo per realizzare reti statiche.
In questo tutorial vedremo come creare un sito web in due minuti e come ospitarlo su Netlify.
Quindi suppongo che:
- Hai Hugo installato sul tuo computer
- Hai un account di Github
- Hai un editor di codice come Visual Studio Code
Creazione del mio sito web in Hugo
Entro nel terminale del mio computer, vado nella directory dove creerò il mio sito web e scrivo:
hugo new site nombre-mi-web
E ricevo il seguente messaggio:
Ora aggiungo un template al mio sito web, per questo entro nella cartella THEMES e porto il template da Github con il seguente comando:
git clone https://github.com/halogenica/beautifulhugo.git
Ecco la cattura di questo processo:
Ora copio il contenuto della cartella /themes/beautifulhugo/exampleSite nella radice del mio sito web.
Mi dirà se voglio sovrascrivere, dico di sì.
occhio
Il contenuto della cartella exampleSite, non la cartella stessa.
Cioè, questo:
Una volta copiato nella directory principale del nostro sito Web, possiamo eseguire il server locale di Hugo per vedere che il sito Web funziona.
Dobbiamo eseguire il comando nella directory principale del nostro sito Web:
hugo serverE dobbiamo vedere qualcosa del genere per vedere che va tutto bene:
Se tutto è andato bene, andiamo all'indirizzo che appare nel terminale. Di solito è http://localhost:1313/
E dovremmo vedere qualcosa del genere:
Carica il sito Web su Github
Prima di ospitare il nostro sito Web su Netlify, dobbiamo caricare il nostro sito Web realizzato localmente in un repository su Github.
Per questo usiamo Git:
git init
git add .
git commit -m "mi primera versión"
Creiamo un repository vuoto in Github e Github stesso ci dice i comandi che dobbiamo usare per caricare il nostro repository:
Nel mio caso specifico, i comandi da utilizzare sono i seguenti:
git remote add origin git@github.com:tolentinomh/netlify-prueba.git
git branch -M main
git push -u origin main
E ora che abbiamo tutto pronto, è tempo di ospitare il nostro sito Web su Netlify.
Carica il nostro sito Web su Netlify
Se non hai un account Netlify, lo è tempo per crearlo
La mia raccomandazione è di creare un account con GitHub e quindi di importare più facilmente i tuoi repository Github in Netlify.
Una volta creato il nostro account e connesso a githug, creeremo un nuovo sito:
Facciamo clic su Importa un progetto esistente
Nella schermata successiva scegliamo il repository del nostro sito Web e lasciamo tutto di default:
Ora facciamo clic su Distribuisci sito e ...
FALLIRÀ 😭
Ma non preoccuparti, lo sistemeremo facilmente.
Riceverai un errore come il seguente:
Errore
Fallito durante la fase di "preparazione del repository": errore durante il check-out dei sottomoduli: fatal: nessun URL trovato per il percorso del sottomodulo "themes/beautifulhugo" in .gitmodules
La cosa buona è che l'errore è molto descrittivo e ci sta dicendo cosa c'è che non va.
Dobbiamo andare alla directory principale del nostro sito Web e creare un file chiamato .gitmodules.
Nel mio caso lo faccio da Visual Studio Code
Il contenuto è il seguente:
[submodule "themes/beautifulhugo"]
path = themes/beautifulhugo
url = https://github.com/halogenica/beautifulhugo
Invia le modifiche a Github
Ricorda che stiamo lavorando a livello locale. Ogni volta che apportiamo modifiche, dobbiamo caricarle su Github
Una volta caricate le modifiche con Git, ricorda, git add., git commit -m "il tuo messaggio", git push, torniamo a Netlify e vedremo che dopo alcuni secondi o minuti tenta di generare nuovamente il nostro sito Web e se adesso è andato tutto bene Non mancherà e te lo dirà Pubblicato:
E se provi ad accedere all'url temporaneo generato da Netlify puoi già vedere il tuo sito web ma con un piccolo problema: I formati e le immagini non vengono visualizzati bene
Questo perché nel file di configurazione configure.toml del tuo sito web devi modificare l'URL nell'URL che Netlify ci fornisce e successivamente nel dominio reale:
E una volta che le modifiche sono state apportate e caricate nel repository, abbiamo caricato il nostro fantastico sito Web:
Configura il dominio definitivo in Netlify
Ora che il nostro sito web sta lavorando su Netlify, dobbiamo associare il nostro dominio ad esso.
Per farlo non ci resta che configurare il DNS
Quando facciamo clic sul passaggio due Imposta un dominio personalizzato, ci chiederà quale dominio vogliamo associare al nostro progetto.
Se il dominio non esiste, ci chiederà se vogliamo acquistarlo e se esiste, ci dice che dobbiamo configurarlo.
Se clicchiamo su Verifica configurazione DNS ci dirà il DNS che dobbiamo configurare:
E il gioco è fatto, se sei arrivato fin qui hai già il tuo sito web realizzato con Hugo e ospitato su Netlify 😉
Spero ti sia stato utile.