Rendi la creazione di siti Web di nuovo divertente con Hugo

I siti statici sono popolari per molte ragioni. Evitare soluzioni di overkill e mantenere un progetto semplice senza database, troppe dipendenze o configurazioni specifiche lato server (no PHP, no MySQL / MSSQL, .NET, Python, Ruby e così via) rendono molto semplice l'implementazione e la robustezza contro numerose possibili vulnerabilità. In definitiva, diventano pagine HTML di base per l'utente.

In questa guida, ti mostrerò come configurare il tuo ambiente di sviluppo con Hugo e creare il tuo primo sito web Hugo statico.

Un nuovo approccio ai siti web statici

Il leggendario acronimo di design KISS - Keep It Simple, Stupid - può essere applicato a Hugo e come si avvicina allo spazio del generatore di siti Web statici.

Built in Go, Hugo raccoglie rapidamente le pagine statiche (impiega frazioni di millisecondi per compilare un sito di piccole dimensioni e può fare migliaia di pagine in pochi secondi).

Inoltre, Hugo fornisce strumenti essenziali per il flusso di lavoro del sito Web statico (inclusi strumenti di implementazione e migrazione), consentendo a sviluppatori e progettisti di concentrarsi sulle parti divertenti come esercitare la propria creatività e implementare la creatività in questione nella costruzione del sito Web.

Perché siti web statici?

Quando costruiamo siti Web basati sui contenuti, possiamo assumere alcune generalità su tutti i siti e Hugo fornisce un framework per questo. Nello specifico, possiamo prendere tipi di contenuto come post, categorie, recensioni o prodotti e organizzare i dati. Quindi, possiamo dare a ciascuno un aspetto specifico tramite modelli e fogli di stile.

Andando avanti, possiamo davvero guidarlo ovunque ci sia bisogno nello spazio sito web statico HTML / CSS / JS. Quando ci pensi pragmaticamente, è un grande spazio che lascia spazio alla creatività.

jQuery funzionerà correttamente e non vi è nulla che ti impedisca di utilizzare servizi di terze parti sulla tua pagina statica, se ne hai bisogno. Quindi non limitarti a pensare di non poter integrare altre librerie o applicazioni nei tuoi siti statici. Non è proprio il caso: puoi utilizzare qualsiasi delle librerie JavaScript disponibili.

Quindi per alcune pagine di un opuscolo aziendale tipo sito web, con un link a un modulo di Google per una pagina Contattaci. E se hai bisogno di visualizzare altri tipi di dati, puoi usare JavaScript per quell'aspetto del tuo sito.

Come può funzionare per la mia azienda e i miei clienti?

Prendiamo, ad esempio, un piccolo negozio o un libero professionista con alcuni prodotti o servizi che non richiedono un'intera soluzione di e-commerce. Invece, richiedono solo informazioni sul prodotto e un link "contatto" sulla pagina. Hugo può farlo entro la fine della mattinata. L'hosting non è nemmeno un grosso problema - è un ripensamento, davvero, perché stiamo semplicemente servendo pagine HTML di base.

Hugo funziona bene anche per la documentazione del progetto sui progetti GNU. Ad esempio, pensa alle start-up o alle PMI che hanno bisogno di una presenza semplice.

Quali sono le limitazioni dei siti statici?

Quello che Hugo non può fare è dinamico contenuto, ad esempio moduli basati su database, ricerca o sistemi utente. Se questo è ciò che stai cercando, allora certamente Hugo lo è non ciò che vuoi. Ma per le altre volte, quando ti ritrovi a dire "non possiamo semplicemente creare una pagina di base per questo?" I generatori di siti Web statici sono un'opzione solida. Inoltre, tieni presente che Hugo non è l'unico generatore di siti statici. Ci sono molti là fuori e sono in giro da molto tempo, ecco una lista di loro.

Per la creazione di blog di contenuti dal vivo come siti di notizie, Hugo potrebbe essere un'ottima soluzione per far saltare rapidamente una pagina per quella copertura da collegare dal tuo sito principale, scaricandola online in pochi minuti, il che significa che puoi continuare ad aggiungerlo velocemente e ridistribuire le modifiche molto velocemente. Ma per creare un intero sito di notizie con ricerca e molti scrittori, non sarebbe davvero appropriato usare Hugo.

A Hugo manca anche l'uso di strumenti più avanzati per la sua pipeline di asset come ES6 e Sass: se si desidera utilizzare tale tecnologia, è necessario includere Gulp o Grunt per portare a termine il lavoro; altrimenti, vanilla CSS e JavaScript funzionano meglio.

