Search code examples
jekyllgithub-pagesjekyll-theme

Jekyll does not render theme layout when using index.html in Github Pages


I'm trying to learn how to use Github pages, so I've created my first page and added the Jekyll cayman theme to it.

Before adding the theme I could just use an index.html file to render my main page. However, now that I have added the cayman theme, the index.html file is not read anymore and only the index.md file is read.

Resulting github page:
https://scinana.github.io/hellopages/

Code:
https://github.com/scinana/hellopages

Why am I forced to add an index.md file?

What if I want to keep using html files directly instead of an md file? Can I use html files while using a Jekyll theme?


Solution

  • You can use an html file. Just add a front matter and insert the default layout.

    Here's an example:

    ---
    layout: default
    ---
      
    <!doctype html>
    <html>
      <head>
        <title>This is the title of the webpage!</title>
      </head>
      <body>
        <p>This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this <strong>p</strong> tag and its contents.</p>
      </body>
    </html>
    

    From https://jekyllrb.com/docs/step-by-step/04-layouts/:

    Layouts are templates that can be used by any page in your site and wrap around page content. They are stored in a directory called _layouts.

    From https://jekyllrb.com/docs/structure/:

    index.html or index.md and other HTML, Markdown files
    Provided that the file has a front matter section, it will be transformed by Jekyll. The same will happen for any .html, .markdown, .md, or .textile file in your site’s root directory or directories not listed above.