Gjør opprette nettsider gøy igjen med Hugo

Statiske steder er populære av mange grunner. For å unngå overkillløsninger og holde et prosjekt enkelt uten databaser, for mange avhengigheter eller spesifikke server-side konfigurasjoner (ingen PHP, ingen MySQL / MSSQL, .NET, Python, Ruby osv.) Gjør det veldig enkelt å distribuere og være robuste mot mange mulige sårbarheter. Til syvende og sist blir disse grunnleggende HTML-sider som serveres til brukeren.

I denne veiledningen vil jeg vise deg hvordan du konfigurerer utviklingsmiljøet med Hugo og bygger ditt første statiske Hugo-nettsted.

En helt ny tilnærming til statiske nettsteder

Det legendariske designkortet KISS - Gjør det enkelt dummen - kan brukes til Hugo og hvordan den nærmer seg den statiske nettsiden generator plass. 

Bygget i Go, samler Hugo raskt dine statiske sider (det tar brøkdeler av millisekunder å kompilere et lite nettsted - og kan gjøre tusenvis av sider om sekunder).

Dessuten gir Hugo viktig verktøy til den statiske arbeidsflaten for webområdet (inkludert distribusjons- og migreringsverktøy), slik at utviklere og designere kan fokusere på de morsomme delene som å utøve sin kreativitet og implementere nevnte kreativitet i oppbyggingen av nettstedet.

Hvorfor statiske nettsteder?

Når vi bygger innholdsbaserte nettsteder, kan vi anta noen generelle egenskaper på alle nettsteder, og Hugo gir et rammeverk for nettopp det. Spesielt kan vi ta innholdstyper som innlegg, kategorier, vurderinger eller produkter og organisere dataene. Deretter kan vi gi hvert et bestemt utseende via maler og stilark.

Fremover kan vi virkelig kjøre det hvor som helst vi trenger innenfor HTML / CSS / JS-statisk webområde. Når du tenker pragmatisk, er det en stor plass som gir mye plass til kreativitet.

jQuery kjører fint, og det er ingenting som hindrer deg ved å bruke tredjepartstjenester på din statiske side, hvis du trenger dem. Ikke begrenset deg selv ved å tro at du ikke kan integrere andre biblioteker eller programmer i dine statiske nettsteder. Det er egentlig ikke tilfellet - du kan bruke noen av de tilgjengelige JavaScript-bibliotekene.

Så for noen sider av en bedriftsbrosjyre skriver du nettside, med en link til en Google Forms for en Kontakt oss side. Og hvis du trenger å vise andre typer data, kan du bruke JavaScript for det aspektet av nettstedet ditt.

Hvordan kan det fungere for min bedrift og mine kunder?

Ta for eksempel en liten butikk eller frilanser med noen få produkter eller tjenester som ikke krever en hel eCommerce-løsning. I stedet krever de bare produktinformasjon og en "kontakt" -kobling på siden. Hugo kan gjøre det ved slutten av en morgen. Hosting er ikke engang en stor sak - det er en ettertanke, virkelig, fordi vi bare serverer grunnleggende HTML-sider.

Hugo jobber også bra for prosjektdokumentasjon på GNU-prosjekter. For eksempel tenk på oppstart eller små og mellomstore bedrifter som trenger en enkel tilstedeværelse.

Hva er begrensningene til statiske nettsteder?

Hva Hugo ikke kan gjøre er dynamisk innhold, for eksempel database-drevne skjemaer, søke- eller brukersystemer. Hvis det er det du leter etter, så er Hugo sikkert ikke hva vil du. Men for andre tider, når du finner deg selv å si "kan vi ikke bare sette opp en grunnleggende side for dette?" Statiske nettsidegeneratorer er et solid alternativ. Vær også oppmerksom på at Hugo ikke er den eneste statiske nettstedgeneratoren. Det er mange der ute og har eksistert lenge, her er en liste over dem.

For å bygge levende innholdsblogger som nyhetssider, kan Hugo være en god løsning for raskt å slå opp en side for at dekningene skal kobles fra hovednettstedet ditt, få det på nettet i minutter, noe som betyr at du kan fortsette å legge til det raskt og omorganisere endringene svært raskt. Men for å lage et helt nytt nettsted med søk og mange forfattere, ville det egentlig ikke være hensiktsmessig å bruke Hugo.

Hugo mangler også å bruke mer avanserte verktøy for sin aktivitetsrørledning som ES6 og Sass. Hvis du vil bruke denne teknologien, må du inkludere Gulp eller Grunt for å få jobben gjort; Ellers fungerer vanilje CSS og JavaScript best.

Ditt hjem utviklingsmiljø

Hugo er skrevet i Go og har støtte for mange plattformer, for å se alle utgivelsene du kan gå her 

For MacOS-brukere med HomeBrew kan installasjonen gjøres på følgende måte:

bryg oppdatering && brew install hugo

Mer informasjon om installasjon for Mac OSX og Windows

Når Hugo er installert, kan vi teste installasjonen ved å kjøre Hugo hjelp i ledeteksten eller Hugo versjon 

Gjør ditt første statiske nettsted med Hugo

Nå som vi har Hugo installert, kan vi begynne å lage nettstedet. Kjør følgende kommando som erstatter "din sitenavn-her" med prosjektnavnet ditt:

$ hugo nytt nettsted din-sitename-her

Dette vil skape et stillas for nettstedet ditt, du kan se det i finneren din

eller i terminalen din via tre kommando

