Maak het maken van websites weer leuk met Hugo

Statische sites zijn om vele redenen populair. Het vermijden van overkill oplossingen en het eenvoudig houden van een project zonder databases, te veel afhankelijkheden, of specifieke server-side configuraties (geen PHP, geen MySQL / MSSQL, .NET, Python, Ruby, etc.) maken het zeer eenvoudig te implementeren en robuust te zijn tegen tal van mogelijke kwetsbaarheden. Uiteindelijk worden dit eenvoudige HTML-pagina's die aan de gebruiker worden aangeboden.

In deze gids zal ik je laten zien hoe je je ontwikkelomgeving in te stellen met Hugo en je eerste statische Hugo-website te bouwen.

Een gloednieuwe aanpak van statische websites

Het legendarische ontwerp-acroniem KISS - Keep It Simple, Stupid - kan worden toegepast op Hugo en hoe deze de statische website-generatorruimte benadert.

Hugo is gebouwd in Go en stelt snel uw statische pagina's samen (het kost een aantal milliseconden om een kleine site te compileren - en kan duizenden pagina's in seconden maken).

Hugo biedt ook essentiële gereedschappen voor de statische website-workflow (inclusief implementatie- en migratietools), waardoor ontwikkelaars en ontwerpers zich kunnen concentreren op de leuke delen, zoals het uitoefenen van hun creativiteit en het implementeren van deze creativiteit in de constructie van de website..

Waarom statische websites?

Wanneer we op inhoud gebaseerde websites bouwen, kunnen we enkele algemeenheden op alle sites aannemen en Hugo geeft daar een kader voor. We kunnen met name inhoudstypen zoals berichten, categorieën, recensies of producten vastleggen en de gegevens ordenen. Vervolgens kunnen we elk een specifieke look geven via sjablonen en stylesheets.

In de toekomst kunnen we het dan echt overal naartoe rijden binnen de ruimte van de HTML / CSS / JS-statische website. Als je er pragmatisch over nadenkt, is dat een grote ruimte die veel ruimte biedt voor creativiteit.

jQuery wordt goed uitgevoerd en er is niets dat u stopt met het gebruik van services van derden op uw statische pagina, als u ze nodig hebt. Dus beperk uzelf niet door te denken dat u andere bibliotheken of applicaties niet kunt integreren in uw statische sites. Het is echt niet het geval - u kunt alle beschikbare JavaScript-bibliotheken gebruiken.

Dus voor een paar pagina's van een bedrijfsbrochure type website, met een link naar een Google Formulieren voor een Contact Us-pagina. En als u andere soorten gegevens wilt weergeven, kunt u JavaScript gebruiken voor dat aspect van uw site.

Hoe kan het werken voor mijn bedrijf en mijn klanten?

Neem bijvoorbeeld een kleine winkel of freelancer met een paar producten of diensten waarvoor geen volledige eCommerce-oplossing nodig is. In plaats daarvan hebben ze alleen productinformatie en een link 'contact' op de pagina nodig. Hugo kan het aan het einde van een ochtend doen. Hosting is niet eens een groot probleem - het is eigenlijk een bijzaak, want we serveren gewoon eenvoudige HTML-pagina's.

Hugo werkt ook goed voor projectdocumentatie over GNU-projecten. Denk bijvoorbeeld aan start-ups of MKB-bedrijven die behoefte hebben aan een eenvoudige aanwezigheid.

Wat zijn de beperkingen van statische sites?

Wat Hugo niet kan doen is dynamisch inhoud, bijvoorbeeld door een database aangedreven formulieren, zoek- of gebruikerssystemen. Als dat is wat u zoekt, dan is Hugo dat zeker niet wat je wilt. Maar voor de andere keren, wanneer je merkt dat je zegt "kunnen we hier niet gewoon een basispagina voor opzetten?" Statische website-generators zijn een solide optie. Houd er ook rekening mee dat Hugo niet de enige statische site-generator is. Er zijn veel mensen die er al heel lang zijn, hier is een lijst van hen.

Voor het bouwen van live inhoudsblogs zoals nieuwssites, zou Hugo een geweldige oplossing kunnen zijn om snel een pagina te maken waarop die dekking kan worden gekoppeld vanaf uw hoofdsite en deze binnen enkele minuten online te krijgen, wat betekent dat u snel kunt blijven toevoegen en de wijzigingen opnieuw kunt implementeren heel snel. Maar voor het maken van een volledige nieuwssite met zoeken en vele schrijvers, zou het echt niet geschikt zijn om Hugo te gebruiken.

Hugo mist ook het gebruik van geavanceerdere tools voor zijn activapijplijn zoals ES6 en Sass - als je die technologie wilt gebruiken, moet je Gulp of Grunt opnemen om de klus te klaren; anders werkt het vanilla CSS en JavaScript het beste.

