Hugo Site Generator Installeren op Ubuntu 18.04 LTS

Hugo is een gratis en open-source raamwerk, geschreven in de taal Go, dat gebruikt kan worden om met gemak websites te maken. Het is een eenvoudige, snelle en veilige statische site generator, je hebt geen databank nodig om hem te draaien. Hugo ondersteunt onbeperkte inhoudstypen, taxonomieën, menu’s, dynamische API-gestuurde inhoud, en meer, allemaal zonder plugins. Hugo wordt geleverd met een rijke reeks functies, waaronder, Robuust Inhoud Beheer, Ingebouwde Sjablonen, Shortcodes, Aangepaste Uitvoer, Meertalig en nog veel meer.

In deze handleiding leren we hoe je Hugo op een Ubuntu 18.04 LTS server kunt installeren.

Vereisten

  • Een server waarop Ubuntu 18.04 draait.
  • Een statisch IP adres 136.243.240.39 is op je server ingesteld.
  • Een root wachtwoord is ingesteld op je server.

Aan de slag

Voor je begint moet je je systeem updaten met de nieuwste versie. Je kunt dit doen door het volgende commando uit te voeren:

apt-get update -y
apt-get upgrade -y

Zodra je server bijgewerkt is, herstart je je server om de veranderingen toe te passen.

Installeer Hugo

De nieuwste versie van Hugo is standaard niet beschikbaar in de Ubuntu 18.04 standaard repository. Je zult het dus moeten downloaden uit de Git repository. Je kunt het downloaden met het volgende commando:

wget https://github.com/gohugoio/hugo/releases/download/v0.58.2/hugo_0.58.2_Linux-64bit.deb

Als de download voltooid is, installeer je Hugo met het volgende commando:

dpkg -i hugo_0.58.2_Linux-64bit.deb

Als je een afhankelijkheidsfout krijgt, voer dan het volgende commando uit om de afhankelijkheid op te lossen:

apt-get install -f

Vervolgens kun je de Hugo versie controleren met het volgende commando:

hugo version

Je zou de volgende uitvoer moeten krijgen:

Hugo Static Site Generator v0.58.2-253E5FDC linux/amd64 BuildDate: 2019-09-13T08:05:59Z

Je kunt ook een lijst van opties zien die met Hugo beschikbaar zijn door het volgende commando uit te voeren:

hugo --help

Je zou de volgende uitvoer moeten krijgen:

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir    remove files from destination not found in static directories
      --config string          config file (default is path/config.yaml|json|toml)
      --configDir string       config dir (default "config")
  -c, --contentDir string      filesystem path to content directory
      --debug                  debug output
  -d, --destination string     filesystem path to write files to
      --disableKinds strings   disable different kind of pages (home, RSS etc.)
      --enableGitInfo          add Git revision, date and author info to the pages
  -e, --environment string     build environment
      --forceSyncStatic        copy all files when static is changed.
      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
      --i18n-warnings          print missing translations
      --ignoreCache            ignores the cache directory
      --ignoreVendor           ignores any _vendor directory
  -l, --layoutDir string       filesystem path to layout directory
      --log                    enable Logging
      --logFile string         log File path (if set, logging enabled automatically)
      --minify                 minify any supported output format (HTML, XML etc.)
      --noChmod                don't sync permission mode of files
      --noTimes                don't sync modification time of files
      --path-warnings          print warnings on duplicate target paths etc.
      --quiet                  build in quiet mode
      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
      --templateMetrics        display metrics about template executions
      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings          themes to use (located in /themes/THEMENAME/)
      --themesDir string       filesystem path to themes directory
      --trace file             write trace to file (not useful in general)
  -v, --verbose                verbose output
      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

Als je klaar bent, kun je verder gaan met de volgende stap.

Maak een website met Hugo

Hugo is nu geïnstalleerd, het is tijd om een website en inhoud met Hugo te maken.

Je kunt een nieuwe website met de naam test.example.com maken door het volgende commando uit te voeren:

hugo new site test.example.com

Als de website met succes is gemaakt, zou je de volgende uitvoer moeten krijgen:

