Creating a custom footer in Jekyll allows you to enhance your website's appearance and functionality by adding dynamic content that updates automatically. This guide will walk you through the steps to create a footer that displays current information such as the year, site name, and other customizable details.

Understanding Jekyll Layouts and Includes

Jekyll uses layouts and includes to organize your site's structure. The footer is typically added in the layout file, often named default.html. To make it dynamic, you can create an include file that contains your footer code and then embed it into your layout.

Creating the Footer Include

Start by creating a new include file in the _includes directory. Name it footer.html. Inside this file, you can add HTML and Liquid tags to make your footer dynamic.

Here is an example of a simple dynamic footer:

<footer>

<p>© <script>document.write(new Date().getFullYear());</script> {{ site.title }}. All rights reserved.</p>

</footer>

Embedding the Footer in Your Layout

Next, include the footer in your main layout file, usually _layouts/default.html. Insert the following Liquid include tag where you want the footer to appear:

{% include footer.html %}

Customizing Your Footer

You can add more dynamic content such as site description, social media links, or latest posts. Use Liquid tags and JavaScript to fetch and display this information.

For example, to add the site description dynamically:

<p>{{ site.description }}</p>

Final Tips

  • Test your footer locally before deploying.
  • Use CSS to style your footer for better appearance.
  • Update the include file to add new dynamic elements as needed.

By following these steps, you can create a professional, dynamic footer that keeps your website updated automatically and improves user experience.