#100DaysOfCode Day 2: Jekyll and Footer Icons

A brief overview of how I build my website with Jekyll

Maxx Holmes

#100DaysOfCode Day 2: Using Jekyll & Fixing Footer Icons

For Day 2, I only had about an hour and a half to do this challenge between my PhD work and a weekly pub quiz with the science boys! (If you’re interested in our lab’s stuff, you can find their own websites at harley-sc.github.io and tmdsheard.github.io).

I decided to make a small improvement to my website with the inclusion of a footer containing icons linking to my various social media platforms. This will also help me when it comes to developing a “contact me” page!

I decided to use the icons from Font Awesome as they have very clean icons, and a lot of fun variety which I enjoyed looking through - the space themed ones are particularly excellent and I’m going to try think of a project where I can use those!

For those who aren’t aware, this website is built using the Jekyll Ruby framework, which makes generating the site locally very straight forward - originally this used a Ruby gem called Jekyll-Pagination to product html pages following the same format for my blog posts, with me only needing to produce the content in markdown, but as I wanted multiple sites to be “paginated” I updated this to Jekyll-Pagination-v2, which unfortunately isn’t GitHub-Pages friendly, however I’m able to simply generate the site and copy that over to the local repository for it!

Using Jekyll, each page is generated using a fairly simple html file, this one below is the one I use for each of my posts! I have edited the code slightly - as while writing this post I found that including the proper notation for the liquid template language that Jekyll uses will import my code into the blog! The include statements should be % include x.html % wrapped in {}, whereas the content line should be wrapped in two {}.

<!doctype html>
<html lang="en">

<html>
	<head>
		{ include head.html }
	</head>

	<body class="single is-preload">

		<div id="wrapper">
			{ include header_bar.html }
			<section ID="Menu">
				{ include menu.html }
			</section>

			{content}

			<section id="footer">
				{ include footer.html }
			</section>

		</div>

	<!-- Scripts -->
		{ include js_footer.html }

	</body>
</html>

Fairly simple right? The head, header_bar, menu, footer and js_footer files are included on every page of this website and so I do not need to rewrite them for every page, instead I can simply import them!

The below code snippet is what I use as the framework for each of these posts

<article class="post">
	<header>
		<div class="title">
			<h2><a href=""></a></h2>
		</div>
		<div class="meta">
			<time class="published" datetime=post.date></time>
			<a href="" class="author"><span class="name">Maxx Holmes</span>	<img src="/images/avatar.jpg" alt="" /></a>
		</div>
	</header>
	<a href="" span class="image featured"> <img src= alt= ="" /></span></a>
		
		<p> </p>
	<footer>
		<ul class="stats">
			
			<li><a href="#" class="icon solid fa-heart">0</a></li>
			<li><a href="#" class="icon solid fa-comment">0</a></li>
		</ul>
	</footer>
</article>

Each aspect of the post other than the structure is taken from a markdown file containing the information and content of each blog post! The keen eye will notice that the liking / commenting section at the bottom is a simple placeholder for now and have no actual function (an interesting problem for when I have more time and more knowledge!)

The icons at the bottom were fairly simple to produce, the code and icons themselves were taken from Font Awesome and then called on each time using variations of the following code snippet:

<li><a href="https://twitter.com/MaxxSci" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>

Closing Thoughts: Jekyll is an interesting framework to use - I have no real experience in Ruby my experience is purely using the documentation on the Jekyll Website, but it’s very handy to producing many pages of the same style, and for structuring new webpages. It feels very clean and straightforward to use. The icons themselves were a fairly easy addition and I feel add to the sites design and professionalism - even if two of them are instagram and spotify.

Peace xo