htmlmarkdownjekyllliquidminima

Create custom home page with Jekyll


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.


Solution

  • 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.