Customize the Jekyll Footer
The default Jekyll installation has a disappointing footer section.
My site’s name was duplicated in the footer and my email address was exposed to the entire world.
Tweaking the text of my email (replacing @
with [at]
) was not very elegant.
The mailto:
hyperlink still opened up a mail client with an invalid email address.
Replacing the @
in my email address was even worse; it created a line break for the image no matter how I tweaked the formatting.
The most elegant solution seemed to be the built-in Jekyll support for social media services. This also did not function as documented, perhaps because Jekyll’s default minima theme is not the same version as used in the documentation of the social media configuration.
In my case, I only wanted a single social media provider, LinkedIn. The best and easiest solution was to override the default footer file by copying it and customizing it.
-
Create an
_includes
directory in the Jekyll site’s top-level directory.$ cd /opt/git/my-static-site $ mkdir _includes
-
Clone the Jekyll minima theme from GitHub.
$ cd /opt/git $ git clone https://github.com/jekyll/minima.git
-
Copy the original minima theme
footer.html
to the newly created_includes
directory.$ cd /opt/git/my-static-site $ cp /opt/git/minima/_includes/footer.html _includes/.
-
Edit the file.
$ atom _includes/footer.html
-
Replace the the entire
<ul>
block with this:<ul class="contact-list"> <li class="p-name"> {%- if site.email -%} <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li> {%- endif -%} {%- if site.linkedin_username -%} <li><a href="https://www.linkedin.com/in/{{ site.linkedin_username }}"> <svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#linkedin"></use></svg> <span class="username">{{site.author}}</span></a></li> {%- else -%} {{ site.author | escape }} {%- endif -%} </ul>
-
In the
_config.yml
configuration file, comment out theemail
variable and add a LinkedInusername
definition.#email: [email protected] linkedin_username: johndoe-7891234
-
Rebuild the site and start the Jekyll web server.
$ bundle exec jekyll build $ bundle exec jekyll serve