Uw thuisontwikkelingsomgeving

Hugo is geschreven in Go en heeft ondersteuning voor vele platforms, om alle releases te bekijken die je hier kunt bezoeken

Voor macOS-gebruikers met HomeBrew kan de installatie als volgt worden gedaan:

update brouwen && brew hugo installeren

Meer informatie over installatie voor Mac OSX en Windows

Nadat Hugo is geïnstalleerd, kunnen we de installatie testen door deze uit te voeren hugo help in de opdrachtprompt of hugo versie

Uw eerste statische website maken met Hugo

Nu Hugo is geïnstalleerd, kunnen we beginnen met het maken van de website. Voer de volgende opdracht uit om 'uw sitenaam-hier' te vervangen door uw projectnaam:

$ hugo nieuwe site your-sitename-here

Hiermee wordt een steiger voor uw site gemaakt die u in uw vinder kunt bekijken

of in uw terminal via de boom commando

Hugo heeft 5 submappen en 1 bestand gemaakt, waarvan het gebruik maakt om de uiteindelijke website te maken, wat ze allemaal betekenen:

archetypes: hier definiëren we wat onze inhoud is, kunnen we standaardtags of -categorieën instellen en soorten zoals een bericht, zelfstudie of product hier definiëren
config.toml: hoofdconfiguratie is hier, we kunnen hier de titel, taal, URL's enz. van alle websites definiëren
inhoud: de inhoudspagina's van de site worden hier opgeslagen, submappen worden gebruikt voor secties om de inhoud te ordenen, een te maken content / producten bijvoorbeeld voor de inhoud van uw producten
gegevens: Locatiegegevens zoals localisatieconfiguraties gaan hier
lay-outs: lay-outs voor de bibliotheek Go html / template die Hugo gebruikt gaan hier naartoe
statisch: Alle statische bestanden hier worden gecompileerd naar de uiteindelijke website, totale vrijheid is toegestaan, zodat u elk css-, js- of afbeeldingsbestand kunt dienen, bijvoorbeeld.
thema's: Maak nieuwe thema's of kloon thema's uit github in deze map om ze te gebruiken met uw site.

"Hallo wereld" in Hugo

We moeten een bericht toevoegen om de site te zien die we zojuist hebben gemaakt, dit doen we met de volgende opdracht:

$ hugo nieuwe post / first-post.md

Bewerk het bestand nu in content / post / first-post.md, het zal standaard iets van het volgende bevatten:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "eerste bericht" +++

Voorzijde

De inhoud erin +++ is de TOML-configuratie voor de post. Deze configuratie wordt genoemd voorste zaak. Hiermee kunt u de postconfiguratie samen met de inhoud ervan definiëren. Standaard heeft elk bericht de configuratie-eigenschappen die hierboven worden weergegeven.

Voeg wat tekst toe na de +++zoals zo:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "eerste bericht" +++ Hallo wereld!

Presenteren van gegevens en live herladen

Dus we kunnen de live reload-functionaliteit bekijken die is ingebouwd met Hugo, laten we wat wijzigingen aanbrengen in de site en kijken wat er gebeurt.

Start de server eerst door te draaien

$ hugo-server

Als u nu enkele wijzigingen in uw bestand aanbrengt, ziet u Hugo onmiddellijk opnieuw laden.

Uw website is beschikbaar op http: // localhost: 1313 maar wacht even - je ziet nog steeds alleen een lege witte pagina op dit punt, omdat we geen thema hebben gedefinieerd!

Voeg een thema toe

Hugo heeft een zeer robuuste en veelzijdige themabibliotheek als hij Go's gebruikt html / template bibliotheek. Thema's zijn eenvoudig om mee te werken, installatie wordt gedaan door simpelweg de repository van een thema te klonen in de thema's map voor uw Hugo-site.

Hugo komt niet met een standaardthema, dus jij moet zet er een.

Er zijn veel open source-thema's waaruit u kunt kiezen.

Laten we heel veel thema's toevoegen aan onze site, zodat we met iedereen kunnen spelen en zien wat we leuk vinden. Doe dit door het volgende in onze Hugo-directory uit te voeren:

$ git clone --recursive https://github.com/spf13/hugoThemes.git-thema's Klonen in 'thema's' ... remote: objecten tellen: 880, klaar. afstandsbediening: objecten comprimeren: 100% (5/5), gereed. remote: Total 880 (delta 1), reused 0 (delta 0), pack-reused 875 Ontvangende objecten: 100% (880/880), 669.20 KiB | 288,00 KiB / s, klaar. Het oplossen van delta's: 100% (506/506), klaar. Verbinding controleren ... klaar.

