Aan de slag met Hugo: een eenvoudige website maken

Hugo is een statische sitegenerator waarmee u een website kunt maken met weinig tot geen codeerervaring. U kunt vooraf gemaakte thema's gebruiken als basis voor uw website-ontwerp. Hierdoor kunt u zich meer concentreren op het vullen van de site met uw inhoud.

Omdat Hugo vooral wordt gebruikt voor statische websites, is het perfect voor het maken van blogs, portfolio's of documentatiesites.

U kunt eenvoudig een Hugo-website opzetten en maken met behulp van een vooraf gebouwd Hugo-thema. Met slechts een paar korte stappen kunt u vervolgens inhoud en pagina's aan uw website toevoegen met Markdown.

Hoe Hugo te installeren

U moet installeren de Hugo statische sitegenerator om een ​​Hugo-website te maken, uit te voeren en te testen. Volgens de Hugo documentatie, er zijn veel manieren waarop u het kunt installeren. Hieronder vindt u enkele van de opties.

Mac

U kunt Hugo installeren met Homebrew.

1. Open uw macOS-terminal.
2. Installeer de Homebrew pakketbeheerder.

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

instagram viewer
3. Installeer Hugo.

   brouwen installeren knuffel

ramen

U heeft een gelijkwaardige pakketbeheerder voor Windows nodig. U kunt bijvoorbeeld de Scoop pakketbeheerder.

1. Open Windows PowerShell, dat al deel zou moeten uitmaken van uw Windows-besturingssysteem.
2. Als u Scoop voor de eerste keer installeert, moet u mogelijk uw uitvoeringsbeleid instellen.

   Set-ExecutionPolicy RemoteSigned -domein Huidige gebruiker

