Embedding hugo site in an iframe

Is it possible to share a hugo built site in an iframe in another site?

I tried to build the site with the hugo command and then I am linking to the top level index.html file in the iframe like:

<iframe name='hugo-site' src='/hugo-site/index.html' width='100%' height='1000px'></iframe>

When I build the project that contains the iframe, the site has broken styling.

Is there a way how to build the hugo site in the way that it’s self-contained, or embeddable to an iframe? Or am I missing something basic?

Thank you very much for any help with this!

Probably. If the site doesn’t load its CSS inside an iframe, it’s probably similarly broken if you run it as a standalone site.

It is, you are correct!

How can I fix or change that? Is it possible within the iframe tag itself?

Hello, iframe is an old technology, currently used at most to display games or an audio or video player (and even that is rare). Can you specify what you need this solution for?

Perhaps a simple link would suffice, or maybe moving that part of the site that runs on Hugo directly into a folder on your old site?

1 Like

No. You have to fix your site. Perhaps only your baseURL is wrong, perhaps something else. Not possible to say without seeing your code.

What would make sense to share? The hugo site hugo.toml or something else?

As you did mention, the iframe looks practically the same as if I open the index.html in a browser.

Ss it possible to build the site with hugo so it’s self-contained?

I should have noted that hugo server works perfectly fine.

Hi!

There would be definitely workarounds to using iframe, as you mentioned. Though I think I have read somewhere that the technology is not that rare as you mentioned.

I have a project that I am making to test and learn things. If I would share it anywhere it would probably look like an utter madness.

Someday though, I would like to make it a showcase/portfolio of my skills and knowledge.

So the only justification I have is that I would like to learn more about hugo and static site generators, though this might be a weird way to go about it :slight_smile:

That’s what probably 99.9% of Hugo users do. So yes, it’s not only possible but the standard user case.

I assumed the same, OK!

Let me ask differently – what influence does the baseUrl have on loading the CSS styling of the site? How should I set the baseUrl to do just local testing/viewing? Or, since the hugo server works OK for me, what assumptions does the server make to get styling too?

Is there a reference in the documentation I should check to understand this better?

The baseURL should be set to the URL you’re serving your content from. If you don’t want to share your code, there’s nothing else to say – is ac waste of time to guess what might be wrong.

OK, I understand.

Thank you for your time. I try to figure out whatever I can, and report back with a link to public GitHub if I won’t be able to figure it out.

Demo: JS Bin - Collaborative JavaScript Debugging

<iframe src="https://www.docsy.dev/"></iframe>

Is it what you expect?

1 Like