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.

Answer 1

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.

Answer 2

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.