Iniziare con Hugo: come creare un sito Web semplice

Hugo è un generatore di siti statici che ti consente di creare un sito Web con poca o nessuna esperienza di codifica. Puoi utilizzare temi predefiniti come base per il design del tuo sito web. Ciò ti consente di concentrarti maggiormente sul popolamento del sito con i tuoi contenuti.

Poiché Hugo viene utilizzato principalmente per siti Web statici, è perfetto per creare blog, portfolio o siti di documentazione.

Puoi facilmente configurare e creare un sito Web Hugo utilizzando un tema Hugo predefinito. Con pochi brevi passaggi, puoi quindi aggiungere contenuti e pagine al tuo sito Web utilizzando Markdown.

Come installare Hugo

Devi installare il generatore di siti statici di Hugo per creare, eseguire e testare un sito Web Hugo. Secondo il documentazione di Hugo, ci sono molti modi per installarlo. Di seguito sono elencate alcune delle opzioni.

Mac

Puoi installare Hugo usando Homebrew.

1. Apri il tuo terminale macOS.
2. Installa il gestore di pacchetti Homebrew.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Installa Hugo.

   birra installare hugo

finestre

Avrai bisogno di un gestore di pacchetti equivalente per Windows. Ad esempio, puoi usare il Gestore di pacchi scoop.

1. Apri Windows PowerShell, che dovrebbe già far parte del tuo sistema operativo Windows.
2. Se stai installando Scoop per la prima volta, potrebbe essere necessario impostare la tua politica di esecuzione.

   Impostare-ExecutionPolicy RemoteSigned -scopo Utente corrente

