Hugo and creating non-blog pages

[griz_fan]

Hugo is making me feel like a complete idiot. Sorry if the frustration is boiling over, but I’ve struggled a LONG time trying to grasp how to create one-off, stand-alone pages that are not a traditional blog page. For example, I want to build a website for a family member’s small business. I have similar needs as in this earlier support post:
Creating ‘static’ content that uses partials - support - HUGO

For example, I want to create a contact page with an embedded form, form validation scripts, things like that. Apart from the header and footer, this is a complete one-off page, no others will be like it. For me, I would like to create this page in HTML, but still use the partials and other features of Hugo’s templating system. And I got something to work. I’m not sure if this is a good way to do it, but it at least produces a page that I can control. In the /content directory, I created a folder for contact, then added a _index.md file with basic front matter. I then created /layouts/contact/list.html with my HTML in it. Not sure why list instead of single.html, but it works.

Now, I also want to create a section for various services they offer. As before, I created /content/services/_index.md and /layouts/services/list.html Now, my trouble begins because I want a series of other pages to live in this section. http://localhost:1313/services/ loads fine. but, I create /content/services/sprinklers.md, with the expectation that http://localhost:1313/services/sprinklers would work. this produces a 404 error. I have no idea why.

I have read through Hugo’s Lookup Order | Hugo and Content Organization | Hugo several times. I just don’t get it. I’m not sure why, I just can not get my brain to process this, and I’m hoping someone can explain it to me a different way.

I’ve also tried specifying this in the front matter:
—
title: “Sprinklers”
type: services
layout: single
—
but that didn’t work for me.

Ultimately, I hope to finally understand the relationship between the /content/ directory and the /layouts/ directory. I want to create a URL like www.sitename.com/services - with a special HTML template for this section home page

• www.sitename.com/services/sprinklers - with a special HTML template for this section single pages
• www.sitename.com/services/landscaping - with a special HTML template for this section single pages
• And so on.

Right now, even when I do manage to get something to work, I’ve twisted my brain in so many circles I have no idea why it works. Any help would be greatly appreciated because I’m really struggling with this specific concept.

https://nifty-einstein-9d1275.netlify.com/ - a preview version of the site
GitHub - grizfan/bmls3 - a publicly available GitHub repo

[alexandros]

Page Bundles are a simple way to organize content files along with their relevant page resources

Here is a simplified explanation

_index.md

BRANCH Page Bundle i.e. LIST page (A.K.A. SECTION in Hugo terminology)

relevant template
/layouts/_default/list.html
or
/layouts/section-name/list.html
or
/layouts/section/<name-of-section>.html

Prerequisite folder structure

content
└── section-name
    └── _index.md

---

index.md

LEAF Page Bundle i.e. SINGLE page

relevant template
/layouts/_default/single.html
or
/layouts/section-name/single.html

Prerequisite folder structure

content
└── single-title
    └── index.md

Relevant DOC

Page Bundles

---

Also note that content files can also exist without being organized in Page Bundles and they can exist side by side Page Bundles or within Section Page Bundles like so:

content
├── single-post.md
├── single-page-bundle
│   └── index.md
└── section
    ├── _index.md
    ├── single-post.md
    └── single-page-bundle-within-section
        └── index.md

Single page content files are again rendered either by /layouts/_default/single.html or /layouts/section-name/single.html

Templates under /layouts/_default/ are the templates that rule all pages, if a user defines a section-name folder under layouts then the templates contained within will render pages that belong in said section.

Regarding the layout parameter one can specify a template under /layouts/ e.g. design.html and in a content file’s front matter enter layout = "design" and then this page will be rendered using the design.html template regardless of the section in which it belongs. The same is true if one uses the type parameter because type is an alias of section and if one enters type = "design" in the front matter of a content file then the template that will be used is the one for single pages that exist under the /design/ section.