“I am always doing things I can’t do, that’s how I got to do them.” [Pablo Picasso]

Hugo, an Efficient Web Editor for Static Web Pages

I do not run a web shop and I do not need a database to refresh dynamic web pages. That’s why I use Hugo to run my web sites sulprobil.de and (external link!) berndplumhoff.com.

Hugo is quite efficient. The web pages will be translated quickly. The generated web pages will be loaded quickly, and they are well readable on a computer as well as on smart phones.

A good introduction to Hugo you can find here (external link!): Hugo Quick Start.

Prerequisites

  1. You need a web site and a provider.

  2. You need to install Hugo, see (external link!) Hugo Quick Start.

  3. I also installed 7zip to easily pack my generated web pages and to transfer them to my web site. Later I plan to use FileZilla.

  4. Normally you also should install Git for version control. I started without because I control my versions in the cloud.

  5. You need to have basic knowledge of HTML or of Markdown files, and you need to be able to execute and to change batch files.

  6. I selected the simple Ghostwriter theme this file config.toml

baseurl = "https://www.sulprobil.de/"
title = "Sulprobil"
theme = "ghostwriter"

[Params]
    mainSections = ["post"]
    intro = true
    headline = "Sulprobil Blog"
	copyright = "(C) (P) 2024 by Bernd Plumhoff"
	defaultContentLanguage = 'en'
    description = "Google site:sulprobil.de [search items] to look around here"
    email = "mail@sulprobil.de"
    opengraph = true
    dateFormat = "Mon, Jan 2, 2006"

[Permalinks]
    post = "/:filename/"
	
[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ''
    lineAnchors = ''
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = 'vs'
    tabWidth = 4

Markdown Files

I do not bother too much about HTML, I prefer working on the meta level Markdown.

I just enter my text in stream mode, italic text I need to enclose with single stars “*”, around bold text I need to enter two stars “**” on the left as well as on the right.

Protected text which I like to see as entered I need to enclose with “```”.

Some further specialties:

Images

Images I store as “.png” or “.jpg” files in subfolder static. With

![Grafic1](/grafic1.png)

I insert them into my web page.

Tables

Tables I generate with the (external link!) Markdown Table Generator:

Example:

Source code:

[//]: # ( https://www.tablesgenerator.com/markdown_tables )
---
|         |  Values |  Percent  |
|--------:|--------:|----------:|
|         |      11 |      1.80 |
|         |      45 |      7.36 |
|         |     555 |     90.83 |
| **Sum** | **611** | **99.99** |
---

Result:

Values Percent
11 1.80
45 7.36
555 90.83
Sum 611 99.99

Of course you can enter Markdown tables directly. A table starts and ends with “—” (three dashes), and with a colon “:” in the underlining title row you specify whether a column should be left aligned or right aligned.

An internal link I enter with

[Logging](https://www.sulprobil.de/excel_vba_programming_environment_en/ "Logging")

for example.

An external link I define at the end of my Markdown file with

[Hugo Quick Start]: https://gohugo.io/getting-started/quick-start/

for example.

The link(s) to this I then enter with

(external link!) [Hugo Quick Start]

for example. The somewhat ugly note “(external link!)” I just add for legal safety. In Markdown files I cannot create a target “_blank”.

Syntax Highlighting

Syntax highlighting is done by Chroma.

In file config.toml on web site level I have:

[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ''
    lineAnchors = ''
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = 'vs'
    tabWidth = 4

And on my web pages I then use, for example:

Start String For
```VB.net VBA Code
```Batchfile Batch file
```markdown Markdown file
```Perl Perl Code
```SQL SQL Code

Bullet Points

If you like to generate bullet point within your text such as

  • First bullet point
  • Second bullet point
  • Third bullet point

then just enter

- First bullet point
- Second bullet point
- Third bullet point

Easy Editing and Testing of Generated Web Pages

Hugo translates my web pages quickly into HTML, and I can test it easily.

With hugo -D I translate my whole web site. Resulting HTML files will be generated in subfolder public.

With hugo serve I translate my web pages on-the-fly. They will be shown on my local site http://localhost:1313/. Hugo is waiting for changes and would show them immediately.

The batch file listed below first deletes subfolder public, then it translates the whole website and the generated HTML files get zipped in subfolder public into zip file public.zip. For this I installed 7zip.

The batch file kills any live waiting Hugo process and starts the local test site http://localhost:1313/. Then Hugo is waiting for potential changes of mine. I check my pages, change them if necessary, look at the instantly generated results, check again, and so on until I am satisfied.

Please read my Disclaimer.

@ECHO OFF 
TITLE Running hugo now and showing local test site
REM Please note that you need to add C:\Programme\Hugo\bin
REM (your Hugo installation folder) to your %PATH%.
RMDIR /S /Q public
timeout /t 5 /nobreak > nul
RMDIR /S /Q public
timeout /t 5 /nobreak > nul
taskkill /f /im hugo.exe
hugo -D || PAUSE && EXIT /B
CD public && "C:\Programme\7-Zip\7z.exe" a -tzip "public.zip" "."
CD ..
start "" http://localhost:1313/
REM hugo serve
hugo server --disableFastRender