In Setup - Part 1 we put our HTML 5 boiler plate in a static index.html file to get started. Then we made a base.njk file in the _includes folder. After that we put the front matter in the index.html file that gets chained to our base.njk file for the content. Then we added the style.css file to the src folder and pass it through in the .eleventy.js file.

Video Instructions

This video will walk you through this post and help explain file structure in 11ty.

I realized after making part 1 that we can pull the styles in from the finished theme I have up on netlify. This series is mainly to focus on building the file structure of an 11ty blog, so we don't have to get bogged down with styling. You can add a link for the styles to the head of the base.njkfile.

_includes > base.njk

<link rel="stylesheet" href="https://11ty-theme-by-design-2-seo.netlify.app/assets/css/style.css">

Now that we have 11ty installed and our core files running we can continue making the layout files.

Make it Dynamic

Now we can start including our titles and descriptions, header, body and footer layouts in the base.njk.

1.Titles and Descriptions

This is where we will be putting all the sites title and meta description tags. This makes it much easier to manage your sites SEO. Easier than using WordPress in my opinion.

Create a title-and-meta.njk file in the _includes folder with the below HTML and Nunjucks.

{%- if tag == 'home-page' -%}
<title>11ty Theme - by Design 2 SEO</title>
<meta name="description" content="This is the home page description.">
{%- endif -%}

I am using the tag: key to access our pages. This is just a name we choose to lets us easy to identify layouts. We are going to be using the tags: key that 11ty dedicates to getting collections. So I desided to use tag: to get pages. Now we can add the tag: key to the index.html front matter of our home page.

---
layout: 'base.njk'
title: Handcrafted 11ty Site
tag: home-page
---

Front matter guide:

  • tags: = collection/posts
  • tag: = pages

Now in the base.njk file we can replace the title HTML with: 

{% include 'title-and-meta.njk' %}

We should see our site title and description updated.

Open the terminal by right clicking on our project folder and choosing "New Terminal from Folder" and type:
npm start in the command line.

starter 11ty site

Go to http://localhost:8080 and we should see the title dynamically placed in the site.

We will repeat this process for the header and footer.

2.Header

Create a header.njk file in the _includes folder with the below HTML and Nunjucks.

<header class="container--full page-header">
	<div class="page-header--content">
		<div class="logo">
			<a href="/">Your Blog Name</a>
		</div>
		<nav class="primary-nav">
			<ul role="list" class="nav-list flex-group">
				<li role="listitem"><a href="/blog/">BLOG</a></li>
				<li role="listitem"><a href="/about/">ABOUT</a></li>
			</ul>
		</nav>
	</div>
</header>

When we start adding pages we will be use front matter to identify if the the page is current, to get our acitve class for the navigation.

Now in the base.njk file we can replace the HTML header with: 

{% include 'header.njk' %}

2.Footer

Create a footer.njk file in the _includes folder with the below HTML and Nunjucks.

<footer class="site-footer">
	<section class="container col-three">
		<div class="footer--social">
			<a class="socials" href="#" target="_blank" aria-label="LinkedIn" rel="noopener"><span class="icon-social">LinkedIn</span></a>
			<a class="socials" href="#" target="_blank" aria-label="Youtube" rel="noopener"><span class="icon-social" rel="noopener">YouTube</span></a>
			<a class="socials" href="#" target="_blank" aria-label="Twitter" rel="noopener"><span class="icon-social">Twitter</span></a>
		</div>
		<div class="footer--menu">
			<div class="sitemap">Sitemap:</div>
			<ul class="menu-item">
				<li><a href="/">Home</a></li>
				<li><a href="/blog/">Blog</a></li>
				<li><a href="/about/">About</a></li>
			</ul>
		</div>
		<div class="copyright">
			<p class="no-top">Your Blog Name © All Rights Reserved 2022</p>
		</div>
	</section>
</footer>

Now in the base.njk file we can replace the HTML footer with: 

{% include 'footer.njk' %}

Although our site still looks like it did when we started with the static HTML, it is now ready to start scaling.

Base File

Your base.njk file in the _includes should now look like this.

<!DOCTYPE html>
<html>
<head>
	{% include 'title-and-meta.njk' %}
	<link rel="stylesheet" href="style.css">
</head>
<body>
	{% include 'header.njk' %}
	<main>
		{{ content | safe }}
	</main>
	{% include 'footer.njk' %}
</body>
</html>

The base file will be the base for all the sites pages. Now we can chain this file to our pages, categories and posts files through front matter.

Whats Next?

Now that we have the core sections of the base file done In Base - Part 3 we will be adding an about page and blog category with posts. Here we will be working with front matter, JSON data and collections to create categories and loops through the posts.

Follow along on GitHub - Part 2.

Resources