GitHub Pages Jekyll Minima Customize Footer
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>
VS
<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.
Our customized _includes/footer.html
here will overide the default footer.html
used by Minima.
Besides, You can also customize the CSS style.