Hugo har laget 5 underkataloger og 1 fil, som den bruker til å lage den endelige nettsiden fra her er hva de alle mener:

• arketyper: her definerer vi hva innholdet vårt er, vi kan angi standardkoder eller kategorier og definere typer som et innlegg, opplæring eller produkt her
• config.toml: Hovedkonfigurasjonen er her, vi kan definere alle nettstedene tittel, språk, nettadresser etc. her
• innhold: innholdssidene på nettstedet er lagret her, underkataloger brukes til seksjoner for å organisere innholdet, opprette en innhold / produkter for produktets innhold for eksempel
• data: Nettsteddata slik lokaliseringskonfigurasjoner går her
• oppsett: layouter for Go html / mall biblioteket som Hugo benytter gå her
• statisk: Eventuelle statiske filer her blir kompilert inn i den endelige nettsiden, total frihet er tillatt, slik at du kan betjene noen css, js eller bildefil for eksempel.
• temaer: Opprett nye temaer eller klonetemaer fra github til denne katalogen for å bruke dem med nettstedet ditt. 

"Hello World" i Hugo

Vi må legge til et innlegg for å se nettstedet vi nettopp har opprettet, gjør det ved å bruke følgende kommando:

$ hugo nytt innlegg / første-post.md

Rediger nå filen i innhold / post / first-post.md, den vil inneholde noe som ligner på følgende som standard:

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

Front Matter

Innholdet inni +++ er TOML-konfigurasjonen for innlegget. Denne konfigurasjonen kalles frontmateriell. Den lar deg definere innleggskonfigurasjon sammen med innholdet. Som standard vil hvert innlegg ha konfigurasjonsegenskapene som vises ovenfor.

Legg til litt tekst etter +++som så:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "first post" +++ Hei verden!

Ser data og Live Reload

Så vi kan se live reload-funksjonaliteten som er innebygd med Hugo, la oss gjøre noen endringer på nettstedet og se hva som skjer. 

Først starter serveren ved å kjøre

$ hugo server 

Nå, hvis du gjør noen endringer i filen, ser du Hugo umiddelbart på nytt.

Nettstedet ditt vil være tilgjengelig på http: // localhost: 1313 men vent litt - du vil fortsatt bare se en blank hvit side på dette punktet, fordi vi ikke har definert et tema!

Legg til et tema

Hugo har et veldig robust og allsidig tema bibliotek som det bruker Go's html / mal bibliotek. Temaer er enkle å jobbe med, installasjon er gjort ved å klone opp et repository for et tema inn i temaer katalog for din Hugo-side. 

Hugo kommer ikke med et standard tema, så du må sett en.

Det er mange åpne temaer å velge mellom.

La oss legge til mange temaer på nettstedet vårt, slik at vi kan spille med dem alle og se hva vi liker. Gjør det ved å kjøre følgende i vår Hugo-katalog:

$ git klone - gjenoppbyggende https://github.com/spf13/hugoThemes.git temaer Kloning i "temaer" ... fjernkontroll: Telle gjenstander: 880, ferdig. fjernkontroll: Komprimering av objekter: 100% (5/5), ferdig. fjernstyrt: Totalt 880 (delta 1), gjenbrukt 0 (delta 0), pakkeregistrert 875 Motta objekter: 100% (880/880), 669,20 KiB | 288,00 KiB / s, ferdig. Løse deltakere: 100% (506/506), ferdig. Kontrollerer tilkobling ... ferdig. 

Du vil nå se at en hel masse temaer blir klonet inn på nettstedet ditt. Det er mye, så du vil ha tid til en pause mens den kloner ...

Bruke et tema

For å bruke et tema, bare start Hugo med -t eller --tema parameter som det

$ hugo -t ThemeName

Eller du kan legge til i din config.toml :

tema: "ThemeName"

De THEME må samsvare med navnet på katalogen inni / temaer.

Når du har valgt et tema navn fra katalogen, starter du serveren med Hugo server - Theme = ThemeName og ta en titt på http: // localhost: 1313  

Her er noen eksempler fra noen av de temaene vi klonte, brukte jeg tigge, sprø ogkaktus ta en titt rundt det er så mange å velge mellom!

Så du har nå generert et nettsted med en hello verdenspost, hva mer kan vi gjøre?

Bygg en blogg

Å lage en grunnleggende blogg er veldig enkelt å gjøre med Hugo. Først må du definere en arketype for standardposten, så opprett en ny fil arketyper / default.md og legg til følgende som frontmateriell:

+++ tags = ["sveising", "metallarbeid"] kategorier = ["innlegg"] +++

Her setter vi noen standardkoder, for en blog på sveising kan vi være sikker på at vi vil ha disse kodene på alle innleggene våre, og vi lager en kategori som heter innlegg, slik at vi har standard når vi lager et innlegg.

Legg nå ditt første innlegg via terminalen slik:

$ hugo nytt innlegg / tig-welding-a-bike-frame.md

Dette vil skape et innlegg med arketypen du definerte før, du kan nå åpne den i et tekstredigeringsprogram og begynne å skrive bort i markdown format!

La oss legge til flere innlegg:

$ hugo ny post / sveising-a-roll-cage.md

Igjen for å legge til innhold, bare åpne filen Hugo opprettet og begynn å legge til innhold til slutten av filen etter forsiden.

Bygg et fotogalleri

For å bygge et fotogalleri med Hugo bruker vi det utrolige verktøyet hugo-gallery tilgjengelig på GitHub. 

Det er bruk som det er:

hugo-gallery