German umlauts / papercss / Hugo

support
1

Hi, I use Papercss as Theme and Hugo - latest edition, hugo is running on my shared hosting server.

My problem: I can’t get Umlauts (Ä, Ü, Ö,ß) to work with that combination. Is this due to the font that papercss is using? Or is there an error within Hugo that prevents the usage of Umlauts?

Can anybody please help me?

This is an example: https://beck24.be/post/apfeltarte/

And how can I use colors in markdown with papercss? On the papercss demo page, there is color and such stuff, however, I can’t get it right, it seems.

2

I did create / edit the post with StackIt StackEdit and the Umlauts work. However, after I run hugo, the “public” HTML is not using the Umlauts

StackIt:

das Mehl und das Salz in eine Rührschüssel geben und mit dem Knethaken in der Küchenmaschine verarbeiten. habe dabei die Erfahrung gemacht, dass es schon noch 2-3 Esslöffel

HUGO Public HMTL

as Mehl und das Salz in eine R�hrsch�ssel geben und mit dem Knethaken in der K�chenmaschine verarbeiten. Ich habe dabei die Erfahrung gemacht, dass es schon noch 2-3 Essl�ffel

3

I suspect that the markdown file in your content directory is not properly encoded. This would be easier to troubleshoot if you posted a link to the public repository for your site.

4

Will do, if you could tell me how.

I use the following scheme:
HUGO Folder H
H/blog
H/bin
and
…/bin/hugo from within blog

and all of it on my shared hosting server (all-inkl.com)

5

This is the Markdown Post:

title: “Apfeltarte”
date: 2020-05-31T20:53:58-06:00
tags: [apfel,tarte,kuchen,backen]
show_summary: true

Apfeltarte

Das ursprüngliche Rezept habe ich im Backbuch der Stiftung Warentest gefunden. Es ist inzwischen unser Standard-Apfelkuchen, weil es eben so schnell und einfach geht, gleichzeitig ohne Zucker auskommt und sehr lecker ist!

Warm aus dem Ofen schmeckt die Tarte am besten!

Zutaten

  • 200g Mehl
  • 125g Butter (weich)
  • 1 Eigelb
  • 1/4 tl Salz
  • 2 EL Wasser
  • 3-4 Äpfel (je nach Größe)

Zubereitung

Einfach die weiche Butter, das Eigelb, das Mehl und das Salz in eine Rührschüssel geben und mit dem Knethaken in der Küchenmaschine verarbeiten.
(…) (I cut the rest)

6

Help with source control management, archiving, file sharing, etc. is outside of the scope of this support community. You’ll need to learn how to do that on your own. Maybe you can start with Dropbox…

Or, do some research on file encoding, and try to understand how your files are encoded.

8

Would it be possible to tell me, how the markdown file should be properly encoded for the use of umlauts? That would help as well.

9

https://www.google.com/search?q=encoding+umlauts

10

The strange thing:

<html lang="de">
<head>
<meta charset="utf-8">

In the header, UTF 8 is selected.

and in the config:

languageCode = "de-de"
defaultContentLanguage = "de"

If I use HTML for Umlauts, it does not work as well… as you can see in the main nav: www.beck24.be

11

This is irrelevant if the file itself is not encoded properly.

Reading one of your previous posts, I believe your workflow is… unusual. Please describe, step by step, how you create the markdown file that is processed by Hugo. For example, do you copy/paste? Do you copy/paste in the terminal? Do you copy/paste over SSH?

12

Yeah, might be… unusual.

I did it like this:
install hugo / used Papercss as theme

So far, so good. Works.

  • Copy old post file (creating-a-new-theme.md)
  • Rename file, using Filezilla / ftp to new.md
  • Filezilla -> edit file (open with notepad)
  • copy contents and edit it, using StackedIt
  • copy content (CTRL-A)
  • paste content into new.md
  • save new.md with Filezilla uploading it into content/post
  • GO TO SSH (on my cellphone)
  • point to the folder, where the blog is
  • …/bin/hugo - to run hugo
  • hugo runs, no problems
  • reload page on browser - see the changes
13

This is a file I created by using the above mentioned way (I only did cut out text (…) to make it shorter):

---
title: "Apfeltarte"
date: 2020-05-31T20:53:58-06:00
tags: [apfel,tarte,kuchen,backen]
show_summary: true 
---

## Apfeltarte

*Das ursprüngliche Rezept habe ich im Backbuch 
 der Stiftung Warentest gefunden. Es ist inzwischen unser (...)*

**Warm aus dem Ofen schmeckt die Tarte am besten!**
<div  class="alert alert-secondary">

### Zutaten
* 200g Mehl
* 125g Butter (weich)
* 1 Eigelb
* 1/4 tl Salz
* 2 EL Wasser
* 3-4 Äpfel (je nach Größe)
</div>

### Zubereitung
Einfach die weiche Butter, das Eigelb, 
das Mehl und das Salz in eine Rührschüssel (...).
14

No, it does not. That’s why we are spending so much time on this.

Using SSH, type this:

file -i content/foo/bar.md

What’s the output?

15

I tried it in my Blog-Folder (where all the material for that website is) and got an error message.

IMG_20200602_165320
IMG_20200602_1653201080×392 75.7 KB

16

You were supposed to replace the path with an actual path. OK, step by step:

  1. SSH into your server
  2. Change directory to your content directory
  3. Change directory to a subdirectory of content, one that contains markdown files
  4. List the files
  5. Take note of the filename
  6. Type file -i followed by the filename
17

:see_no_evil: I am way too tired :wink: (got 2 Kids, 6 Months and 2,5 years and working as an editor in homeoffice takes its toll)

Will do. Thx for your help and time!

18

apfel2.md: text/plain; charset=iso-8859-1

The page looks like this in the browser: https://beck24.be/apfel2/

and wiki (German version) points out https://de.wikipedia.org/wiki/ISO_8859-1 that it is Latin-1 Western Europe

19

Exactly. The file is not encoded properly. You should see:

text/plain; charset=utf-8

I suspect the problem in your convoluted workflow is caused by Notepad. Try an editor such as Notepad++, but make sure you change the default encoding to UTF-8 in the preferences.

I refer you back to my response to your original post:

20

Actually, I open it with Editor. Never had problems before, using it for HMTL, CSS or other stuff. And if I open the apfel2.md and copy it into Dillinger or Stacked.it I don’t see “ISO…:” either?

21

Oh, just learned that Eitor = Notepad? I always thought, those are seperate?

And I found a solution: It is possible to use the Editor, just make sure you select “SAVE AS” and in that menue “CODING: UTF8”

utf8
utf8907×137 13.4 KB

Once, after the file is saved using UTF8, it is possible to select “edit” in Filezilla and simply save it and it keeps UTF8.

Big THX @jmooring! :+1: