Is it possible to add a single custom HTML page to an existing Hugo theme like Academic?

Question

What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.

So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.

What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.

What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.

What are you testing on?
hugo-coder and(or) hugo-academic

Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.

Do let me know if its possible and worthwhile to pursue this and any references that might help.

Answer 1

So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.

I got something working by doing the following -

• I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
• I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
• Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -

[[menu.main]]
 name = "CustomHTML"
 url = "CustomHTML/index.html"
 weight = 50

• hugo serve And it worked.

Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.

EDIT
Looks like the Hugo folks also suggest doing the same way.