Where do I place an almost static html file

Hello,

I am still learning and thanks to the people here who have been helping me understand and even help me out when I am stuck.

So here is another problem that I am trying to figure out -

So here is what I am trying to do -

I have a folder under content called fruits. This folder has files like apple.md, banana.md - basically fruitname.md for the 50 odd files I have here.

The following is the front-matter that I have - example from my apple.md file

usage_name: "Apple"
scientific_name: "Malus pumila, Malus domestica, Malus sylvestris, Malus communis, Pyrus malus"
taste: ["sweet", "sour", "savoury"]
color: ["red", "green"]
pics: "fruits"

Now my question is that I am trying to create a page with this kind of URL -
/fruit-info/usage_name and basically what I plan to do is - display an image of the fruit (brought in from the Parameter pics (on my front-matter), Name of the Fruit and then display a generic static set of text - which would be something like - this is a fruit and it is healthy for us (a paragraph of such static text).

As this text is almost static, I did not feel it would be good to increase the byte-size by including it on every fruit’s md file.

So here is how I would ideally like it to be - for example the apple -

URL: localhost:1313/fruit-info/apple
Fruit Name: apple
Image of Apple (brought in from /static/images folder)
A paragraph of static text

Here is what I tried -

I first created a folder fruit-info under layouts and then created a single.html inside it. But as expected, it failed - just because there is no fruit-info folder with its md files in /content.

Then, I tried placing the fruit-info.html into static but then I realized that static is not the right place - as it is for files that do not change their content like CSS, JS images etc.

So my question is - Is it doable? And if so, where do I place this file on my goHugo setup and how can I get this to work.

You are almost certainly looking for Hugo’s notion of Page Bundles. Instead of having fruit/banana.md, create a folder fruit/banana/ and put fruit/banana/index.md alongside with fruit/banana/picture.png or similar. Now, you need a matching single.html layout for your theme that displays these single posts.

Read more about Page Bundles here: Page Bundles | Hugo

@benjaoming

I am not sure if I understand that. I already have completed everything and is working fine. Changing the content/fruit folder will only add on to my confusions.

Also, if I were to change the folder structure, I understand, for my learning purpose, it might be doing good, but given a real time scenario, where most of the work is ready and there are say 1000s of md files organized in several folders under content, this would become very very complicated and daunting.

As such, I believe there is some simpler way out.

Don’t confuse URL management with content modeling.

If you have content/fruits then the content .Type of each entry is fruits. To leverage Hugo’s lookup order, place your customized single.html in layouts/fruits.

If you would prefer to access the content at https://example.org/fruit-info/ instead of https://example.org/fruits/

  1. Create a permalink entry in your site configuration.

    [permalinks]
    fruits = '/fruit-info/:title/'
    
  2. Create a section page (content/fruits/_index.md) with this frontmatter:

    title = 'Fruit Info'
    date = 2022-02-18T14:56:12-08:00
    draft = false
    url = 'fruit-info/'
    

I am not sure if I understand that. I already have completed everything and is working fine. Changing the content/fruit folder will only add on to my confusions.

That’s fair. If you want to keep the current layout, I would suggest that you create a Page Bundle on a separate page containing the necessary images. You can create a Headless Bundle and use .Resources.GetMatch to fetch named files from that bundle.

No no. I already have the /layouts/fruits/list.html and /layouts/fruits/single.html already which are working fine as expected. The list displays all the fruit names that I have and then single displays the details from the front matter as needed.

On this /layouts/fruits/single.html I have a button which says “Click to know about Fruits” and when I click this button, I want that “fruit-info.html” file to load.

Now, if the button is clicked on the /fruits/apple page, I want that fruit-into.html to display the following for apple.

Fruit Name: apple
Image of Apple (brought in from /static/images folder)
A paragraph of static text about fruits in general

And the URL for this to be URL: localhost:1313/fruit-info/apple

Similarly when I click this button on /fruits/banana it should display -

Fruit Name: banana
Image of banana (brought in from /static/images folder)
The same paragraph of static text about fruits in general

And this time the URL to be /fruits-info/banana

So you have 1 content file: fruits/banana
And you want to display it 2 ways: layouts/fruit/single.html and something else.

Is that correct?

Probably.

The single.html in the layouts/fruits folder has the button which is linked to the fruits-info.html file.

Urls:
localhost:1313/fruits/apple
localhost:1313/fruits/banana

All work good. They display the fruit info from their .md file.

It is when I click the button on these pages, I want the fruit-info page to display.

The headless bundles text on the documentation says -

Blockquote
to not get published anywhere and It will have no Permalink and no rendered HTML in public/

But I need fruit-info/ URL to be displayed

Generally speaking, every non-list page generated when you run hugo needs to be backed by a file. So without getting clever, you cannot generate two HTML files from one markdown file.

A similar question came up this afternoon:
https://discourse.gohugo.io/t/multiple-layouts-for-same-content/37238/2

Perhaps a JS approach would be better.

Wait a second… just thought of something… give me a few minutes.

1 Like

The above is a truncated (the files in fruits folder have been removed and also no files in static folders on the image) folder and file structure that I currently have. I hope that can give a better picture.

Give this a try:

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

I think it’s close to what you want.

1 Like

Thank you for the extra effort at your end. I tried it out and it worked.

Can I use Permalinks in config.toml to translate the URLs for these pages?

Currently the URL for these pages is - http://localhost:1313/fruits/apple/info.html

Can using Permalinks (or maybe something else) help in making them translate to
http://localhost:1313/info/apple

I would ideally prefer it so because all the other URLs generated here currently do not have .html.

Thank you once again for all the advice and help @jmooring

I’ve updated the test repository to use this in site config:

[outputFormats.info]
mediaType = "text/html"
isHTML = true
path = 'info'

That will generate this directory structure when you build the site:

public/
├── fruits/
│   ├── apple/
│   │   └── index.html
│   ├── banana/
│   │   └── index.html
│   ├── orange/
│   │   └── index.html
│   └── index.html
├── info/
│   └── fruits/
│       ├── apple/
│       │   └── index.html
│       ├── banana/
│       │   └── index.html
│       └── orange/
│           └── index.html
└── index.html

It’s not exactly what you want, but I think it will suffice.