Embed Pure HTML Inside a Jekyll Blog
21 Dec 2020 | blog jekyll htmlThere are many instances where we would like to include an entire HTML page inside a Jekyll blog. This is usually done using the Jekyll’s include
directive.
However for it to work, the included page has to be inside the _includes
directory. There is also a include_relative
directive, whose documentation is confusing at best. Also these include*
mechanisms
fail if a sufficiently complex HTML page (such as Tiddlywiki ) were to be included.
The following solution which just uses a simple iFrame seems work work rather well:
- Create a directory in the root of the blog with some name, say
files
- Drop the file to be included in that directory, say
example.html
. - Add a code snippet similar to the below in a post.
<div id="included">
<iframe height="500" width="800" scrolling="yes"
src="/files/example.html"
frameborder="no" allowtransparency="true" allowfullscreen="true">
</iframe>
</div>
The output should look like the below.