Add Some Style

Make your includes directory

First, create a directory for your layout templates.

my-blog $ mkdir _includes

my-blog $ mkdir _includes/layouts

Create a base layout template

Next, in your text editor, create a new file in your “_includes/layouts/” directory called “base.liquid”. This file will contain the HTML boilerplate that we’ll need on every page of our website. You don’t need to understand every line of this file — over time you will likely learn what all of these elements are doing — so for now it’s ok to copy this into your text editor and save it. We will, however, look at three things in the base layout.

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="generator" content="{{ eleventy.generator }}">

	<title>My Blog</title>
</head>

<body>
	{{ content }}
</body>

</html>

_includes/layouts/base.liquid

The `lang` attribute

The lang="en" is an important attribute to keep on your <html> attribute; the lang attribute helps assistive technology determine the language used on the site. The language is specified as a BCP 47 language tag. In the above example, we specify en, indicating that the page is written in English. If your website will be in a language other than English, you should change the value of your lang attribute to reflect that. Wikipedia has a list of common language tags you may find helpful.

The title

Currently, if you look at the tab in your web browser where you have loaded your site, you will notice that the tab reads “localhost:8080” or something similar. This is because the page does not currently have a title set, so the browser is using the URL to label the tab. Line 9 of our boilerplate provides a title for the page: <title>My Blog</title>. You are free to change the contents of the <title> tag to whatever you’d like to call your site. We will be coming back to this line in the base layout later on to provide titles dynamically for each page.

The `content` variable

The final notable line in the file is line 13: {{ content }}, which you find inside the <body> element. content is a variable that Eleventy supplies to your layout templates. It will parse your markdown files and them provide the generated HTML to the layout template in the content variable. The enclosing curly braces — {{ }} — are syntax for LiquidJS, the template engine we are using for our layout templates. The double curly braces tell Liquid to insert the contents of the variable inside the braces at that point in the file. So in this layout template, we are placing the contents of our markdown files inside the <body> tag.

Assign this layout to your home page

---
layout: layouts/base.liquid
---

# My Blog

Welcome to my blog!

Style your site with CSS

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="generator" content="{{ eleventy.generator }}">

	<title>My Blog</title>

	<style>
		html {
			font-family: sans-serif;
			line-height: 1.5;
		}

		body {
			margin-inline: auto;
			max-width: 35rem;
			padding-inline: 1rem;
		}
	</style>
</head>

Previous: Create a Home Page
Next: Make Your First Blog Post