3. Installa Scoop:

   iex (nuovo-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Installa Hugo:

   notizia in anticipo installare hugo

Come creare un progetto Hugo

Per creare un nuovo progetto Hugo, dovrai utilizzare il built-in Hugo nuovo sito comando.

1. Apri il terminale o il prompt dei comandi. Passa alla cartella in cui desideri creare il tuo progetto.
2. Eseguire il Hugo nuovo sito comando:

   hugo nuovo luogo nuovo-hugo-sito web

3. Vai alla posizione del tuo progetto Hugo in Esplora file.
4. Apri la cartella del progetto. Vedrai che il tuo nuovo sito Web Hugo ha la struttura di file e cartelle richiesta per il funzionamento del tuo sito Web.

Come aggiungere un tema

Al momento, il tuo progetto contiene solo le cartelle di base principali per il progetto Hugo. L'esecuzione del tuo sito Web localmente a questo punto mostrerebbe solo una schermata vuota. Dal momento che non hai ancora alcun design HTML, CSS o UI configurato per il tuo sito web, dovrai aggiungerli.

Hugo fornisce già una libreria di built-in Temi Hugo creato dagli sviluppatori.

1. Seleziona un tema che ti piace. Ogni tema può avere istruzioni di configurazione leggermente diverse, mostrate nella rispettiva pagina di anteprima. Questo tutorial utilizzerà il Tema del racconto come esempio.
2. Passa alla cartella principale del tuo progetto in un terminale o riga di comando.

   CD nuovo-hugo-sito web

3. Esegui il comando per aggiungere il tema Tale. Puoi aggiungere il tema come sottomodulo, che creerà una nuova cartella chiamata racconto dentro il tema cartella.

   git init
   git sottomodulo aggiungi https://github.com/EmielH/tale-hugo.git temi/tale

   In alternativa, puoi clonare il repository dei racconti GitHub nella cartella dei temi del tuo progetto.

   idiota clone https://github.com/EmielH/tale-hugo.git temi/tale

4. Vai alla cartella del tuo progetto. Clicca sul temi cartella per aprirlo. Indipendentemente dal comando che hai usato, ci sarà un nuovo racconto cartella che memorizza il tema appena scaricato.
5. Nel config.toml file, aggiungi il tema del racconto come parte della configurazione. Questo dirà a Hugo di usare HTML, CSS e altri stili inclusi nel tema Tale.

   tema = "racconto"

Come aggiungere pagine al tuo sito web

Puoi scrivere i tuoi contenuti in qualsiasi formato accettato da Hugo. Hugo convertirà quindi automaticamente i tuoi file in file HTML quando li servirà all'utente. Ciò rende veloce sia la compilazione che la distribuzione. Questo esempio utilizzerà Markdown, un semplice linguaggio di testo, come formato per i tuoi contenuti.

Puoi scrivere Markdown principalmente in un inglese semplice con alcuni simboli aggiunti per specificare qualsiasi formattazione. Ciò include l'aggiunta di simboli per rappresentare i titoli, quali parole sono in grassetto o qualsiasi altra formattazione di base di cui potresti aver bisogno.

Per aggiungere una nuova sottopagina o pubblicare un post sul tuo sito web, dovrai aggiungere un nuovo file Markdown nel file contenuto cartella. Ogni post o pagina avrà il proprio file Markdown ad esso associato.

1. Apri il contenuto cartella all'interno del tuo progetto Hugo. Crea un nuovo file Markdown chiamato myFirstPost.md.
2. Apri il file in qualsiasi editor di testo come Notepad++ o Visual Studio Code.
3. Nella parte superiore del file, aggiungi alcuni metadati. Ciò includerà informazioni importanti sul post. Il tema che stai utilizzando formatterà queste informazioni in un certo modo sulla pagina.

   
   autore: "Il tuo nome"
   titolo: "Il mio primo post"
   Data: "2022-05-17"
   

4. Dopo aver aggiunto i metadati, puoi iniziare ad aggiungere i tuoi contenuti utilizzando Markdown.

   Questo è il mio primo post sul mio sito Hugo!
   Il tema Hugo utilizzato perquesto il sito si chiama Tale.
   Esso è molto semplice da installare e configurare.
   # Sottotitolo
   Questo è alcuni contenuti.
   # Un altro sottotitolo
   Questo è più contenuti.

5. Sentiti libero di aggiungere più file di markdown per aggiungere più pagine al tuo sito web.

Come eseguire e testare il tuo sito Web Hugo in locale

Per gestire il tuo sito web, usa il Hugo servire comando.

1. Apri un terminale o una riga di comando.
2. Vai alla cartella principale del tuo progetto Hugo.
3. Corri il Hugo servire comando:

   Hugo servire

4. Attendi che il sito Web completi il ​​processo di avvio. Una volta completato, il terminale stamperà un messaggio che indica l'indirizzo locale da cui è possibile accedere al sito Web. Di solito, questo è http://localhost: 1313/.
5. Apri un browser web ed entra http://localhost: 1313/o qualsiasi indirizzo fornito dal terminale. Vedrai la pagina principale del tuo sito web Hugo.
6. Sulla pagina ci sarà un elenco di post per ogni file di markdown che hai. In questo caso, ci sono due file markdown popolati con contenuto. Ciò include la pagina myFirstPost.md che hai creato in precedenza. Include anche un nuovo post chiamato bananaCakeRecipe.md.
7. Fare clic sul collegamento dell'intestazione su una delle anteprime. Ti porterà alla pagina intera per quel particolare post.

Ospitare il tuo sito Web Hugo

Ottenere un sito Web statico attivo e funzionante è semplice e veloce con Hugo. Puoi utilizzare e configurare temi predefiniti ed eseguire il tuo sito Web Hugo in locale per i test. Puoi anche aggiungere pagine di contenuti al tuo sito Web utilizzando Markdown.

Dopo aver creato il tuo sito Web Hugo, puoi iniziare a saperne di più su come ospitarlo. Esistono molte opzioni di hosting di siti Web gratuiti tra cui scegliere come Dropbox, Google Drive o OneDrive.

Come ottenere hosting di siti Web gratuito con Dropbox, Google Drive o OneDrive

Leggi Avanti