How to render a Jekyll markdown page on sites index

Question

I'm probably missing something simple but I have no way to test Jekyll locally.

I'm using GitHub pages to render Jekyll, for starters I only want to render markdown content on the main index.html from one markdown page.

The structure is:

Index.html

---
layout: default
---

_layouts
- default.html

//html stuff..
<section>

{{page.content}}

</section>

In root folder I have a page called content.md that I wish to render for {{page.content}} the layout renders but the liquid tags section is blank.

How do I render content.md?

Example: https://github.com/wycks/wordpress-gears-jekyll

Solution 1

There are a few things going on here.

1. In your _layouts/default.html file (and any of the other _layouts directory files for that matter), instead of:

   {{ page.content }}
   

   you need to use:

   {{ content }}
   

2. Jekyll only lets you includes files from a site root level _includes directory. So, you need to move your content.md from the root to that directory (making it if it doesn't already exist).

3. Finally, you need to actually make the call to the include file from your index.html file. This can be done by changing the content of your index.html file to:

   ---
   layout: default
   ---
   
   {% include content.md %}
   

That will setup the behavior you are looking for.

---

I'd point out two other things:

1. You may find that changing the extension of your index file from .html to .md works better. An important note though: you need to use .html if you want pagination. Per the Jekyll Pagination documentation, that feature only works when the file is named index.html.

2. If all you are doing in your index file is calling an include that only resides on that page, you might be just as well off simply putting the content directly in the index file.

Solution 2

include only allows you to include files directly under _includes/. There is is also include_relative which allows you to use paths and include from other places. The include has to be relative to the given file however:

{% include_relative somedir/footer.html %}

---

There is one issue with either include method I can't resolve: If the file you include has front matter Jekyll won't strip it out. So you can't use front matter to store include specific meta data - like say "title". Of course you can use variables - {% assign title = "My Title" %} but it's not equivalent, because if you want the thing your including to be part of a collection or rendered independently you have to have a front matter.

Comments

[Wyck]

Thanks Alan, I did what you mentioned and nothing is rendering. Also for your suggestions of rendering just an index.md I had initially tried that and also did not work. The GitHub link is updated with that and contains your initial suggestion in old_index.html.

[Wyck]

Thanks for the response, I initially had that but it was also not working.

[Janikan]

There is something else going on now. Your index.md file has some invisible characters at the start that are throwing off the parser. When I read 'head' on the file, instead of seeing '---' for the first line, it returns '??---'. I couldn't get rid of it by just deleting the line. I had to recreate the file. So, try blowing it away and rebuilding it from this (pastebin.com/i4zMEAaV). You also need to remove contend.md from the _layouts directory. It has the same weird invisible characters and is crashing jekyll when I try to run it locally. Once I did those two things, jekyll worked.

[Wyck]

Yes this was it, all sorts of weird characters, possibly because I had used Pandoc to convert the original html to markdown, or maybe it was just windows misbehaving, thanks

[kzu]

This answer didn't work for me. I checked that there are no extra characters, and jekyll locally renders the same as github: no markdown is HTML-ized :(

[Janikan]

@kzu - Try opening another question describing exactly what you are trying to do and what you're trying to what you're seeing.