Appena 9 mesi fa, ho creato Arberia Theme for Hugo, un tema Hugo progettato per realizzare il mio sito personale proprio come volevo io. Ho anche deciso di rendere il tema un progetto open source. Oggi Arberia Theme for Hugo si è trasformato in un progetto open source in crescita con una vasta base di utenti. In questo tutorial ti mostrerò come iniziare e avere il tuo sito web in funzione in pochi minuti.
Questo tutorial è diviso in due parti:
- Prima parte: Configurare Hugo (una sola volta)!
- Seconda parte: Creare il contenuto e pubblicare
Configuriamo il nostro ambiente di sviluppo
Iniziamo installando tutti gli strumenti di cui hai bisogno. Esistono diversi modi per configuare Hugo sul tuo computer. Io ti mostrerò come istallare Hugo su Mac ma se stai utilizzando Windows o Linux, consulta le guide su come installare Hugo e GitHub CLI per il tuo sistema operativo.
Per usare Hugo dovrai istallare sul tuo computer:
Per fare tutto in maniera automatica bisogna avere installato sul proprio sistema brew che è un gestore di pacchetti a riga di comando. Copia-incolla questa riga su una finestra del Terminale e dai invio
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Lo script ti spiega quello che sta facendo e aspetterà un tuo comando.
Una volta installato brew, procediamo con l’installazione di Golang, Hugo, Git e GitHub CLI.
brew install go
brew install hugo
brew install git
brew install gh
Avviamo Hugo e creiamo la struttura del sito
Bene ora che hai istallato tutto passiamo a creare il tuo sito con Hugo.
Apri il Terminale, crea una cartella ed spostati dentro di essa. Sentiti libero di chiamare la cartella come desideri, io l’ho chiamata miosito:
Sempre dentro la cartella hugo-site creiamo un sito Hugo vuoto (senza tema):
Hugo creerà la struttura base del sito.
Ora basta avviare il server interno di hugo con il seguente comando:
apri il browser e vai al seguente indirizzo http://localhost:1313
Ups… Pagina non trovata, vero? Questo era previsto infatti il sito è ancora privo di contenuti e del tema. Quindi bisogna istallare il tema Arberia Theme for Hugo.
Ora siamo pronti per istallare il tema Arberia ma con lo stesso metodo puoi istallare il tema che vuoi.
Ci sono due modi:
Il modo semplice: Scarica il tema da Github ed estrai lo zip nella cartella /themes
Oppure col Terminale scarica Arberia come modulo di Hugo
git init
cd themes
git submodule add https://github.com/antedoro/arberia.git arberia
Ora usa il mouse e copia
i file contenuti nella cartella themes/arberia/exampleSite
nella cartella miosito/ sovrascivendo quelli già presenti;
la cartella *themes/arberia/archetypes
nella cartella miosito/ sovrascivendo quelli già presenti;
Ora puoi avviare il sito e vedrai i contenuti di esempio:
hugo server -D
e visita nuovamente il link: http://localhost:1313
Fine prima parte!
Personaliziamo il sito
Ora sei pronto per personalizzare il tuo sito. Io uso come editor di codice VS Code di Microsoft ma tu sentiti libero di usare le millemila alternative.
Nella cartella config/_default/
trovi tutti i parametri di configuazione del tema Arberia Theme for Hugo.
Vediamo i più importanti:
title = "Arberia Theme For Hugo"
baseURL = "https://exemple.com"
relativeURLs = "True"
languageCode = "en-us"
defaultContentLanguage = 'en'
theme = "arberia"
Puoi configurare poi anche i menu e sottomenu del sito, ad esempio:
[menu]
[[menu.main]]
identifier = "start_here"
pre = "fa fa-drafting-compass"
post = ""
name = "Start Here"
url = "/start-here"
title = ""
weight = 1
[[menu.main]]
identifier = "view"
pre = "fa fa-th-large"
post = ""
name = "View"
url = ""
title = ""
weight = 3
[[menu.main]]
identifier = "list_view"
pre = "fa fa-list"
post = "Post list view of all posts"
name = "List View →"
url = "/posts/"
title = ""
weight = 4
parent = "view"
[menu.main.params]
color = "#ff7e73"
[[menu.main]]
identifier = "grid_view"
pre = "fa fa-th"
post = "Post grid view of all posts"
name = "Grid View →"
url = "/portfolio/"
title = ""
weight = 5
parent = "view"
[menu.main.params]
color = "#abe5b1"
Aggiornare il tema
Di tanto in tanto aggiorno Arberia Theme for Hugo pertanto ti consiglio aggiornare il tema con questi comandi:
cd themes/arberia
git pull
Creiamo il contenuto
Il contenuto del sito è posizionato nella cartella content/posts/ . Per creare un nuovo articolo dalla root del sito basta dare il comando:
hugo new content posts/<title-of-article>/index.md
Trovi il file del nuovo post bella cartella posts/<title-of-article>/index.md
Ora puoi cominciare a scrivere il tuo articolo in markdown. Apri il file index.md ed inizia a scrivere.
Ecco alcune regole di base per scrivere in Markdown:
Testo in Grassetto: Per scrivere il testo in grassetto, avvolgi la parola o la frase tra due asterischi o due trattini bassi. Ad esempio: **Questo è il testo in grassetto** o __Questo è il testo in grassetto__.
Corsivo: Per scrivere il testo in corsivo, avvolgi la parola o la frase tra un singolo asterisco o un singolo trattino basso. Ad esempio: *Questo è il testo in corsivo* o _Questo è il testo in corsivo_.
Titoli: Puoi creare intestazioni utilizzando il simbolo #. Più # corrispondono a un livello di intestazione diverso. Ad esempio, # Titolo di Livello 1 è un’intestazione di livello 1.
Liste non ordinate: Per creare liste non ordinate, inizia ogni elemento della lista con un asterisco, un trattino basso o un segno più. Ad esempio:
- Elemento 1
- Elemento 2
- Elemento 3
Liste ordinate: Per creare liste ordinate, inizia ogni elemento con un numero seguito da un punto. Ad esempio:
- Primo elemento
- Secondo elemento
- Terzo elemento
Link: Puoi creare link utilizzando la sintassi [testo del link](URL). Ad esempio: [Visita OpenAI](https://www.openai.com).
Immagine: Per inserire un’immagine, puoi utilizzare la sintassi . Ad esempio: .
Citazioni: Per creare citazioni, basta iniziare la riga con il simbolo >. Ad esempio:
Questa è una citazione.
Codice inline: Puoi evidenziare il testo come codice utilizzando il backtick (`). Ad esempio: Questo è del codice.
Blocchi di codice: Per inserire blocchi di codice, puoi utilizzare tre backtick (`` ``````) seguiti da il linguaggio di programmazione (se necessario) e il codice. Ad esempio:
def hello_world():
print("Ciao, mondo!")
Queste sono solo alcune delle regole di base di Markdown. Markdown è un linguaggio leggero e flessibile per la formattazione del testo e supporta molte altre funzionalità. Puoi consultare la documentazione di Markdown per ulteriori dettagli e opzioni avanzate.
Configurare il frontmatter
Ogni post ha un’intestazione dove metterai il titolo dell’articolo, la data di pubblicazione, l’immagine di copertina ecc. Questa sezione di chiama frontmatter.
Il frontmatter del tema Arberia è molto lungo perchè ho voluto configurare tutto nei minimi particolari. Eccoti un esempio parziale di frontmatter in Arberia Theme for Hugo:
---
title: Arberia Installation | Update
subtitle: Read Install and Update instructions here
date: 2022-07-27T10:53:18+02:00
lastmod: 2022-07-27T10:53:18+02:00
draft: false
type: # Use standard-view on nothing for default or courses - video - landingpage null for list view
null
weight: null
featured: false
sidebar: true
toc: false
math:
enable: false
lightgallery: false
license: ""
slug: arberia-installation-update
author: author
avatar: /img/me.jpg
authorLink: ""
description: Descrizione da rivedere se è un doppione subtitle
tags:
- installation
- update
categories:
- arberia_theme
---
Attento alla proprietà draft se settata su true l’articolo essendo in lavorazione non viene pubblicato!
Genera il sito e pubblicalo
Bene quando avrai abbastanza contenuto devi pubblicare.
In Hugo con un solo comando puoi generare l’html del tuo sito e copiarlo nel server del tuo hosting come se stessi copiando una cartella di file word.
Per generare il tuo sito ti basta dare il comando
dalla cartella miosito/
Noterai che è apparsa la cartella public/ che contiene tutto il tuo blog.
Ti basta copiare questa cartella sul tuo server hosting. Se stai cercado una soluzione gratuita puoi usare Firebase base ma offre funzionalità più avanzate se stai creando qualcosa di più complesso.
Conclusioni e Next Steps
Ora hai la tua prima versione della tua homepage. Puoi apportare modifiche localmente e pubblicare il tuo codice ogni volta che aggiorni il blog.
Cosa dovresti fare dopo? Crea ottimi contenuti!