Which theme to use when generate HTML for offline viewing?

support
1

In short: How does hugo decide if one of my md-files is “page” or something else?

The initial thread was closed.

I want HTML files generated for offline use and access them via file:// protocol. Based on this answer I created this config.toml.

baseURL = "/"
uglyURLs = true
relativeURLs = true
languageCode = "en-us"
title = "My New Hugo Site"

Currently I am using the ananke theme from the intro tutorial. But I assume this is not a good one for my use case because of warnings like this.

WARN 2022/03/13 16:56:42 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

I also wonder why this is a WARN instead of an ERR because no HTLM file was generated. Something is blocking.

The layouts folder in the hugo project folder is empty. But themes/ananke/layouts/ has some stuff in it; but no page.*.

Maybe another theme?
I assume “page” is fitted to something like a hugo template?

What is the hugo-way in that case? Creating a template or getting it from another them. Or make hugo teat my md files not as “page”?

2

Yes, use a different theme. I don’t personally know of any to recommend, but I think Ananke hasn’t been updated in a bit.

I sometimes use Hugo to generate output that does not include HTML; offering it as a concept to think of Hugo as an adaptable tool, which generates HTML very easily among other things. :slight_smile:

“Page” in this context is a “Kind”: Section page templates | Hugo

Hopefully someone can recommend a minimal theme for you to start with as a base, to see how it works. :slight_smile:

3

So… here is my base layouts I use to start new projects. Each file goes in layouts/_default:

baseof.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ block "title" .}}{{- .Title -}}{{ end }}</title>
        <link href="{{ "css/style.css" | absURL }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <main>
            {{- block "main" . -}}
            {{ end }}
        </main>
    </body>
</html>

list.html

{{ define "main"  }}
<header>
    <h1>{{- .Title -}}</h1>
</header>
{{ .Content }}
<ul>
{{ range first 200 .Pages }}
  <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
  </li>
{{ end }}
</ul>
{{ end }}

single.html

{{ define "main"  }}
<header>
    <h1>{{- .Title -}}</h1>
</header>
{{ .Content }}
{{ end }}

And in static/css/style.css I put something minimal, like:

main {
    max-width: 70ch;
    margin: 0 auto;
    padding: 0 2vmin;
    font-family: sans-serif;
    font-size: 1.25rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

a {
    color: black;
    text-decoration: none;
    border-bottom: 1px solid blue;
    overflow-wrap: break-word;
}

That’s a whole theme, and would be where I started with an offline docs site (which I use Hugo for all the time, so it’s a great tool for that!). :slight_smile:

1 Like
4

It was last updated 13 days back: GitHub - theNewDynamic/gohugo-theme-ananke: Ananke: A theme for Hugo Sites. I think it’s a pilot error.

1 Like
5

I have to guess that one or both of the below steps were missing:

  1. (in your site root) git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
  2. echo theme = \"ananke\" >> config.toml

The page Page Kind is the most basic Kind. You cannot have a theme that doesn’t provide the layout for that Kind.

Ref: Quick start | Hugo

image
image772×745 33.1 KB

1 Like
6

The Ananke theme works mostly for local browsing too; you only need to fix the layout files in that theme where it links to the site homepage. It will be something like what I did in this commit which I mentioned in this comment.

In this commit, I replaced my local layout files with the ananke theme and the site builds fine without any warnings.

1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.