Create custom home page with Jekyll

Question

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.

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? — marcanuy, Oct 06 '17 at 12:44
Yes, I would like to show the entire "aboutme" page instead of the "recent posts". — mabalenk, Oct 06 '17 at 13:13

Mr. Hugo · Accepted Answer · 2017-10-06T17:00:59.490

8

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.

edited Oct 06 '17 at 17:00

answered Oct 06 '17 at 12:44

Mr. Hugo

11,887
3
42
60

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. – mabalenk Oct 06 '17 at 13:15
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. – Mr. Hugo Oct 06 '17 at 13:25
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). – marcanuy Oct 06 '17 at 14:25
1

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 @marcanuy somewhere else. Thank you. – mabalenk Oct 06 '17 at 21:09
Great. Yes, @marcanuy is a true Jekyll expert. It is great to have him around here at Stack Overflow. People like him make me love SO. – Mr. Hugo Oct 07 '17 at 18:23
how to avoid duplication then? – Daniil Iaitskov Aug 26 '21 at 14:59

marcanuy · Answer 2 · 2017-10-06T14:15:31.260

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.

edited Oct 06 '17 at 14:15

answered Oct 06 '17 at 12:47

marcanuy

23,118
9
64
113

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. – mabalenk Oct 06 '17 at 13:17
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. – Mr. Hugo Oct 06 '17 at 13:21
1

@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. – marcanuy Oct 06 '17 at 14:20

Create custom home page with Jekyll

2 Answers2