[SOLVED] Hopefully very simple

support
1

I’m new to Hugo and would like to make a site that seems very simple.

I want to have a few different content types, files for which I will
put in different subdirectories of content, for example

content/blog
content/lists
content/tutorials

I want the main page (page that is opened by hugo serve) to
have links to pages that index each subdirectory of content.
That is, the main page should have links to some sort of
index file for each of the subdirectories. Ideally, these index
files would be automagically generated.

I thought (hoped?) that somehow if I created this directory
structure, when I typed hugo serve a website with links
matching the directory structure would magically appear. Sadly,
all that happened was that an empty “Posts” page was created.

The hugo documentation talks a lot about directory structure,
content types, indexes, etc but there is not much in the way
of actual examples. Is there some theme for which doing what I
describe above is easy?

I should mention that I am both old and busy and so I am limited
in my ability to learn a bunch of new stuff in order to do something
that seems straightforward. I’m hoping there is some theme or
config file that does this without having to manipulate a bunch of
other files or learn a bunch of stuff that I don’t have room in my
brain to know.

Many thanks for your help

2

TL;DR: Yes it’s pretty simple. You need to override the index.html of your theme. This can be done with either modifying the theme or better yet, creating a layouts directory in your site and creating an index.html page. If you provide the name of your desired theme and a link to a barebones repo with some sample pages that reflect the structure of your website, we might be able to just make index.html for you.

This is very similar to what I have done to my public knowledge base.

See here https://github.com/parsiya/parsiya.io/blob/master/layouts/index.html#L10-L21

{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
  {{ $p := $.Site.GetPage "taxonomyTerm" "categories" $name }}
  <li><a href="{{ $baseUrl }}/categories/{{ $name | urlize }}">{{ $p.Title | title }}</a>
  {{ with $p.Params.snippet }}: {{ . }}{{ end }}
    <ul>
      {{ range $taxonomy.Pages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}{{ with .Params.wip }} - WIP{{ end }}</a></li>
        <span class="doc-entry-meta">{{ with .Params.snippet }}{{ . | markdownify }}{{ end }}</span>
      {{ end }}
    </ul>
  </li>
{{ end }}

This just iterates through each category and adds a link. Then adds all pages belonging to that category, It also adds a snippet for each category and page (if provided).

In your case categories will be blog/list/tutorials (or you can override them in frontmatter of each page).

For me categories are defined in frontmatter. You can see the structure of my content at:

Inside that directory you can see different directories for each category. No that each page can have multiple categories.

The index of the website then creates links to each category and each subsequent page. You can see the result here:

In your case, you don’t need the snippet or the links to child pages inside categories so you just need to do something like this:

{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
  {{ $p := $.Site.GetPage "taxonomyTerm" "categories" $name }}
  <li><a href="{{ $baseUrl }}/categories/{{ $name | urlize }}">{{ $p.Title | title }}</a>
  </li>
{{ end }}
3

Thanks for your quick reply and help! I’m using simple themes like one, temple and
lithium. I’ll look over your website and give your suggestion a try.

Many thanks.