een website maken met Hugo op Debian 11

Hugo is een gratis en open-source website raamwerk geschreven in ontwikkeld in Go. Hugo biedt een betrouwbare en moderne statische site generator waarmee je gemakkelijk een eenvoudige en snelle website kunt maken. Het komt met voorgemaakte sjablonen en andere functies, waaronder, SEO, commentaar geven, analytics, en andere functies. Hugo sites kunnen draaien zonder dure draaitijden zoals PHP, Python, Ruby en hebben geen databank nodig.

In dit artikel laten we je zien hoe je de Hugo site generator op Debian 11 kunt installeren en gebruiken.

Vereisten

  • Een server waarop Debian 11 draait.
  • Een root wachtwoord is op de server ingesteld.

Installeer Hugo op Debian 11

Het Hugo pakket is standaard opgenomen in de Debian 11 standaard repository. Je kunt het installeren met het volgende commando:

apt-get install hugo -y

Zodra Hugo geïnstalleerd is, kun je de Hugo versie verifiëren met het onderstaande commando:

hugo version

Je zou de volgende uitvoer moeten krijgen:

Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2021-07-18T09:31:51Z (debian 0.80.0-6+b5)

Maak een website met Hugo

In dit onderdeel zullen we een nieuwe website maken met de naam hugo.example.com.

Voer het volgende commando uit om een website te maken:

hugo new site hugo.example.com

Zodra de website gemaakt is, zou je de volgende uitvoer moeten krijgen:

Congratulations! Your new Hugo site is created in /root/hugo.example.com.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Je kunt alle door Hugo gemaakte bestanden opnoemen met het volgende commando:

ls -l hugo.example.com

Je krijgt de volgende uitvoer:

drwxr-xr-x 2 root root 4096 Nov 13 09:27 archetypes
-rw-r--r-- 1 root root   82 Nov 13 09:27 config.toml
drwxr-xr-x 2 root root 4096 Nov 13 09:27 content
drwxr-xr-x 2 root root 4096 Nov 13 09:27 data
drwxr-xr-x 2 root root 4096 Nov 13 09:27 layouts
drwxr-xr-x 2 root root 4096 Nov 13 09:27 static
drwxr-xr-x 2 root root 4096 Nov 13 09:27 themes

Maak een Over pagina en Voorbeeld post

Verander eerst de directory in je website met het volgende commando:

cd hugo.example.com

Maak vervolgens een about pagina met het volgende commando:

hugo new about.md

Je krijgt de volgende uitvoer:

/root/hugo.example.com/content/about.md created

Bewerk vervolgens de about.md pagina met het volgende commando:

nano content/about.md

Wijzig het bestand zoals hieronder aangegeven:

---
title: "About Us"
date: 2021-11-13T09:28:18Z
draft: false
---

This is About Us page for this website.

Maak vervolgens een voorbeeldpost met het volgende commando:

hugo new post/page.md

Je krijgt de volgende uitvoer:

/root/hugo.example.com/content/post/page.md created

Bewerk vervolgens de voorbeeld post pagina met het volgende commando:

nano content/post/page.md

Verander het bestand als hieronder getoond:

---
title: "Page"
date: 2021-11-13T09:29:29Z
draft: true
---

# Hugo Page

This is my first hugo website page!

Sla het bestand op en sluit het als je klaar bent.

Thema’s op je website installeren

Vervolgens moet je een thema downloaden en instellen voor je Hugo website.

Verander eerst de directory in themes met het volgende commando:

cd themes

Download vervolgens het Hugo thema met het volgende commando:

wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Pak vervolgens het gedownloade thema uit met het volgende commando:

unzip master.zip

Hernoem vervolgens het uitgepakte thema met het volgende commando:

mv hugo-strata-theme-master hugo-strata-theme

Kopieer vervolgens de inhoud van de config.toml naar de config van je site.

cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

Bewerk vervolgens het config.toml bestand met het volgende commando:

nano ../config.toml

Voeg de volgende regels toe / wijzig ze:

baseurl = "/"

[[menu.main]]
  name = "About"
  url  = "about"
  weight = 5

Bewaar en sluit het bestand en maak dan een index.html bestand voor je website:

cd ../
nano layouts/index.html

Voeg de volgende regels toe:

{{ define "main" }}
        {{ if not .Site.Params.about.hide }}
                {{ partial "about" . }}
        {{ end }}

        {{ if not .Site.Params.portfolio.hide }}
                {{ partial "portfolio" . }}
        {{ end }}

        {{ if not .Site.Params.recentposts.hide }}
                {{ partial "recent-posts" . }}
        {{ end }}

        {{ if not .Site.Params.contact.hide }}
                {{ partial "contact" . }}
        {{ end }}
{{ end }}

Bewaar en sluit het bestand.

Bouw en lanceer je website

Nu moet je je website bouwen om hem te kunnen gebruiken. Je kunt hem bouwen door het volgende commando uit te voeren:

hugo

Je krijgt dan de volgende uitvoer:

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

                   | EN  
-------------------+-----
  Pages            |  8  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  2  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 48 ms

Start vervolgens de Hugo server en bind hem met je server IP met het volgende commando:

hugo server --bind=0.0.0.0 --baseUrl=http://104.245.34.233 -D -F

Je krijgt de volgende uitvoer:

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

                   | EN  
-------------------+-----
  Pages            | 11  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  3  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 42 ms
Watching for changes in /root/hugo.example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/hugo.example.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://104.245.34.233:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Op dit punt is de Hugo server gestart en luistert op poort 1313.

Open de Hugo website

Open nu je web browser en bezoek je website met de URL http://your-server-ip:1313. Je zou de Hugo standaard pagina moeten zien:

Website gemaakt met Hugo

Klik op Over in het linkerdeelvenster. Je zou je Over pagina moeten zien op het volgende scherm:

Pagina

Conclusie

Gefeliciteerd! Je hebt Hugo met succes geïnstalleerd en een website gemaakt op Debian 11. Je kunt nu gemakkelijk een veilige en snelle website bouwen met Hugo.