Il tuo ambiente di sviluppo domestico

Hugo è scritto in Go e ha il supporto per molte piattaforme, per visualizzare tutte le versioni che puoi pubblicare qui

Per gli utenti macOS con HomeBrew, l'installazione può essere eseguita come segue:

prepara l'aggiornamento e prepara l'installazione hugo

Ulteriori informazioni sull'installazione per Mac OSX e Windows

Una volta installato Hugo, possiamo testare l'installazione eseguendo aiuto di hugo nel prompt dei comandi o versione hugo

Crea il tuo primo sito web statico con Hugo

Ora che abbiamo installato Hugo, possiamo iniziare a creare il sito web. Esegui il seguente comando sostituendo 'your-sitename-here' con il nome del tuo progetto:

$ hugo nuovo sito your-sitename-qui

Questo creerà un'impalcatura per il tuo sito che potrai vedere nel tuo mirino

o nel tuo terminale tramite il albero comando

Hugo ha creato 5 sottodirectory e 1 file, che usa per creare il sito web finale da qui che cosa significano tutti:

archetipi: qui definiamo qual è il nostro contenuto, possiamo impostare tag o categorie predefiniti e definire tipi come post, tutorial o prodotti qui
config.toml: la configurazione principale è qui, possiamo definire tutti i titoli del sito web, lingua, URL ecc. qui
soddisfare: le pagine di contenuto del sito sono memorizzate qui, le sottodirectory sono utilizzate per le sezioni per aiutare a organizzare il contenuto, creare a contenuti / prodotti per il contenuto dei tuoi prodotti, ad esempio
dati: I dati del sito come configurazioni di localizzazione vanno qui
layout: i layout per la libreria Go html / template che Hugo utilizza vanno qui
statico: Qualsiasi file statico qui verrà compilato nel sito Web finale, è consentita una totale libertà in modo da poter servire qualsiasi file css, js o immagine ad esempio.
temi: Crea nuovi temi o clona temi da github in questa directory per utilizzarli con il tuo sito.

"Hello World" a Hugo

Abbiamo bisogno di aggiungere un post per vedere il sito che abbiamo appena creato, farlo usando il seguente comando:

$ hugo new post / first-post.md

Ora modifica il file in content / post / first-post.md, conterrà qualcosa di simile al seguente per impostazione predefinita:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "primo post" +++

Materia anteriore

Il contenuto dentro +++ è la configurazione di TOML per il post. Questa configurazione è chiamata materia prima. Ti consente di definire la configurazione del post insieme al suo contenuto. Per impostazione predefinita, ogni post avrà le proprietà di configurazione mostrate sopra.

Aggiungi del testo dopo il +++così:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "primo post" +++ Ciao mondo!

Servire dati e ricaricare live

Quindi possiamo vedere la funzionalità live reload che è integrata con Hugo, facciamo alcune modifiche al sito e vediamo cosa succede.

Per prima cosa avviare il server eseguendo

$ hugo server

Ora se apporti delle modifiche al tuo file, vedrai Hugo ricaricare all'istante.

Il tuo sito Web sarà disponibile all'indirizzo http: // localhost: 1313 ma resisti - vedrai comunque solo un pagina bianca vuota a questo punto, perché non abbiamo definito un tema!

Aggiungi un tema

Hugo ha una libreria di temi molto robusta e versatile che usa Go's html / template biblioteca. I temi sono facili da utilizzare, l'installazione viene eseguita semplicemente clonando il repository di un tema nel temi directory per il tuo sito Hugo.

Hugo non ha un tema predefinito, quindi tu dovere impostare uno.

Ci sono un sacco di temi open source tra cui scegliere.

Aggiungiamo un sacco di temi al nostro sito in modo da poter giocare con tutti loro e vedere ciò che ci piace. Fatelo eseguendo quanto segue nella nostra directory di Hugo:

$ git clone --recursive https://github.com/spf13/hugoThemes.git temi Clonazione in 'temi' ... remoto: conteggio oggetti: 880, fatto. remote: compressione di oggetti: 100% (5/5), fatto. remote: Totale 880 (delta 1), riutilizzato 0 (delta 0), 875 Oggetti riusati a pacchetto: 100% (880/880), 669,20 KiB | 288,00 KiB / s, fatto. Delta di risoluzione: 100% (506/506), fatto. Controllo della connettività ... fatto.

Ora vedrai un intero mucchio di temi clonati nel tuo sito. Ce ne sono molte quindi avrai tempo per una pausa mentre clona ...