3. Scoop installeren:

   dwz (nieuwe-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Hugo installeren:

   lepel installeren knuffel

Een Hugo-project maken

Om een ​​nieuw Hugo-project te maken, moet je de ingebouwde dikke nieuwe site opdracht.

1. Open uw terminal of opdrachtprompt. Navigeer naar de map waarin u uw project wilt maken.
2. Voer de. uit dikke nieuwe site opdracht:

   knuffel nieuwe website nieuwe-hugo-website

3. Navigeer naar de locatie van uw Hugo-project in uw bestandsverkenner.
4. Open de projectmap. U zult zien dat uw nieuwe Hugo-website de bestands- en mapstructuur heeft die nodig is om uw website te laten werken.

Een thema toevoegen

Op dit moment bevat uw project alleen de belangrijkste basismappen voor het Hugo-project. Als u uw website op dit moment lokaal laat draaien, wordt alleen een leeg scherm weergegeven. Aangezien u nog geen HTML-, CSS- of UI-ontwerpen voor uw website heeft ingesteld, moet u deze toevoegen.

Hugo biedt al een bibliotheek met ingebouwde Hugo Thema's gemaakt door ontwikkelaars.

1. Selecteer een thema dat je leuk vindt. Elk thema heeft mogelijk iets andere installatie-instructies, die worden weergegeven op hun respectievelijke voorbeeldpagina. Deze tutorial gebruikt de Verhaal thema als voorbeeld.
2. Navigeer naar de hoofdmap van uw project in een terminal of opdrachtregel.

   CD nieuwe-hugo-website

3. Voer de opdracht uit om het Tale-thema toe te voegen. U kunt het thema toevoegen als een submodule, die een nieuwe map zal maken met de naam verhaal binnen in de thema map.

   git init
   git submodule https toevoegen://github.com/EmielH/tale-hugo.git themes/tale

   Als alternatief kunt u de GitHub-verhaalrepository klonen in de themamap van uw project.

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

4. Navigeer naar uw projectmap. Klik op de thema's map om deze te openen. Ongeacht welk commando je hebt gebruikt, er zal een nieuwe verhaal map waarin het nieuw gedownloade thema is opgeslagen.
5. In de config.toml bestand, voeg het verhaalthema toe als onderdeel van de configuratie. Dit zal Hugo vertellen om de HTML, CSS en andere stijlen te gebruiken die het Tale-thema bevat.

   thema = "verhaal"

Pagina's toevoegen aan uw website

U kunt uw inhoud schrijven in elk formaat dat Hugo accepteert. Hugo zal uw bestanden vervolgens automatisch naar HTML-bestanden converteren wanneer ze aan de gebruiker worden aangeboden. Dit maakt het snel te bouwen en te implementeren. Dit voorbeeld gebruikt Markdown, een eenvoudige taal in platte tekst, als het formaat voor uw inhoud.

Je kunt Markdown meestal in gewoon Engels schrijven met een paar toegevoegde symbolen om elke opmaak te specificeren. Dit omvat het toevoegen van symbolen om koppen weer te geven, welke woorden vet zijn, of andere basisopmaak die u mogelijk nodig heeft.

Om een ​​nieuwe subpagina of post aan uw website toe te voegen, moet u een nieuw Markdown-bestand toevoegen aan de inhoud map. Aan elk bericht of elke pagina is een eigen Markdown-bestand gekoppeld.

1. Open de inhoud map in uw Hugo-project. Maak een nieuw Markdown-bestand met de naam myFirstPost.md.
2. Open het bestand in een teksteditor zoals Notepad++ of Visual Studio Code.
3. Voeg bovenaan het bestand wat metadata toe. Dit bevat belangrijke informatie over het bericht. Het thema dat u gebruikt, zal deze informatie op een bepaalde manier op de pagina opmaken.

   
   schrijver: "Uw naam"
   titel: "Mijn eerste bericht"
   datum: "2022-05-17"
   

4. Nadat je de metadata hebt toegevoegd, kun je beginnen met het toevoegen van je inhoud met Markdown.

   Deze is mijn allereerste post op mijn Hugo website!
   Het Hugo-thema dat wordt gebruikt voordeze site heet Tale.
   Het is zeer eenvoudig te installeren en configureren.
   # Ondertitel
   Deze is wat inhoud.
   # Nog een ondertitel
   Deze is meer inhoud.

5. Voel je vrij om meer markdown-bestanden toe te voegen om meer pagina's aan je website toe te voegen.

Hoe u uw Hugo-website lokaal kunt uitvoeren en testen?

Gebruik de om uw website uit te voeren hugo serveren opdracht.

1. Open een terminal of opdrachtregel.
2. Navigeer naar de hoofdmap van uw Hugo-project.
3. Voer de... uit hugo serveren opdracht:

   hugo serveren

4. Wacht tot de website het opstartproces heeft voltooid. Zodra dat is voltooid, drukt de terminal een bericht af met de melding vanaf welk lokaal adres u toegang hebt tot de website. Meestal is dit http://localhost: 1313/.
5. Open een webbrowser en voer in http://localhost: 1313/, of welk adres de terminal u ook heeft gegeven. U ziet de hoofdpagina van uw Hugo-website.
6. Op de pagina staat een lijst met berichten voor elk markdown-bestand dat je hebt. In dit geval zijn er twee markdown-bestanden gevuld met inhoud. Dit omvat de myFirstPost.md-pagina die u eerder hebt gemaakt. Het bevat ook een nieuwe post genaamd bananaCakeRecipe.md.
7. Klik op de kop link op een van de previews. Het brengt je naar de volledige pagina voor dat specifieke bericht.

Uw Hugo-website hosten

Een statische website in de lucht krijgen is eenvoudig en snel met Hugo. U kunt vooraf gebouwde thema's gebruiken en configureren en uw Hugo-website lokaal uitvoeren om te testen. U kunt ook inhoudspagina's aan uw website toevoegen met Markdown.

Nadat u uw Hugo-website heeft gemaakt, kunt u meer leren over hoe u deze kunt hosten. Er zijn veel gratis website-hostingopties waaruit u kunt kiezen, zoals Dropbox, Google Drive of OneDrive.

Gratis website-hosting krijgen met Dropbox, Google Drive of OneDrive

Lees volgende