Use HTML files as article resource

support
1

I have been trying to find how to have HTML files alongside a post to be copied as-is in the public folder.

Here is the file tree layout I’m using.

content/
└── fr/
    └── posts
        ├── blog-article
        │   ├── code-examples
        │   │   └── index.html
        │   ├── picture.jpg
        │   └── index.md
        └── _index.md

I have been unable to have the files in the code-examples be copied over to the public folders.

I’m sure I am missing something, especially since it use to work before. I went through several support articles and peruse the documentation but could not find how to make it work.

Could anyone give me a hand?

2

There was an intentional breaking change in v0.123.0. Page resources with ResourceType “page” are no longer copied to the public directory when building your site.

There are a few ways to handle this depending on what you’re trying to do.

If you just want to blindly copy the file you can place it in the static directory:

static/
├── fr/
│   └── posts/
│       └── blog-article/
│           └── code-examples/
│               └── index.html
└── favicon.ico

But I suspect you’ll want to do something different… hard to say without knowing how you’re using the file.

3

Thanks a lot for your answer. I looked at the release notes but did not spot the change. My mistake.

Yes I could do what you’re describing, but I was wondering if there were other solutions. I would like to avoid moving these files away from the blog posts.
My blog posts are mainly technical and about writing code, so I used HTML pages as a way to show the code in action, just like a codepen would, with the simplicity of a link. So they are very contextual to the blog post, just like an image would.

If I have no other choice but to mirror my blog posts file tree and update my links, I will do that.

4

Instead of linking to the example, would you consider embedding the example using a shortcode?

markdown example

## Example 1

{{< include "code-examples/foo.go" >}}

## Example 2

{{< include "code-examples/bar.py" >}}
5

Maybe I could provide you with a link to explain better what I’m trying to do.

Here is an blog post that uses these HTML files alongside a Markdown file.

There are already code blocks with the code that is on the HTML page. So including the content of the HTML page would not be necessary. The HTML page is just there to act as a run button for the code present on the page. Hopefully I’m making sense :stuck_out_tongue:

6

Understood.

Something like this should work:

markdown

{{< publish-page-resource "code-examples/index.html" >}}
layouts/shortcodes/publish-page-resource.html 
{{ with .Get 0 }}
  {{ with $.Page.Resources.Get . }}
    {{ with .Content | resources.FromString (.Path | relLangURL) }}
      <a href="{{ .RelPermalink }}">{{ .RelPermalink }}</a>
    {{ end }}
  {{ else }}
    {{ errorf "The %q shortcode was unable to find %s. See %s" $.Name ($.Get 0) $.Position }}
  {{ end }}
{{ else }}
  {{ errorf "The %q shortcode requires a positional parameter, the page to the page resource. See %s" .Name .Position }}
{{ end }}

Try it:

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

Thank you very much for your help. The shortcake method worked.

8

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