Kom godt i gang med Hugo: Sådan opretter du et simpelt websted

Hugo er en statisk webstedsgenerator, der giver dig mulighed for at oprette et websted med ringe eller ingen kodningsoplevelse. Du kan bruge forudbyggede temaer som base for dit webstedsdesign. Dette giver dig mulighed for at fokusere mere på at udfylde webstedet med dit indhold.

Fordi Hugo mest bruges til statiske websteder, er det perfekt til at oprette blogs, porteføljer eller dokumentationssider.

Du kan nemt oprette og oprette et Hugo-websted ved hjælp af et forudbygget Hugo-tema. Med blot et par korte trin kan du derefter tilføje indhold og sider til dit websted ved hjælp af Markdown.

Sådan installeres Hugo

Du skal installere Hugo statiske webstedsgenerator at oprette, køre og teste et Hugo-websted. Ifølge Hugo dokumentation, der er mange måder, du kan installere det på. Nedenfor er nogle af mulighederne.

Mac

Du kan installere Hugo ved hjælp af Homebrew.

1. Åbn din macOS-terminal.
2. Installer Homebrew-pakkehåndteringen.

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

3. Installer Hugo.

   brygge installere hugo

Windows

Du skal bruge en tilsvarende pakkehåndtering til Windows. Du kan f.eks. bruge Scoop pakke manager.

1. Åbn Windows PowerShell, som allerede burde være en del af dit Windows-operativsystem.
2. Hvis du installerer Scoop for første gang, skal du muligvis indstille din eksekveringspolitik.

   Sæt-ExecutionPolicy Remote Signed -omfang Nuværende bruger

3. Installer Scoop:

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

4. Installer Hugo:

   skefuld installere hugo

Sådan opretter du et Hugo-projekt

For at oprette et nyt Hugo-projekt skal du bruge det indbyggede hugo ny side kommando.

1. Åbn din terminal eller kommandoprompt. Naviger til den mappe, hvor du vil oprette dit projekt.
2. Udfør hugo ny side kommando:

   hugo ny websted ny-hugo-hjemmeside

3. Naviger til placeringen af ​​dit Hugo-projekt i din filstifinder.
4. Åbn projektmappen. Du vil se, at dit nye Hugo-websted har den fil- og mappestruktur, der kræves for, at din hjemmeside kan fungere.

Sådan tilføjer du et tema

I øjeblikket indeholder dit projekt kun de vigtigste basismapper for Hugo-projektet. At køre dit websted lokalt på dette tidspunkt ville kun vise en tom skærm. Da du endnu ikke har konfigureret HTML-, CSS- eller UI-design til dit websted, skal du tilføje dem.

Hugo har allerede et bibliotek med indbygget Hugo temaer skabt af udviklere.

1. Vælg et tema, du kan lide. Hvert tema kan have lidt forskellige opsætningsinstruktioner, vist på deres respektive forhåndsvisningsside. Denne tutorial vil bruge Fortælling tema som et eksempel.
2. Naviger til rodmappen på dit projekt i en terminal eller kommandolinje.

   cd ny-hugo-hjemmeside

3. Kør kommandoen for at tilføje Tale-temaet. Du kan tilføje temaet som et undermodul, som vil oprette en ny mappe kaldet fortælling inde i tema folder.

   git init
   git undermodul tilføj https://github.com/EmielH/tale-hugo.git themes/tale

   Alternativt kan du klone GitHub-fortællingsarkivet ind i temamappen i dit projekt.

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

4. Naviger til din projektmappe. Klik på temaer mappe for at åbne den. Uanset hvilken kommando du brugte, vil der være en ny fortælling mappe, der gemmer det nyligt downloadede tema.
5. I den config.toml fil, skal du tilføje fortællingstemaet som en del af konfigurationen. Dette vil fortælle Hugo at bruge HTML, CSS og andre stilarter, som Tale-temaet inkluderer.

   tema = "fortælling"

Sådan tilføjer du sider til dit websted

Du kan skrive dit indhold i ethvert format, som Hugo accepterer. Hugo vil så automatisk konvertere dine filer til HTML-filer, når de serverer dem til brugeren. Dette gør det hurtigt at både bygge og implementere. Dette eksempel vil bruge Markdown, et simpelt sprog i almindelig tekst, som formatet for dit indhold.

Du kan skrive Markdown for det meste på almindeligt engelsk med nogle få tilføjede symboler for at angive enhver formatering. Dette inkluderer tilføjelse af symboler til at repræsentere overskrifter, hvilke ord der er fed eller enhver anden grundlæggende formatering, som du måtte have brug for.

For at tilføje en ny underside eller et nyt indlæg til dit websted, skal du tilføje en ny Markdown-fil i indhold folder. Hvert indlæg eller hver side vil have sin egen Markdown-fil tilknyttet.

1. Åbn indhold mappe inde i dit Hugo-projekt. Opret en ny Markdown-fil kaldet myFirstPost.md.
2. Åbn filen i en hvilken som helst teksteditor, såsom Notepad++ eller Visual Studio Code.
3. Tilføj nogle metadata øverst i filen. Dette vil inkludere vigtige oplysninger om indlægget. Det tema, du bruger, vil formatere disse oplysninger på en bestemt måde på siden.

   
   forfatter: "Dit navn"
   titel: "Mit første indlæg"
   dato: "2022-05-17"
   

4. Når du har tilføjet metadataene, kan du begynde at tilføje dit indhold ved hjælp af Markdown.

   Dette er mit allerførste indlæg på min Hugo hjemmeside!
   Hugo-temaet bliver brugt tildette webstedet hedder Tale.
   Det er meget enkel at installere og konfigurere.
   # Underoverskrift
   Dette er noget indhold.
   # Endnu en underoverskrift
   Dette er mere indhold.

5. Du er velkommen til at tilføje flere markdown-filer for at tilføje flere sider til dit websted.

Sådan kører og tester du dit Hugo-websted lokalt

For at køre dit websted skal du bruge hugo tjene kommando.

1. Åbn en terminal eller kommandolinje.
2. Naviger til rodmappen på dit Hugo-projekt.
3. Kør hugo tjene kommando:

   hugo tjene

4. Vent på, at webstedet fuldfører opstartsprocessen. Når det er fuldført, udskriver terminalen en besked, der siger, hvilken lokal adresse du kan få adgang til webstedet fra. Normalt er dette http://localhost: 1313/.
5. Åbn en webbrowser og indtast http://localhost: 1313/, eller hvilken adresse terminalen har givet dig. Du vil se hovedsiden på din Hugo hjemmeside.
6. På siden vil der være en liste over indlæg for hver markdown-fil, du har. I dette tilfælde er der to markdown-filer udfyldt med indhold. Dette inkluderer siden myFirstPost.md, som du lavede tidligere. Det inkluderer også et nyt indlæg kaldet bananaCakeRecipe.md.
7. Klik på overskriftslinket på en af ​​forhåndsvisningerne. Det fører dig til hele siden for det pågældende indlæg.

Hosting af din Hugo-hjemmeside

At få en statisk hjemmeside op at køre er nemt og hurtigt med Hugo. Du kan bruge og konfigurere forudbyggede temaer og køre dit Hugo-websted lokalt til test. Du kan også tilføje indholdssider til dit websted ved hjælp af Markdown.

Når du har oprettet dit Hugo-websted, kan du begynde at lære mere om, hvordan du hoster det. Der er mange gratis muligheder for webstedshosting, som du kan vælge imellem, såsom Dropbox, Google Drive eller OneDrive.

Sådan får du gratis webstedshosting med Dropbox, Google Drive eller OneDrive

Læs Næste