Create custom home page with Jekyll
Asked Answered
S

2

7

I would like to create a custom "home" page using Jekyll's standard theme "Minima". By default it is set to a list of recent blog posts:

---
layout: default
---

<div class="home">

  <h1 class="page-heading">Posts</h1>

  {{ content }}

  <ul class="post-list">
    {% for post in site.posts %}
      <li>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>

        <h2>
          <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
        </h2>
      </li>
    {% endfor %}
  </ul>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>

</div>

This setup is controlled in a file _layouts/home.html. I have created my custom "home" page using Markdown. It is saved in my local directory and called "aboutme.md":

---
layout: page
title: About Me
permalink: /aboutme/
order: 1
---

This is a custom about me page.

I would like to override the default list of recent posts and replace it with my custom "aboutme" page. How can I achieve this in an elegant way? One way is to rewrite the "aboutme.md" in HTML and save it into "home.hml". However, it is doubling the work. I'm sure there must be a way to "include" an "aboutme.md" page in "home.html" with a simple Liquid command. I would also like to have the "About me" page displayed in the site menu.

Selfrevealing answered 6/10, 2017 at 12:35 Comment(3)
Do you want to show an about me section instead of blog posts list in /? Or a link to the about me page from home?Erupt
Yes, I would like to show the entire "aboutme" page instead of the "recent posts".Selfrevealing
I've updated the answerErupt
P
9

You should rename your 'aboutme.md' file to 'index.md', remove the permalink statement and save it in the root of your website directory (and optionally rename the old index.md to blog.md).

Like this: (index.md)

---
layout: page
title: About Me
order: 1
---

This is now the homepage.
Penhall answered 6/10, 2017 at 12:44 Comment(6)
This is a solution, but it will "break" the default constructs and dependencies of the "minima" theme. I would like to avoid it. There should be a "cleaner" way.Selfrevealing
I do not think so. This is the only Jekyll compliant way to do this. If you want a index (home) page with a 'page' layout this is the way to go. Every other solution will be an (ugly) hack.Penhall
If OP wants to use the "about" page as the homepage this is the way to go, it won't break dependencies as @JoostS says (remember to remove the original permalink to reflect this change).Erupt
I take my words back. I tried both of the solutions, and I like your way better. It is "cleaner". But I will surely use the technique shown by @Erupt somewhere else. Thank you.Selfrevealing
Great. Yes, @Erupt is a true Jekyll expert. It is great to have him around here at Stack Overflow. People like him make me love SO.Penhall
how to avoid duplication then?Hoofbeat
E
6

To customize home page, locate where your minima gem files are located in your system and copy _layouts/home.html to your Jekyll instance maintaining the directory structure .

/_layouts/home.html

There you can edit it as you wish, replacing the blog posts list with a link to an about me page or including an about me section.

  • update

To include the contents of the "about me" page as a section of the home page, you can add the following code in your /index.md:

{% assign about = site.pages | where: 'name','about.md' %}
{{about}}

It looks for the filename called about.md and include its contents where you put that.

Erupt answered 6/10, 2017 at 12:47 Comment(3)
Yes, this is what I had in mind. I have actually implemented it. But I think instead of re-writing or copying the text from "aboutme" into "home" you should be able to "include" entire "aboutme" page. I just don't know how to do it.Selfrevealing
Nice solution. However, the OP wants to use the regular page layout. Why would you use the home layout and refactor it to be similar the page layout? I think that is not such a good idea.Penhall
@JoostS From what I understand, OP only wants to replace a section of the home page: "default list of recent posts", keeping the home layout. Anyway, the question is not clear, if it means to have a regular page layout I agree this is not a good solution and would chose yours.Erupt

© 2022 - 2024 — McMap. All rights reserved.