Eleventy Watch on YouTube

6 Minutes to Build a Blog from Scratch with Eleventy

3 min read 7 hours ago
Published on Feb 22, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through the process of building a blog from scratch using Eleventy, a simple and powerful static site generator. In just six minutes, you'll learn how to set up your project, create layouts, and manage collections, enabling you to launch a fully functional blog.

Step 1: Set Up Your Environment

To get started, make sure you have the following prerequisites:

  • Node.js installed on your computer.
  • A code editor (like Visual Studio Code).

Once these are in place, follow these steps:

  1. Create a new project directory:

    • Open your terminal or command prompt.
    • Use the command to create a new folder:
      mkdir my-blog
cd my-blog

  2. Initialize a new Node.js project:

    • Run the following command and follow the prompts:
      npm init -y

  3. Install Eleventy:

    • Execute the command to install Eleventy as a development dependency:
      npm install --save-dev @11ty/eleventy

Step 2: Create Your First Blog Post

Now that you have Eleventy installed, you can create your first blog post.

  1. Create a new directory for your posts:

    • Inside your project folder, create a folder named _posts:
      mkdir _posts

  2. Create a Markdown file for a post:

    • Inside the _posts directory, create a file named my-first-post.md with the following content:
      ---
title: My First Blog Post
date: 2023-10-01
---
This is my first blog post using Eleventy!

Step 3: Configure Eleventy

Next, you need to set up your Eleventy configuration.

  1. Create a configuration file:

    • In your project root, create a file named .eleventy.js with the following content:
      module.exports = function(eleventyConfig) {
    return {
        dir: {
            input: "src",
            output: "dist"
        }
    };
};

  2. Create the necessary directories:

    • Create a src directory for your templates and layouts:
      mkdir src

  3. Set up a layout:

    • Inside the src directory, create a folder named _includes and add a file called layout.njk with the following content:
      <!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <main>
        {{ content | safe }}
    </main>
</body>
</html>

Step 4: Build and Serve Your Blog

Now you can build and serve your blog locally.

  1. Add a script to package.json:

    • Open package.json and add the following script under "scripts":
      "scripts": {
    "start": "eleventy --serve"
}

  2. Run the server:

    • Execute the following command in your terminal:
      npm start

  3. View your blog:

    • Open a web browser and navigate to http://localhost:8080 to see your blog in action.

Conclusion

Congratulations! You've successfully built a blog from scratch using Eleventy. You can now explore further features, such as adding collections or integrating plugins like RSS. For more advanced configurations, refer to the documentation links provided in the video description. Happy blogging!

Table of Contents

Recent