How to display a file from another folder in place of a page?

How can I display a file from my ‘static/files’ folder in place of a standard Hugo blog post?

I’m using a YAML Hugo theme and R Markdown to create blog posts. For one of my posts, I want to display the contents of a finished .html document in place of the Hugo-themed content. I’ve placed the desired document inside ‘static/files’ but I can’t get it to display. At first I thought this was a perfect job for the url metadata variable, but the following YAML front matter doesn’t work.

title: 'Example blog post'
author: Logit
date: '2018-02-21'
URL: ["/files/page_to_display_instead.html"]

Instead, my address bar says Hugo is looking for ‘/posts/2018-02-21-example-blog-post’

I note that including the following inside the body of my post does exactly what i want and verifies that my relative path, file name, and desired page is correct…

Click [here](/files/page_to_display_instead.html) to see the page.

But it requires the user make an extra click to get to the content and isn’t very elegant.

Have I misunderstood the URL variable? Should I be using another variable? Any suggestions?

Thank you, Mikhail. I confess I’m a noob at Hugo and the template functions sound daunting to me (though I just watched the video). I’m crossing fingers that someone’s aware of a front matter solution (e.g., url: or slug:) that points to the page I want to load. Or maybe this is a situation where I need an .htaccess file? No doubt I’m not the only one who’s ever wanted to redirect or forward a user to another page when the user clicks on a title link for a particular blog post.

You can simply copy HTML into a markdown document, under the frontmatter. Is there a reason you can’t do that?

Great suggestion, Rick. I tried this–and it works (sort of). The problem is that it just looks less attractive. The page I want to display has a particular format that looks great on its own. But once I paste the HTML into my Hugo blog post, the Hugo theme takes over. The original graphics, margin notes, coloring, and other items all change. Whereas if I can link to the page inside static/files it all renders just as I intend.

You can set a page or section of pages to have a different visual look to the rest of the site.


You would set the layout you need in the frontmatter of the page with the pasted HTML. If it’s a normal page, it’s probably getting single.html applied. You can specify a layout by copying single to say, demolayout.html keeping w/ the example in the docs, then call that from frontmatter.


Thanks Rick. I wound up working more with your first solution–just pasting the HTML from my desired page into the markdown file for the main blog post (‘Example blog post’). I then “build” my site and see that the the post actually renders perfectly when i open the html file found within content/posts. It’s the html version of the post that Hugo copies and puts into public/posts that looks horrible. It appears that when Hugo moves the html file to public/posts, my Hugo theme takes over, changes the margins, and changes some of the colors that were specified in the original markdown version of the post.

Do you know of a way to make Hugo ignore the theme just for one particular blog post? Is there a YAML front-matter option for this? Or perhaps there’s a way to make Hugo ignore and never update the html version inside public/posts (after I first manually copy the better-looking html file version there).

You can set the layout for a single post, and have that override whatever stylings are in your default single.html.

Thanks tons, RickCogley. To others wanting a solution to this, I posed the same question over on stackoverflow where I got yet more helpful answers. In my case, I wound up embedding the desired page link within an <iframe> statement right wihtin my post body. See the Hugo documentation on shortcodes for more on using iframe. Or see my exact example solution and another even simpler approach over on the stackoverflow thread. Thanks to Rick and Mikhail here!