Search code examples
htmlgithubjekyllgithub-pagesjekyll-theme

Can a github page made using default templates ALSO render a custom html file AS IS from the same repository?


I have setup a Github page successfully using Jekyll and the default Minimal theme on the gh-pages branch. It acts as a nice documentation for my code in the master branch. However I now want it to also render a custom html page.

What do I mean by that?
The html is a completely finished page that doesn't need a template but still needs to be output.

Usually we write in markdown and Github takes care of everything. But this custom html file can't be prepared that way. It has some interactive elements, scripts etc that can't be put down in markdown and expected to be prepared correctly by Github (OR is it actually possible to hack the template to do that?). I don't really care the endpoint of the page, it can be any thing.

If it can be done, please let me know how.

EDIT:

Using the current solution of -

---

---
<html>
.
.
</html>

I am able to partially render the HTML file i.e the formatting of the template is still applied even though I do not want any formatting from the theme at all.

How do I make Github ignore all formatting from the theme for just this html file ?

EDIT2:

I also tried with the following in assets/css/style.scss file based on customizing your theme's css help -

---
---

@import "{{ site.theme }}";
.title{}
.body{}
.div{}

But nothing happened.

EDIT3

I haven't tried with customizing your html layout yet, but that also seems to be a solution.

I also tried with the following directly in the index.md file -

---
layout: doom
---

Where doom is NOT defined anywhere.
This seems to work !!


Solution

  • The docs on using front matter in Jekyll have a note that specifies the following:

    If you want to use Liquid tags and variables but don’t need anything in your front matter, just leave it empty! The set of triple-dashed lines with nothing in between will still get Jekyll to process your file.

    So at the top of your html file, you can just have the following:

    ---
    ---
    
    <html>
        <head>
        ....
    </html>
    

    Jekyll will process the file since it sees the set of lines. It won't apply anything since there's nothing inside the lines. After that, the output url is likely following the file structure of wherever that file is located.

    EDIT

    If you don't want Jekyll to add a theme, you can have a completely empty layout file and use that layout in the front matter of the custom html page.

    //_layouts/empty.html
    {{content}}
    
    //customPage.html
    ---
    layout: empty
    ---
    
    <html>
        <head>
        ....
    </html>