Trouble getting /posts files to show up on homepage

support
1

Dummy repository link: Test-Site/Test at main · DrC0l0ssus/Test-Site · GitHub

I’m in the midst of learning Hugo and creating a site from scratch with the HTML and CSS files I’ve created so far. Cloudcannon has a pretty good explainer series on how to use Hugo, but I’m getting tripped up on the weblog part: Content and blogging in Hugo | CloudCannon

I want to put my posts on the homepage instead of a separate section, but I’m trying to reverse-engineer Cloudcannon’s process and am not having any luck so far.

I don’t have the files on any repository to easily share, so I’ll share my relevant code snippets here if it helps show where I’m at. Right now, my baseof.html file looks like this:

<!DOCTYPE html>

<html lang="en-us">

<head>

{{ partial "header.html" . }}

</head>

<body>

{{ partial "navbar.html" . }}

<main>

{{ block "main" . }}

{{ end }}

</main>

<footer>

{{ partial "footer.html" . }}

</footer>

</body>

</html>

index.html in my “layouts” folder looks like this:

{{ define "main" }}

<h1>(arbitrary header - for some reason my footer doesn't appear if I don't have this here, but otherwise this should be optional)</h1>

<p>{{ .Content }}</p>

{{ end }}

list.html in my “/layouts/posts” folder (and in my /_default folder - I wasn’t sure if the changes would work there) looks like this:

{{ define “main” }}
{{ range (.GetPage “/posts”).Pages }}
{{ end }}
{{ end }}

(I got that 2nd line of code from here: Listing blog posts on homepage not working - #2 by pointyfar but it didn’t seem to fix my problem, FYI.)

single.html in /layouts/posts folder looks like this. I changed the code from Cloudcannon’s example by removing all the HTML except for the date div class (though I’m not sure I even need the div class part, I think I just need the line, right?).

{{ define “main” }}
{{ .Content }}

{{ .Date.Format "January 2, 2006" }}
{{ end }}

Changing “draft” to “false” in my posts’ front matter (the Markdown files) didn’t change anything either.

I’m sure I’m missing something but I’m at a loss to figure out what it is. Any help would be appreciated, and if you need to see what my code is on other pages or where I have other files located, I’m happy to explain that too. Apologies for the long post, and thank you in advance!

P.S. - If anyone also has a clue as to why my footer disappears unless I have an h1 title in my index.html page, I’d appreciate any help there too - minor issue but it’s also throwing me for a loop!

2

Not really.

You are more likely to receive an accurate and timely response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

Try this in your index.html file.

{{ define "main" }}
<h1>{{ site.Title }}</h1>
<section class="">
    {{- $p := .Paginate (where site.RegularPages "Section" "posts") }}
    {{ range $p.Pages }}
    <article class="">
        <a class="" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
    </article>
    {{- end }}
    {{- template "_internal/pagination.html" . }}
    </section>
{{- end }}

Do you need to add featured images?

4

Featured images - no, I don’t need to add them. I have a question about this line:

{{- template "_internal/pagination.html" . }}

Is a pagination file required if I want to paginate posts? The Cloudcannon article didn’t mention anything about it. Also, where would I put the _internal file?

5

That part covers pagination for you. You just now need to style it with some CSS.

6

I edited my post, but here’s a dummy repository link: Test-Site/Test at main · DrC0l0ssus/Test-Site · GitHub

I removed some files/folders from “content” that aren’t relevant to this problem, so I’m focusing solely on “posts”. Let me know if you have trouble viewing the files, I haven’t had a GitHub account until now so I’m not used to using it.

7

Adding the code you suggested alone doesn’t seem to do anything - I edited my initial post to include a dummy repository here: Test-Site/Test at main · DrC0l0ssus/Test-Site · GitHub

I got rid of some irrelevant folders/files from “content” as they’re just sub-pages, but let me know if you have trouble accessing the files or getting them to work. I’m new to GitHub, so let me know if I borked anything. Thanks!

8

Looking through your example, it seems like it might be easier for you to start with something that you can easily learn from. So, instead of fixing what you already have, have a look at this:

git clone --single-branch -b hugo-forum-topic-43054 https://github.com/jmooring/hugo-testing hugo-forum-topic-43054
cd hugo-forum-topic-43054
hugo server

This is a very basic skeleton.

9
  1. Your markdown posts don’t have a title field.
  2. Your layout structure is wrong. index.html should be in the root of layouts folder.
  3. Run the server command with hugo server -D when you have draft: true set.
  4. Include an _index.md file in the root of the content folder.
  5. Follow @jmooring 's example as he recommends.
1 Like
10

Thanks. I moved the files you mentioned in steps 2 and 4. As for 1, is the title field required? I assumed it wasn’t, and I wasn’t planning on having titles with my posts. Is it possible to disable the title field (aside from not including them)?

Once I followed steps 1 - 4, I got the post titles to show up on the homepage. I’d like to just have the entire posts show up on the homepage instead of summaries and save clicks, but I’ll look into @jmooring’s example and follow up with him on his post to keep the conversation in their respective lanes here.

11

Thanks, I got the example downloaded and set up. It’s definitely different than how I have my site set up.

@Arif 's post below got me started with getting my posts visible on my home page, but it only shows the titles by default. What I’m interested in with the posts are two things:

  1. Are titles required? I plan to post just an image or two at a time, with maybe a couple sentences for each post and the date.

  2. Can I skip the summary and just have the entire posts show up on the homepage to save users some clicks?

13

How will you differentiate between posts without titles? Remember titles are also used by search engines and social media open graph tags.

Replace the code in index.html (or home.html whichever file name you choose) with the following

{{ define "main" }}
  {{ range (where site.RegularPages "Section" "posts").ByDate.Reverse }}
    <h2>{{ .Title }}</h2>
    {{ .Content }}
  {{ end }}
{{ end }}
14

If you content files contain link or image destinations that are relative to the content page, the links and images will be broken when the content is rendered in another context (e.g., home page, list page).

You need to use markdown render hooks to resolve these to the site root.

15

Good point. This wasn’t a must-have setting on my end, I just figured it wasn’t worth having b/c I’d probably spend more time thinking of a title than putting a post together. I’ll live. :smile:

16

Mine will definitely contain images, and possibly links. In your example site you sent me, I know post 15 has an image and is set up as a leaf bundle, so I’ll probably use that as a template or an example for how to structure my posts. Not sure if using markdown render hooks is a separate issue or not, so let me know if I’m on the right train of thought there or if I need to do something else.

1 Like