Congratulations! Your new Hugo site is created in /root/test.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 ook een lijst maken van alle bestanden die onder je website zijn aangemaakt met het volgende commando:

ls test.example.com/

Je zou de volgende uitvoer moeten zien:

archetypes  config.toml  content  data  layouts  static  themes

Maak een Over pagina en Blog post

Verander nu de directory naar je website en maak een about.md pagina met het volgende commando:

cd test.example.com
hugo new about.md

Je zou de volgende uitvoer moeten zien:

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

Open vervolgens een about.md bestand en voeg wat inhoud toe:

nano content/about.md

Breng de volgende veranderingen aan:

---
title: "About"
date: 2019-09-10T06:57:08Z
draft: false
---

I am hitesh jethva working as a technical writer.

Sla het bestand op en sluit het als je klaar bent. Maak dan je eerste bericht met het volgende commando:

hugo new post/first.md

Je zou de volgende uitvoer moeten zien:

/root/test.example.com/content/post/first.md created

Open vervolgens het bestand first.md en voeg wat inhoud toe:

nano content/post/first.md

Breng de volgende veranderingen aan:

---
title: "First"
date: 2019-09-10T06:58:51Z
draft: false
---

## This is my first blog post

Hi How are you!

Zet je eerste thema op

Je about pagina en blog post zijn nu gemaakt, het is tijd om je eerste thema in te stellen.

Verander eerst de map in themes en download het hugo-strata-thema met het volgende commando:

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

Eenmaal gedownload pak je het gedownloade thema uit met het volgende commando:

unzip master.zip

Hernoem vervolgens het uitgepakte thema als hieronder:

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

Vervolgens moet je de inhoud van het voorbeeld config.toml bestand uit themes/hugo-strata-theme kopiëren naar het config.toml bestand van je site dat staat in /root/test.example.com/config.toml.

Je kunt dat doen met het volgende commando:

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

Werk vervolgens de baseurl variabele bij en neem ook je nieuwe about pagina op in de navigatie van dit thema in het config.toml bestand zoals hieronder getoond:

nano ../config.toml

Werk de basis URL bij zoals hieronder getoond:

baseurl = "/"

Voeg ook de volgende regels toe om je nieuwe about pagina op te nemen:

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

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

Vervolgens moet je ook de lay-out van je landingspagina bijwerken met de sjabloon lay-out van het thema die te vinden is in themes/hugo-strata-theme/layouts/index.html naar test.example.com/layouts/index.html:

nano /root/test.example.com/layouts/index.html

Voeg de volgende inhoud 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 }}

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

Als je klaar bent, kun je verder gaan met de volgende stap.

Bouw je website

Je thema is nu geconfigureerd voor je website. Het is tijd om je website te bouwen. Verander daartoe de directory in je website en bouw de site met het volgende commando:

cd /root/test.example.com
hugo

Je zou de volgende uitvoer moeten zien:

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

Total in 18 ms

Start nu je Hugo server en bind hem met je server IP adres door het volgende commando uit te voeren:

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

Zodra de server met succes gestart is, zou je de volgende uitvoer moeten zien:

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

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

Als je dat gedaan hebt, kun je verder gaan met toegang tot de Hugo webinterface.

Toegang tot Hugo server

Je Hugo server is nu gestart en luistert op poort 1313. Open nu je web browser en typ de URL http://136.243.240.39:1313. Je wordt doorgestuurd naar je Hugo server dashboard zoals hieronder:

Website gemaakt met Hugo

Klik nu op Over in het linkerdeelvenster. Je zou je Over pagina moeten zien in de volgende afbeelding:

Over pagina

Klik nu op de Blog knop in het linkerdeelvenster. Je zou je blog post moeten zien in de volgende afbeelding:

Eerste pagina

Conclusie

In de bovenstaande zelfstudie leerden we hoe je Hugo server op Ubuntu 18.04 server installeert. We hebben ook geleerd hoe je met Hugo een site met about page en thema kunt maken. Voor meer informatie over Hugo kun je de officiële Hugo documentatie bezoeken op Hugo Doc. Voel je vrij om me te vragen als je vragen hebt.