Search code examples
htmllayoutjekyllliquid

Jekyll: page not found after insert front matter

I’m starting to make github.io portfolio & blog site. It’s my first time in my life… My current process to make web:

  1. Choose & download attractive templates.(done. It has home page, portfolio page which has projects links, and blog page which has general blog posts)
  2. To apply Jekyll style, modify pages and essential folders like _posts, _layouts, _includes, and etc.. (I’ve red many posts, official introduction of Jekyll.)
  3. To test my pages, I installed Ruby and gems. I typed bundle exec jekyll serve and it’s worked with my index.html and original(not convert into Liquid type) blog.html.
  4. I copied code of blog.html and pasted it into _layouts/bloglayout.html and changed blog.html like next code. Then, I have a 404 page not found error whenever I click blog at navigation bar.
<!--/blog.html-->
---
# this is liquid page
layout: blog_layout
---

<!--/_layouts/bloglayout.html-->
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="ko"> <!--<![endif]-->
    {% include head.html %}

<body>

   {% include header.html %}

   <!-- Page Title
   ================================================== -->
   <!-- Page Title End-->

   <!-- Content
   ================================================== -->
    <!-- Content End-->

   {% include footer.html %}
   {% include scripts.html %}

</body>

</html>

I spent half a day looking into this error and can't catch the reason.. Could you give me any clue...?

Here is my github repository : Juyeon-Lee.github.io

Solution

  • 1- Remove .html From links like https://juyeon-lee.github.io/blog/ And problem 404 will be solved 2- You must add {{ content }}

    <!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="ko"> <!--<![endif]-->
    {% include head.html %}
<body>

    {% include header.html %}

    {{ content }}

    {% include footer.html %}
    {% include scripts.html %}
</body>
</html>

    3- add to blog.html

    ---
layout: blog_layout
---