Written by: Geoffrey Callaghan

Eleventy Tutorial

Eleventy Tutorial

Here’s a step-by-step tutorial for getting started with Eleventy (or 11ty), a static site generator that’s gaining popularity for its simplicity and flexibility:

Step 1: Install Node.js and npm

Eleventy requires Node.js and npm (Node Package Manager) to be installed on your system. You can download and install them from the official Node.js website: nodejs.org.

Step 2: Set Up a New Project

Create a new directory for your Eleventy project and navigate into it in your terminal.

mkdir my-eleventy-site
cd my-eleventy-site

Step 3: Initialize a New npm Project

Run npm init to create a new package.json file, which will manage your project’s dependencies.

npm init -y

Step 4: Install Eleventy

Install Eleventy as a development dependency in your project.

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

Step 5: Create Your Project Structure

Create the necessary directories and files for your Eleventy project. You can customize this structure based on your project’s needs, but here’s a basic setup:

  • Create a src directory to store your source files.
  • Inside src, create an index.html file as the entry point for your site.
  • Optionally, create additional directories like layouts, partials, styles, scripts, etc., based on your project’s requirements.

Step 6: Configure Eleventy

Create a configuration file named .eleventy.js in the root of your project to configure Eleventy according to your needs. Here’s a simple example to get started:

module.exports = function(eleventyConfig) {
  // Copy static files (e.g., images, CSS) directly to the output directory
  eleventyConfig.addPassthroughCopy("src/styles");
  eleventyConfig.addPassthroughCopy("src/images");

  return {
    dir: {
      input: "src",
      output: "dist"
    }
  };
};

This configuration tells Eleventy to use the src directory as the input directory and the dist directory as the output directory. It also instructs Eleventy to copy the contents of the styles and images directories directly to the output directory.

Step 7: Create Content

Start creating content for your site using Markdown, HTML, or any templating language supported by Eleventy. You can organize your content in the src directory using subdirectories as needed.

Step 8: Run Eleventy

You can now build your Eleventy site by running the following command:

npx eleventy

This will generate your static site in the dist directory according to the configuration and content you’ve provided.

Step 9: Preview Your Site

To preview your site locally, you can use a development server. Eleventy doesn’t come with a built-in development server, but you can use tools like http-server, live-server, or Browsersync. For example, to use http-server:

npm install --save-dev http-server

Then, run:

npx http-server dist

This will start a local server, and you can view your Eleventy site by visiting http://localhost:8080 in your web browser.

Step 10: Customize and Extend

Continue customizing and extending your Eleventy site by adding more content, layouts, templates, styles, and scripts as needed. Explore Eleventy’s documentation and community resources for advanced features and best practices.

That’s it! You’ve now created a static site using Eleventy. Happy coding!