2

I'm making a site using this theme: Github repo; theme demo.

The theme is built with the blog feed on the homepage (index.html). What I would like to do instead is:

  1. make a static homepage (i.e. no blog feed on the homepage), and
  2. have the blog feed live on a separate page called "Blog", with the link "/blog" or "/blog.html".

The code for the blog feed lives in _includes/blog.html and is included in the home layout using {% include blog.html %}.

What I've tried

  • changed the layout of index.html to a static layout like page, and created a new page in the root called blog.html with the layout home - this succeeded in creating a static homepage, but the blog page yields a home-like header but no blog feed (essentially a page with no content).
  • created a new page in the root called blog.html with the layout default, and pasted the content of the home layout (including {% include blog.html %}) into that page - this yielded the same result as above.
  • created a new layout called blog, which is a copy of the current home layout. I deleted the line {% include blog.html %} from the home layout. Then I gave index.html the home layout and created a new page in the root called blog.html with the layout blog. This yielded the same result as above.

In short, it seems like the blog feed isn't able to generate in any file other than index.html, and I haven't been able to figure out why. Is it something I'm missing in the theme's configuration? Apologies if this turns out to be a dumb question - I'm rather new to this. Thank you for any help you can give me!

EDIT: Turns out it was an issue with the paginator, which by default paginates from home.

olvoku
  • 21
  • 4
  • 1
    How you solved your paginator issue though ? – iatharva Sep 08 '20 at 08:21
  • 1
    @iatharva, the pagination logic only works in `index.html` files. If you want to generate the blog feed with paginator on a non-home page, like I did, you should make another directory in the root and create a new `index.html` file in that directory. Ex.: I created a `blog` directory in the root and created `index.html` inside that, where I put all my pagination/blog feed code. That generates a blog feed at baseurl/blog – olvoku Sep 09 '20 at 19:55
  • I have already added ```blog.html``` in ```_includes``` folder but still not working. Can you elaborate what do you mean by creating a directory in the root? – iatharva Sep 10 '20 at 09:37
  • can you explain it in detail? or just add answer to this post by telling how you solved it @olvoku – iatharva Sep 11 '20 at 08:59

1 Answers1

1

The index.html uses the home layout:

---
layout: home
---

This lives in _layouts/home.html and contains a header and includes blog.html. It looks like this: 

---
layout: default
---

<div class="home">

    <div id="main" class="call-out"
         style="background-image: url('{{ site.header_feature_image | relative_url }}')">
        <h1> {{ site.header_text | default: "Change <code>header_text</code> in <code>_config.yml</code>"}} </h1>
    </div>

    {% include blog.html %}

</div>

The blog.html file loops over all (blog) posts:

<div class="posts">
    {% for post in paginator.posts %}
...

To solve your issue, you need to define your own home page as an include like this:

  1. Create your-custom-homepage.html with html of your choice.
  2. Include it in home.html as {% include your-custom-homepage.html %} instead of {% include blog.html %}. Just replace the line in _layouts/home.html.

Then it will contain the header and your content.

The Jekyll documentation, e.g. https://jekyllrb.com/docs/step-by-step/04-layouts/ and https://jekyllrb.com/docs/includes/ will hopefully explain the details.

Christian
  • 4,902
  • 4
  • 24
  • 42