Utilizzando un tema

Per usare un tema basta avviare Hugo con il -t o --tema parametro come questo

$ hugo -t ThemeName

O puoi aggiungere al tuo config.toml :

tema: "ThemeName"

Il THEMENAME deve corrispondere al nome della directory all'interno / temi.

Quando hai scelto un nome di tema dalla directory, avvia il tuo server con hugo server --theme = ThemeName e dai un'occhiata a http: // localhost: 1313

Ecco alcuni esempi tratti da alcuni dei temi che abbiamo clonato, ho usato elemosinare, croccante ecactus dare un'occhiata in giro ci sono tanti tra cui scegliere!

Così ora hai generato un sito web con un post di Hello World, cos'altro possiamo fare?

Costruire un blog

Creare un blog di base è davvero facile da fare con Hugo. Innanzitutto, devi definire un archetipo per il post predefinito, quindi crea un nuovo file in archetipi / default.md e aggiungi il seguente come materia anteriore:

+++ tags = ["welding", "metal work"] categories = ["posts"] +++

Qui impostiamo alcuni tag predefiniti, per un blog sulla saldatura possiamo essere sicuri di volere questi tag su tutti i nostri post, e creiamo una categoria chiamata post solo così abbiamo un valore predefinito quando creiamo un post.

Ora aggiungi il tuo primo post tramite il terminale in questo modo:

$ hugo nuovo post / tig-welding-a-bike-frame.md

Questo creerà un post con l'archetipo che hai definito prima, ora puoi aprirlo in un editor di testo e iniziare a scrivere via nel formato markdown!

Aggiungiamo altri post:

$ hugo nuovo post / welding-a-roll-cage.md

Ancora una volta per aggiungere contenuti, basta aprire il file creato da Hugo e iniziare ad aggiungere contenuto alla fine del file dopo la questione frontale.

Costruire una galleria fotografica

Per costruire una galleria fotografica con Hugo useremo l'eccellente strumento hugo-gallery disponibile su GitHub.

Il suo utilizzo è così:

hugo-gallery [Baseurl]</code></p><p>Il <code>hugo-gallery</code> lo strumento creerà una nuova directory di post contenente un file di markdown per ogni immagine nella directory di origine che consente una presentazione ordinata. Leggerà tutti i file dal <code>Percorso di origine</code> directory e salvarli nella directory statica del sito di Hugo. <br></p><p>Creerà una nuova directory all'interno della directory dei contenuti basata su <code>Titolo</code> fornito ad es <code>Contenuto / saldatura</code></p><p>Per esempio: </p><pre>$ hugo-gallery static / images / welding-photos welding "Foto delle mie folli abilità di saldatura"</pre><p>Visita <code>localhost: 1313 / saldatura</code> per vedere il contenuto.</p><h2>Distribuzione</h2><p>Hugo ha diversi strumenti per l'implementazione come hugomac, un'app di menu OSX che consente all'utente di pubblicare facilmente nell'hosting EC2. Nessuna riga di comando necessaria.</p><p>Inoltre, hugodeploy fornisce una configurazione SFTP da distribuire, oppure puoi semplicemente utilizzare le distribuzioni automatizzate fornite con Hugo.</p><h2>Conclusione</h2><p>I generatori di siti statici sono in circolazione da un po 'di tempo e Hugo si basa sul set di strumenti che rende facile e veloce il bombardamento di siti o persino la migrazione di un sito esistente da WordPress a Hugo. Ci sono molti strumenti per Hugo, inclusi gli editor di front-end che li controllano.</p><p>Andando avanti, sarà bello vedere più moduli per Hugo che forniscono supporto per cose come un modulo di contatto e il supporto per la galleria, o per i post correlati, ad esempio. </p><p>La roadmap di Hugo ha molte idee interessanti come il ridimensionamento dinamico delle immagini, il supporto per l'importazione di rsync e immagini dai provider di hosting e un hosting più semplice con AWS EC2 e integrazione con GitHub.</p><p>Se non stai usando Hugo, assicurati di controllare il progetto mentre si sviluppa!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Codice</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/crafts/make-cute-origami-bunny-decorations-for-easter.html">Crea decorazioni per coniglietti Origami carini per la Pasqua</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/make-cute-origami-bunny-decorations-for-easter_41.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/crafts/make-copper-and-pearl-earrings-for-valentines-day.html">Fai orecchini in rame e perle per San Valentino</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/make-copper-and-pearl-earrings-for-valentines-day_13.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Ricerca..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>