GitHub Pages Jekyll Minima Customize Footer

Minima is a one-size-fits-all Jekyll theme for writers. It’s Jekyll’s default (and first) theme.

As the name implies, Minima offers minimum features by default.

To customize the footer, you have to override its default structure.

At the root of your site, first, create an _includes directory and copy footer.html from the Minima GitHub repository into it.

Then customize footer.html to your own needs.

<footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">Cyberloginit</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Cyberloginit</li><li><a class="u-email" href="mailto:cyberloginit#protonmail.com">cyberloginit#protonmail.com</a></li></ul>
      <a href="https://m.do.co/c/de1b31930850" target="_blank"><img src="/images/DO_Powered_by_Badge_black.svg" ></a>
      </div>

      <div class="footer-col footer-col-2">
        <ul style="list-style-type:none">
          <li>Friends: </li>
          <li><a href="https://blog.alalin.me/" target="_blank">alalin.me</a></li>
        </ul>
      </div>

      <div class="footer-col footer-col-3">
        <p>Cyber Log in IT.</p>
      </div>
    </div>

  </div>

</footer>

In my case, the social networks column is not needed, so I used it for link exchange.

<div class="footer-col footer-col-2">
  <ul style="list-style-type:none">
    <li>Friends: </li>
    <li><a href="https://blog.alalin.me/" target="_blank">alalin.me</a></li>
  </ul>
</div>

<div class="footer-col footer-col-2"><ul class="social-media-list"></ul>
</div>

I also added my DigitalOcean referral link.

<div class="footer-col-wrapper">
  <div class="footer-col footer-col-1">
        ...<li><a class="u-email" href="mailto:cyberloginit#protonmail.com">cyberloginit#protonmail.com</a></li></ul>
+ <a href="https://m.do.co/c/de1b31930850" target="_blank"><img src="/images/DO_Powered_by_Badge_black.svg" ></a>
  </div>

You can download the official DigitalOcean logo here

Last, commit and git push. There you have it.

Customized Footer

Our customized _includes/footer.html here will overide the default footer.html used by Minima.

Besides, You can also customize the CSS style.

GitHub Pages Jekyll Minima Customize Footer

Reference