Creating a Blog with 11ty: A Simple Step-by-Step Guide

Creating a Blog with 11ty: A Simple Step-by-Step Guide

An easy guide for beginners to build modern static blogs using 11ty.

by Minhee Kim
11tyeleventyStatic Site GeneratorBlog SetupFrontend Development

Creating a Blog with 11ty: A Simple Step-by-Step Guide #

An easy guide for beginners to build modern static blogs using 11ty

11ty Logo

If you're looking to create a blog that is fast, lightweight, and easy to customize, 11ty (Eleventy) might be the perfect fit. Unlike heavier frameworks, 11ty focuses on simplicity and efficiency. This guide will help you build your own 11ty blog step-by-step, whether you’re new to static site generators or switching from another platform.

Why Use 11ty? #

Here are a few reasons why developers love 11ty:

  • No configuration needed: Comes with sensible defaults.
  • Templating freedom: Supports HTML, Markdown, Nunjucks, and more.
  • Fast performance: Static files load instantly.
  • Highly customizable: Design and structure are fully in your hands.

Now, let’s dive into the steps to create your blog.

Prerequisites #

Ensure you have the following ready before starting:

  1. Node.js and npm installed.
  2. A text editor (like VS Code).
  3. Command line/terminal access.
  4. Basic knowledge of HTML and Markdown.

Step 1: Install 11ty #

Run this command to install 11ty globally on your machine:

npm install -g @11ty/eleventy

Once installed, verify the installation:

eleventy --version

Step 2: Set Up Your Project #

Create a new folder for your blog and move into it:

mkdir my-eleventy-blog
cd my-eleventy-blog

Next, initialize the project with a package.json file:

npm init -y

Step 3: Install 11ty Locally #

To manage dependencies within your project, install 11ty locally:

npm install @11ty/eleventy --save-dev

Add the following scripts to your package.json:

"scripts": {
  "start": "eleventy --serve",
  "build": "eleventy"
}

Step 4: Create Your First Blog Post #

Create a directory to hold your posts:

mkdir posts

Inside that directory, create your first post using Markdown:

posts/first-post.md:

---
title: "My First Blog Post"
date: 2024-10-12
tags: ["blog", "first-post"]
---

# My First Blog Post  
Welcome to my first post using 11ty! I'm excited to start this blogging journey.

Step 5: Configure 11ty #

Create a .eleventy.js configuration file at the root of your project:

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "posts",
      output: "_site"
    }
  };
};

This tells 11ty to generate files from the posts folder into the _site directory.

Step 6: Run Your Blog Locally #

Use this command to start the 11ty development server:

npm run start

Open your browser and go to http://localhost:8080 to see your post live!

Step 7: Add Some Styling #

Create a CSS file to style your blog:

css/styles.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  margin-top: 20px;
}

Include the CSS file in your layout template:

_includes/layout.njk:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/styles.css">
  <title>Creating a Blog with 11ty: A Simple Step-by-Step Guide</title>
</head>
<body>
  <h1>Creating a Blog with 11ty: A Simple Step-by-Step Guide</h1>
  <article>
    
  </article>
</body>
</html>

Step 8: Build for Production #

When you're ready to deploy your blog, run:

npm run build

This command generates your static site in the _site folder.

Step 9: Deploy Your Blog #

To deploy with GitHub Pages:

  1. Push your code to a GitHub repository.
  2. Enable GitHub Pages in the repository settings.
  3. Set the source branch to gh-pages.

Alternatively, deploy with Netlify:

npm install -g netlify-cli
netlify deploy

Conclusion #

Congratulations! You've successfully built a blog with 11ty. This setup offers incredible flexibility and performance without unnecessary complexity. Explore 11ty's advanced features, such as pagination and custom collections, to enhance your blog even further.

Why I Switched from Jekyll to 11tyDeploying Your 11ty Blog on GitHub Pages: A Complete Guide