How to build website with 11ty eleventy

Start with 11ty starter project to learn how work with 11ty eleventy

Setting Up Your Project

Create the Project Directory

Start by creating a new directory for your project and navigate into it.

mkdir my-11ty-website
cd my-11ty-website

Initialize the Node Project

Initialize a new Node.js project using npm init.

npm init -y

Install Eleventy

Install Eleventy as a development dependency.

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

Configuring Eleventy

Create the Configuration File

Create a .eleventy.js file in the root of your project to configure Eleventy. Here, you can specify the input and output directories.

module.exports = eleventyConfig => {
  return {
    dir: {
      input: 'src',
      output: 'public'
    }
  };
};

Update Package Scripts

Update your package.json to include scripts for building and serving your site.

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

Creating Layouts and Pages

Create Layouts

Eleventy supports multiple templating engines such as Nunjucks, Liquid, and Handlebars. Create a layouts directory and add your base layout file, for example, base.njk.

<!-- src/layouts/base.njk -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to build website with 11ty eleventy</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>How to build website with 11ty eleventy</h1>
    
</body>
</html>

Create Pages

Create your content files in the specified input directory (e.g., src). For example, create an index.md file.

--- 
title: Hello World
layout: base.njk
---

<p>Welcome to my website!</p>

Adding CSS and Assets

Add CSS

Create a css directory in your input folder and add a style.css file. Ensure Eleventy includes this CSS file by adding it as a passthrough copy in your .eleventy.js file.

module.exports = eleventyConfig => {
  return {
    dir: {
      input: 'src',
      output: 'public'
    },
    passthroughFileCopy: ['src/css/style.css']
  };
};

Update your base layout to link to the stylesheet.

<link rel="stylesheet" href="/css/style.css">

Running and Serving Your Site

Build the Site

Run the build script to generate the static HTML files.

npm run build

Serve the Site

Run the start script to serve your site with hot reloading.

npm run start

This will start a local server, and you can view your site in your web browser.

Advanced Features: Collections and Blog Posts

Create Collections

To create collections, such as a blog, add tags to your front matter. For example, create a posts directory and add Markdown files with front matter.

--- 
title: My First Post
layout: base.njk
tags: posts
---

<p>This is my first blog post.</p>

In your .eleventy.js file, you can access these collections.

module.exports = eleventyConfig => {
  return {
    // Other configurations...
    collections: {
      posts: 'posts/*.md'
    }
  };
};

You can then loop over these collections in your templates to display the posts.

<!-- src/index.njk -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>Blog Posts</h1>
    <ul><li>
            <a href="/blog/how-to-built-web-with-angular/">How to build website with Angular</a>
        </li><li>
            <a href="/blog/how-to-built-web-with-astrojs/">How to build website with Astro Js</a>
        </li><li>
            <a href="/blog/how-to-built-web-with-gatsby/">How to build website with Gatsby Js</a>
        </li><li>
            <a href="/blog/how-to-built-web-with-nextjs/">How to Create a Website with Next.js</a>
        </li><li>
            <a href="/blog/how-to-built-web-with-svelte/">How to build website with Svelte</a>
        </li><li>
            <a href="/blog/pico-cms-how-to/">Building a Website with Pico CMS: A Step-by-Step Guide</a>
        </li><li>
            <a href="/blog/bludit-flatfile-cms/">Building a Website with Bludit: A Comprehensive Guide</a>
        </li><li>
            <a href="/blog/how-to-built-web-with-jekyll/">How to build website with jekyll</a>
        </li><li>
            <a href="/blog/how-to-createwebsite-with-11ty/">How to build website with 11ty eleventy</a>
        </li></ul>
</body>
</html>

Conclusion

This guide covers the basics of setting up an Eleventy site, including configuration, creating layouts and pages, adding CSS and assets, and using collections for blog posts. For more advanced features and customization, you can refer to the additional resources provided in the tutorials and guides mentioned.

Download ELeventy 11ty Source Code →

← Previous
How to build website with jekyll