Komme i gang med Hugo: Hvordan lage et enkelt nettsted

Hugo er en Static Site Generator som lar deg lage et nettsted med liten eller ingen kodeopplevelse. Du kan bruke forhåndsbygde temaer som en base for nettstedets design. Dette lar deg fokusere mer på å fylle nettstedet med innholdet ditt.

Fordi Hugo mest brukes til statiske nettsteder, er den perfekt for å lage blogger, porteføljer eller dokumentasjonssider.

Du kan enkelt sette opp og lage et Hugo-nettsted ved å bruke et forhåndsbygd Hugo-tema. Med bare noen få korte trinn kan du deretter legge til innhold og sider på nettstedet ditt ved å bruke Markdown.

Hvordan installere Hugo

Du må installere Hugo statiske nettstedsgenerator for å lage, kjøre og teste et Hugo-nettsted. Ifølge Hugo dokumentasjon, det er mange måter du kan installere det på. Nedenfor er noen av alternativene.

Mac

Du kan installere Hugo ved å bruke Homebrew.

1. Åpne macOS-terminalen.
2. Installer Homebrew-pakkebehandlingen.

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

3. Installer Hugo.

   brygge installere hugo

Windows

Du trenger en tilsvarende pakkebehandling for Windows. Du kan for eksempel bruke Scoop pakke manager.

1. Åpne Windows PowerShell, som allerede skal være en del av Windows-operativsystemet.
2. Hvis du installerer Scoop for første gang, må du kanskje angi utførelsespolicyen din.

   Sett-ExecutionPolicy Remote Signed -omfang Nåværende bruker

3. Installer Scoop:

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

4. Installer Hugo:

   scoop installere hugo

Hvordan lage et Hugo-prosjekt

For å lage et nytt Hugo-prosjekt, må du bruke den innebygde hugo ny side kommando.

1. Åpne terminalen eller ledeteksten. Naviger til mappen der du vil opprette prosjektet ditt.
2. Utfør hugo ny side kommando:

   hugo ny nettstedet ny-hugo-nettsted

3. Naviger til plasseringen av Hugo-prosjektet ditt i filutforskeren.
4. Åpne prosjektmappen. Du vil se at ditt nye Hugo-nettsted har fil- og mappestrukturen som kreves for at nettstedet ditt skal fungere.

Hvordan legge til et tema

For øyeblikket inneholder prosjektet ditt kun hovedbasemappene for Hugo-prosjektet. Å kjøre nettstedet ditt lokalt på dette tidspunktet vil bare vise en tom skjerm. Siden du ikke har konfigurert noen HTML-, CSS- eller UI-design for nettstedet ditt ennå, må du legge dem til.

Hugo har allerede et bibliotek med innebygde Hugo-temaer laget av utviklere.

1. Velg et tema du liker. Hvert tema kan ha litt forskjellige oppsettsinstruksjoner, vist på deres respektive forhåndsvisningsside. Denne opplæringen vil bruke Fortellingstema som et eksempel.
2. Naviger til rotmappen til prosjektet ditt i en terminal eller kommandolinje.

   cd ny-hugo-nettsted

3. Kjør kommandoen for å legge til Tale-temaet. Du kan legge til temaet som en undermodul, som vil opprette en ny mappe kalt eventyr inne i tema mappe.

   git init
   git undermodul legg til https://github.com/EmielH/tale-hugo.git themes/tale

   Alternativt kan du klone GitHub-historiedepotet inn i temamappen til prosjektet ditt.

   git klone https://github.com/EmielH/tale-hugo.git themes/tale

4. Naviger til prosjektmappen din. Klikk på temaer mappe for å åpne den. Uansett hvilken kommando du brukte, vil det komme en ny eventyr mappe som lagrer det nylig nedlastede temaet.
5. I config.toml fil, legg til fortellingstemaet som en del av konfigurasjonen. Dette vil fortelle Hugo å bruke HTML, CSS og andre stiler som Tale-temaet inkluderer.

   tema = "eventyr"

