Emoji not displayed in deployed Hugo website (Netlify)

Question

I have deployed my Hugo website (build in RStudio with blogdown) on Netlify and noticed that I am missing (some of) the emoji that I added in the title/subtitle [see https://new-blog-2020.netlify.app/ ]

This does not happen when I run the site locally (blogdown::server_site())

How can I fix this? If it matters, my theme is hugo-lamp

EDIT:

header.html

  <h1 class="title"><a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">{{ .Site.Title | emojify }}</a></h1>
  {{ else }}
    <h2 class="title"><a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">{{ .Site.Title | emojify}}</a></h2>
  {{ end }}
  <p class="subtitle">{{ .Site.Params.subtitle | emojify}}</p>

config.toml

[params]
  mainSections = ["posts"] # determine which sections are displayed on the homepage
  subtitle = "Here is where I have fun with </br> data :bar_chart: (and) :microbe: science :dna: :microscope:"
  author = "Nick"

n m n m · Accepted Answer · 2020-05-12T21:05:50

I use emoji in some titles[*] of articles on my Hugo-based site and after a lot of experiments have decided that for me the best solution is to use Unicode characters rather than emoji codes[^] in titles. For example, instead of :dna: and :microbe:, you could use the Unicode characters 🧬 and 🦠 in your title and subtitle.

An alternative is to edit the relevant layout file so that instead of, for example, {{ .Title }} it says {{ .Title |emojify }}.

In any case, make sure your editor, source and destination files, web server, and web browser are all using UTF-8 encoding.

I hope this helps!

[*] For example Introduction to Hugo Bundles🎁 and AsciiDoc Kitchen Sink (featuring 🐯)

[^] To use emoji codes in Hugo, you need enableEmoji: true in your config.yaml.

Emoji not displayed in deployed Hugo website (Netlify)

1 Answers