CODEWITHSUNDEEP
utf-8character-encodingjekyllgithub-pages
Tyler Gamvrelis
Tyler Gamvrelis

Reputation: 23

Jekyll frontmatter appearing on my website and not inserting properly into my default layout

I've been trying to make my own website for the past 3 days, and all was going fine working just with a HTML file, a CSS file, and a JavaScript file. Then yesterday I decided I'd try migrating what little I had of my site to a Jekyll-friendly structure so that I could have better management of my content. Here's what happened:

  1. After following numerous tutorials and installing Ruby and the DevKit on my machine, I was finally able to get Jekyll to run locally. But I found that my index.html file in my root directory was not being inserted into my default.html template in the _layouts folder. So Jekyll was building my site without using the default.html layout, it appeared, resulting in just the content in my index.html file being compiled into my final index.html file. My understanding was that instead of this, whatever was in the index.html file in the root directory would get inserted into a layout (specified in index.html's frontmatter), and the final index.html that Jekyll placed in the _site directory would be the amalgamation of index.html and default.html.

  2. After long enough, I eventually tried renaming index.html in my root directory to index.md. Then, when I ran Jekyll again, the html code in index.md was inserted into the {{ content }} part in my layout default.html, which was what I had been wanting! Awesome, right? No. The problem then was that the frontmatter in index.md was actually SHOWING on my website: Image of the frontmatter appearing on my local site

You can view all the complete code along with all my configuration details and directory structure here: https://github.com/tygamvrelis/tylergamvrelis.github.io

So it seems then that SOMEHOW Jekyll is inserting the index.md content into the correct place in default.html, it's doing this without reading the frontmatter. In fact, I can delete the frontmatter in index.md entirely and my site looks perfectly fine, as long I leave at least 1 empty line at the start of my code. If I don't leave at least 1 empty line at the start of my code, then I see index.md on my website as raw HTML (tags and everything, no formatting).

I know this might not be sufficient information given the weirdness described, but I'd like to try understand what's going on and I appreciate any suggestions. If there's any other information you need from me to help solve this problem, please let me know.

Upvotes: 2

Views: 523

Answers (1)

marcanuy
marcanuy

Reputation: 23982

Your index.md has BOM headers: 

$ hd -n 3 index.md
00000000  ef bb bf                                          |...|
00000003

As it is encoded with UTF-8, then the byte order mark follows the order: EF BB BF.

and Jekyll does not like them:

UTF-8 Character Encoding Warning

If you use UTF-8 encoding, make sure that no BOM header characters exist in your files or very, very bad things will happen to Jekyll.

So you need to remove them and Jekyll will be happy again:

$ tail -c +4 index.md > UTF8.nobom
$ mv UTF8.nobom index.md

Or look how to remove them with awk or sed

Upvotes: 2

Related Questions