Crearsi il proprio sito web

Da zero in modo economico

Pubblicato il 25/05/2020 da Luca Pasut

Crearsi il proprio sito internet con le tecnologie moderne può risultare semplice ed economico. In pratica ho solo pagato il dominio e nient’altro. Non dovrete iscrivervi ad alcun abbonamento mensile.

Nell’ultimo periodo mi sono messo in testa di crearmi un sito web personale che doveva avere almeno questi 3 requisiti:

  • Una homepage
  • Una pagina su chi sono (una sorta di CV)
  • Una pagina di Blog

Mi sono informato un po' online e ho deciso di condividere la mia esperienza.

INSTALLAZIONE

Per prima cosa bisogna installarsi Visual Studio https://visualstudio.microsoft.com/it/vs/.

Installare Hugo (scegliere il pacchetto in base al proprio sistema operativo) https://www.itnota.com/installing-hugo-windows/.

Dal terminale di Visual Studio dopo aver installato Hugo verificare se è stato installato inserendo il seguente comando:

hugo version

ACCOUNT NECESSARI

  1. GitHubaccount.
  2. Netlify per hostare i file e aggiungere un dominio custom.
  3. Forestry account per mantenere il sito senza dover più scrivere codice.
  4. Dominio web (consiglio di acquistarlo qui https://domains.google.com/).

CREAZIONE SITO

Aprire il terminale e selezionare la cartella in cui volete salvare il vostro sito WEB. Ad esempio:

cd C:\Users\luca\Sito\

Creare il proprio nuovo sito con il comando seguente:

hugo new site NuovoSito

A questo punto avete creato il vostro sito, che però risulterà vuoto. Per partire da una base evitando di scrivervi tutto il sito da zero vi consiglio di utilizzare uno dei temi presenti nel sito https://themes.gohugo.io/.

Una volta trovato il tema che vi piace di più clonate il tema nel vostro account di GitHub, premendo il tasto fork in alto a destra. Io ho utilizzato come base di partenza questo https://github.com/themefisher/kross-hugo.

Tornate nel terminale di VisualStudio e scrivete questo comando per aggiungere il tema al proprio sito. Ad esempio:

git submodule add https://github.com/luka2288/kross-hugo themes/kross-hugo

Per effettuare un primo test del proprio sito copiate tutti i file contenuti nella cartella examplesite (ad esempio nel mio caso è themes/kross-hugo/examplesite) e anche le cartelle layouts e static nella cartella principale. Dopo aver copiato questi file utilizzare il seguente comando:

hugo server

Andate nel browser nel seguente indirizzo http://localhost:1313/. Qui potete visualizzare l’anteprima del vostro sito con il tema che avete scelto.

Ora potete andare a modificare i vari file html (codice della pagina), md (file per gli articoli del blog) e yml (file di configurazione delle pagine html) per configurare il vostro sito come volete. Salvando i file che modificate vedrete il risultato direttamente sul browser.

AGGIUNGERE LA REPOSITORY SU GITHUB

Scaricate GitHub Desktop dal sito https://desktop.github.com/.

Sincronizzare la cartella del sito con l’applicazione GitHub Desktop.

AGGIUNGERE LA REPOSITORY SU FORESTRY.IO

Accedere a forestry con il proprio account di Github e cliccare su import to Forestry.

Ora cliccate sempre su mark everything as done e andate nelle configurazioni per cambiare l’url base. A sinistra della pagina vi troverete tutte le pagine del blog da modificare.

SETUP NETLIFY

Andare sul proprio account di netlify e aggiungere un nuovo sito. Scegliete la repository di git per importare il proprio sito su netlify.

Andate in site settings per cambiare il nome del sito.
Andate nel menu deploy nel menu in alto.
Cliccate su Deploy e aspettate.

BOOM! Il vostro sito è live. Ora potete tornare su Forestry per aggiungere, rimuovere o modificare tutti i settaggi e contenuti.

Per la configurazione del DNS vi consiglio di vedere questo video se avete acquistato il vostro dominio da Google Domains.