Slik legger du til sider på nettstedet ditt

Du kan skrive innholdet ditt i alle formater som Hugo godtar. Hugo vil da automatisk konvertere filene dine til HTML-filer når de serveres til brukeren. Dette gjør det raskt både å bygge og distribuere. Dette eksemplet vil bruke Markdown, et enkelt vanlig tekstspråk, som formatet for innholdet ditt.

Du kan skrive Markdown for det meste på vanlig engelsk med noen få ekstra symboler for å spesifisere enhver formatering. Dette inkluderer å legge til symboler for å representere overskrifter, hvilke ord som er fet, eller annen grunnleggende formatering du måtte trenge.

For å legge til en ny underside eller et innlegg på nettstedet ditt, må du legge til en ny Markdown-fil i innhold mappe. Hvert innlegg eller side vil ha sin egen Markdown-fil knyttet til seg.

1. Åpne innhold mappe inne i Hugo-prosjektet ditt. Opprett en ny Markdown-fil kalt myFirstPost.md.
2. Åpne filen i et hvilket som helst tekstredigeringsprogram som Notepad++ eller Visual Studio Code.
3. Legg til noen metadata øverst i filen. Dette vil inkludere viktig informasjon om innlegget. Temaet du bruker vil formatere denne informasjonen på en bestemt måte på siden.

   
   forfatter: "Navnet ditt"
   tittel: "Mitt første innlegg"
   Dato: "2022-05-17"
   

4. Etter at du har lagt til metadataene, kan du begynne å legge til innholdet ditt ved å bruke Markdown.

   Dette er mitt aller første innlegg på Hugo-nettstedet mitt!
   Hugo-temaet blir brukt tildette nettstedet heter Tale.
   Den er veldig enkel å installere og konfigurere.
   # Underoverskrift
   Dette er noe innhold.
   # Enda en underoverskrift
   Dette er mer innhold.

5. Legg gjerne til flere markdown-filer for å legge til flere sider på nettstedet ditt.

Slik kjører og tester du Hugo-nettstedet ditt lokalt

For å kjøre nettstedet ditt, bruk hugo tjene kommando.

1. Åpne en terminal eller kommandolinje.
2. Naviger til rotmappen til Hugo-prosjektet ditt.
3. Kjør hugo tjene kommando:

   hugo tjene

4. Vent til nettstedet fullfører oppstartsprosessen. Når det er fullført, vil terminalen skrive ut en melding som sier hvilken lokal adresse du kan få tilgang til nettstedet fra. Vanligvis er dette http://localhost: 1313/.
5. Åpne en nettleser og skriv inn http://localhost: 1313/, eller hvilken adresse terminalen ga deg. Du vil se hovedsiden til Hugo-nettstedet ditt.
6. På siden vil det være en liste over innlegg for hver markdown-fil du har. I dette tilfellet er det to markdown-filer fylt med innhold. Dette inkluderer myFirstPost.md-siden som du laget tidligere. Det inkluderer også et nytt innlegg kalt bananaCakeRecipe.md.
7. Klikk på overskriftslenken på en av forhåndsvisningene. Den tar deg til hele siden for det aktuelle innlegget.

Hosting av Hugo-nettstedet ditt

Å få en statisk nettside i gang er enkelt og raskt med Hugo. Du kan bruke og konfigurere forhåndsbygde temaer og kjøre Hugo-nettstedet ditt lokalt for testing. Du kan også legge til innholdssider på nettstedet ditt ved å bruke Markdown.

Når du har laget ditt Hugo-nettsted, kan du begynne å lære mer om hvordan du er vert for det. Det er mange gratis webhotellalternativer du kan velge mellom, for eksempel Dropbox, Google Drive eller OneDrive.

Hvordan få gratis webhotell med Dropbox, Google Drive eller OneDrive

Les Neste