How to install Eleventy? - A step by step guide for beginners

Welcome to the static site generator world! If you’re looking for a simple, easy-to-use, and fast way to build your website, Eleventy is a great option for you. In this blog post, we’re going to show you how to install Eleventy and set up your first static site generator project.

Before starting the installation, make sure you have node.js and npm installed on your computer. You can get them from the official node.js website.

Take note, that Eleventy v2.0.1 requires Node.js version 14 or higher.

Create a new directory in your terminal for Eleventy projects. Go to the project directory using the cd command.

To start your project and make a package.json, run the following command:

Eleventy is now ready to be installed. To install Eleventy as a development dependency, run the following command:

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

Eleventy can also be installed on a global level, but 11ty recommends using the above-mentioned package.json method.

The npx command (Node.js also supports npx) can be used to execute the local project's Eleventy version. Let's check if our installation was successful and try to execute Eleventy:

npx @11ty/eleventy

Here is the output of your command line after executing Eleventy:

If you see the output (v2.2.1), you know that you are using the latest version. However, you will notice that Eleventy did not process any files. This is normal. 11ty has a blank folder with no templates in it.

A template is a piece of content that is written to a file, such as a Markdown file, HTML file, Liquid file, Nunjucks file, and so on. When building our site, Eleventy converts these templates into pages (or pages). Let’s run these two commands to generate two new template files:

Once you have the HTML template and the Markdown template ready, run the following command to get Eleventy started again:

11ty has added our 2 content templates in our current directory to the output folder (_site is the base folder).

Start a hot-reloading local web server with --serve.

To view your Eleventy site in action, navigate to http://localhost:8080/ in your preferred web browser.

When you save your template files, Eleventy will instantly refresh the browser with your new modifications!React.js vs Next.js - A step by step comparison