Je ziet nu een hele hoop thema's worden gekloond op je site. Er zijn veel, dus je hebt tijd voor een pauze terwijl het klonen ...

Een thema gebruiken

Om een thema te gebruiken, start u Hugo met de -t of --thema parameter zoals zo

$ hugo -t ThemeName

Of u kunt toevoegen aan uw config.toml :

thema: "ThemeName"

De THEMENAME moet overeenkomen met de naam van de directory binnenin /thema's.

Wanneer u een thema-naam uit de map hebt gekozen, start u de server met hugo-server --theme = ThemeName en neem een kijkje op http: // localhost: 1313

Hier zijn enkele voorbeelden van enkele van de thema's die we hebben gekloond, die ik heb gebruikt bedelen, knapperig encactus kijk eens rond, er zijn er zoveel om uit te kiezen!

Dus je hebt nu een website gegenereerd met een Hello World-bericht, wat kunnen we nog meer doen?

Een blog bouwen

Het maken van een basisblog is heel gemakkelijk met Hugo te maken. Eerst moet je een archetype definiëren voor de standaardpost, dus maak een nieuw bestand aan in archetypes / default.md en voeg het volgende toe als voorkant materie:

+++ tags = ["lassen", "metaalwerk"] categorieën = ["berichten"] +++

Hier plaatsen we enkele standaardtags, voor een blog over lassen kunnen we zeker zijn dat we deze tags op al onze berichten willen hebben, en we maken een categorie met de naam posts, dus we hebben een standaard wanneer we een bericht maken.

Voeg nu je eerste bericht toe via de terminal, zoals zo:

$ hugo nieuw bericht / tig-welding-a-bike-frame.md

Hiermee wordt een bericht gemaakt met het archetype dat u eerder hebt gedefinieerd. U kunt het nu openen in een teksteditor en beginnen met wegschrijven in het markdown-formaat.!

Laten we wat meer berichten toevoegen:

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

Nogmaals, om content toe te voegen, opent u gewoon het bestand dat Hugo heeft gemaakt en begint het met het toevoegen van inhoud aan het einde van het bestand na de eerste kwestie.

Een fotogalerij bouwen

Om een fotogalerij te bouwen met Hugo, gebruiken we de uitstekende tool hugo-gallery beschikbaar op GitHub.

Het gebruik is als zodanig:

hugo-gallery [Baseurl]</code></p><p>De <code>hugo-gallery</code> tool maakt een nieuwe berichtenmap met een markdown-bestand voor elke afbeelding in de brondirectory, zodat een geordende diavoorstelling mogelijk is. Het leest alle bestanden uit de <code>Bronpad</code> map en sla ze op in de statische map van de Hugo-site. <br></p><p>Het maakt een nieuwe map binnen de inhoudsdirectory op basis van de <code>Titel</code> voorzien bijv <code>content / lassen</code></p><p>Bijvoorbeeld: </p><pre>$ hugo-gallery static / images / welding-photos welding "Foto's van mijn krankzinnige lasvaardigheden"</pre><p>Bezoek <code>localhost: 1313 / lassen</code> om de inhoud te bekijken.</p><h2>Deployment</h2><p>Hugo heeft verschillende hulpmiddelen voor implementatie, zoals hugomac, een OSX-menubalk-app waarmee de gebruiker gemakkelijk kan publiceren naar EC2-hosting. Geen opdrachtregel nodig.</p><p>Ook biedt hugodeploy een SFTP-configuratie om mee te implementeren of je kunt gewoon de geautomatiseerde implementaties gebruiken die met Hugo zijn meegeleverd.</p><h2>Conclusie</h2><p>Statische site-generators bestaan al een tijdje, en Hugo bouwt voort op de toolset, waardoor het snel en gemakkelijk is om sites te laten kloppen of zelfs een bestaande site van WordPress naar Hugo te migreren. Er zijn veel hulpmiddelen voor Hugo, inclusief front-end-redactie.</p><p>In de toekomst zal het leuk zijn om meer modules te zien voor Hugo die ondersteuning biedt voor zaken als een contactformulier en galerijondersteuning of gerelateerde berichten, bijvoorbeeld. </p><p>De Hugo-routekaart heeft veel opwindende ideeën, zoals het dynamisch aanpassen van het formaat, ondersteuning voor rsync en imago-import van hostingproviders en eenvoudiger hosting met AWS EC2- en GitHub-integratie.</p><p>Als u Hugo niet gebruikt, zorg er dan voor dat u terugkijkt op het project terwijl het zich ontwikkelt!</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">Code</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">Maak schattige Origami-konijntjesversieringen voor Pasen</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">Maak koperen en pareloorbellen voor Valentijnsdag</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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </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="Zoeken..."> <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>