Modifying an existing Jekyll theme to have static homepage

user_13567816 0
Viewed 867

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.

jekyll-theme static-site jekyll github-pages
1 Answers

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.

user_38425980
Related