Hugo Theme not rendering pages

support
1

First off…I’m really new to hugo and I’m trying to build my own theme. I have the theme mocked up in terms of looks.

theme
theme.png915×576 20.8 KB

Everything looks good there.

I created this folder structure since all of the top links are static or external except for posts.

Now when I click about or homelab at the top, I get this:

I’m sure I’m missing something simple due to lack of experience so any help would be appreciated.

Thanks!

2

folders
folders.png798×496 22.6 KB

3

page2
page2.png625×638 15.7 KB

4

Github is having issues but here is the code repo.

5

remove draft = true

Unless you run hugo server -D with the draft flag it won’t render draft pages.

6

I’m actually running the server with hugo server -D --watch --disableFastRender --verbose

I have set the pages as draft false and did a normal build and still the same behavior. Its weird.

7

I’m using this in both my list and single templates as well as the home index.

{{ define “main” }}

{{ .Content }}

{{ end }}

Home index works fine, but neither the single or list does.

8

I don’t use content blocks but I think you need to pass . in order to get context into your block, try changing your code to this and see if that helps.

{{ define “main” . }}

{{ .Content }}

{{ end }}
9

I got this error:

ERROR 2018/11/02 14:47:14 Failed to add template “_default/list.html” in path “_default\list.html”: template: _default\list.html:1: unexpected <.> in define clause
ERROR 2018/11/02 14:47:14 Failed to add template “_default/single.html” in path “_default\single.html”: template: _default\single.html:1: unexpected <.> in define clause

If you don’t use content blocks, is there another way I could accomplish this?

10

Yeah just replace your block with {{.Content}} instead of using:

{{ block "main" . }}{{ end }}

In your baseOf template.

After looking at your baseOf template and its docs I think you need to put the {{.Content}} inside your main block so it works.

{{ block "main" }}
{{.Content}}
{{ end }}
11

I put this in my baseof.html:

            {{ block "main" . }}
                {{.Content}}
            {{ end }}

Then I put this in my index, single and list layouts:

{{ .Content }}

It coverts my site to plain text and no theme.

12

@tomburge – I cloned your repo and got things working on my end. The fix was to add a leading / to your CSS links to make the paths absolute:

<link rel="stylesheet" type="text/css" href="/css/clarity-icons.min.css">
<link rel="stylesheet" type="text/css" href="/css/clarity-ui.min.css">

Since you are making a theme, though, you should use the absURL function for all your assets (CSS, JS, images). To use your CSS as an example:

{{ $clarityIconsCss := "css/clarity-icons.min.css" }}
<link rel="stylesheet" type="text/css" href="{{ $clarityIconsCss | absURL }}">
{{ $clarityUiCss := "/css/clarity-ui.min.css" }}
<link rel="stylesheet" type="text/css" href="{{ $clarityUiCss | absURL }}">

A few other notes… The main block should be used as follows. In your baseof.html:

{{ block "main" . }}{{ end }}

Then in your index.html, single.html, etc., something like:

{{ define "main" }}

<h1>{{ .Title }}</h1>
{{ .Content }}

{{ end }}

Also, your baseof.html has invalid HTML. Run it through the W3 HTML Checker and fix all the items marked as “Error”.

Just to name a few, you should not wrap your <html> with a <div> container… that belongs in the <body>. You are missing a closing </html> tag, etc.

13

Awesome! Yeah I must have had some missing tags from cutting and pasting a lot.

I really appreciate it. Thanks for the help!

1 Like