Hugo: Showing a HTML file directly after clicking one post

support
1

I’m struggling to show a HTML file as a content. After hours reading past postings, I still don’t find a good solution.

I have created a HTML file with its own styling generated using RStudio for my R-project or Quarto for my Python-project. I want to show this HTML file in my website under “Projects” section. I am aware that the normal workflow is create contents using markdown. But for some coding projects, I have already HTML files to showcase my findings.

I built my website using Hugo Framework and Ananke theme.

Current workaround:

  1. The reader just need to open projects page and click the following:
    enter image description here
  2. Click on the project in yellow box (as can be seen above),
  3. If you scroll down the link, you will find 2 little blue web symbols.
  4. The reader needs to click the web icon in order to open a HTML file.

This is acceptable for that project site but not for my current new one.

Desired result:

  • The same as above but without step number 3 (without intermediate page from step 3).
  • Step number 2 should leads to the HTML file from step 4.

Thank you in advance for any suggestions.

2

project structure

static/
├── docs/
│   └── project-3/
│       └── bike-share-case-study.html
└── favicon.ico

content/post/project-3.md

+++
title = 'Project 3'
date = 2023-04-23T09:59:23-07:00
draft = false
relPermalinkOverride = '/docs/project-3/bike-share-case-study.html'
+++

template

{{ range site.RegularPages }}
  {{ $href := .RelPermalink }}
  {{ with .Params.relPermalinkOverride }}
    {{ $href = . }}
  {{ end }}
  <h2><a href="{{ $href }}">{{ .Title }}</a></h2>
  {{ .Summary }}
{{ end }}
3

Hey jmooring, thank you for your answer.

I have inserted the html file into static/docs/project-5/.
The suggested header is as well inserted with the correct relPermalinkOverride.

I am not sure about the template though, where should I put it?
I inserted into the content/post/project-5.md, which is:

+++
title = 'Project 5'
date = 2023-04-23T19:36:23-07:00
draft = false
relPermalinkOverride = '/docs/project-5/price_elasticity.html'
+++

**This page is still in work**

{{ range site.RegularPages }}
  {{ $href := .RelPermalink }}
  {{ with .Params.relPermalinkOverride }}
    {{ $href = . }}
  {{ end }}
  <h2><a href="{{ $href }}">{{ .Title }}</a></h2>
  {{ .Summary }}
{{ end }}

This new post still doesn’t appear under my projects.

Thank you in advance for any further suggestions…

4

Oh no. Template code goes in templates. Content goes in content.

Try this:

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

This uses the Ananke theme. Project 3 is linked to the static HTML. And I’ve moved the static HTML file from the static directory to assets (helps with URL resolution in some cases).

In the root of the project, in the layouts directory, I have overridden 3 of the Ananke templates.

5

Thank you for delivering a very straight forward answer with git repo. I could run your repo and get exactly how I wanted it.

But as soon as I implement it to my website, it doesn’t work. I think I miss something.
This is what I did for my project-5:

Screenshot 2023-04-23 at 20.32.17
Screenshot 2023-04-23 at 20.32.171283×942 80.8 KB

  1. Create content/post/project-5.md and with following content:
+++

title = 'Price Elasticity'
date = 2023-04-23T19:36:23-07:00
draft = false
featured_image = 'images/project-5/price_elasticity.png'
relPermalinkOverride = '/docs/project-5/price_elasticity.html'
tags = ['Python', "Data Analytic", "Finance"]

+++

Description: This article is about how to use price elasticity theory to determine optimal price that maximize revenues.
  1. Insert HTML file into: assets/docs/project-5/price_elasticity.html
  2. Insert png file into: static/images/project-5/price_elasticity.png
  3. Copy and paste 3 template files into the same directory as you did under folder layouts

The project-5 still doesn’t show.
I am not sure what I missed… Thank you in advance for your answer.

6

Hi jmooring, I found now a working solution. Still I don’t understand why it is now working:

Screenshot 2023-04-23 at 23.33.31
Screenshot 2023-04-23 at 23.33.311011×721 108 KB

If I use the date with green mark, then the post appears. But if I change back to date with red mark, then the post disappears. I also include my current local time (Berlin) in my screenshot. I only changed the date.

I hope someone could explain to me, why it is behaving like that.
@jmooring I’ll mark your answer as solution after someone could comment this behaviour. If noone comments it after 3 days, I will mark your answer as solution.

Thank you for your support so far. Appreciate it :smiley:

7

The time zone offset in your date fields is for the west coast of the United States, not Berlin.

8

@jmooring already explained the problem with the time zone offset.

IMHO it’s best to set

timeZone = 'Europe/Berlin'

in your “config.toml” and use date in front matter without time zone offsets, eg: “2023-04-23 19:36:23”

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.