Install 11ty on Ubuntu 20.04 - A step by step guide ?

Linux Backup

11ty is a NodeJS-based powerful static site generator.

Here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers to perform related NodeJS queries.

In this context, we shall look into how to install 11ty on your Ubuntu system and generate static websites.

Prerequisites to be met before 11ty Installation

As a Linux user you should have the following two packages available on your system:

NodeJS
NPM

If you do not have NodeJS and NPM installed on the system, you can easily Install them by running the following commands:

$ sudo apt update
$ sudo apt install node
$ sudo apt install npm

Note: Without Node.js and NPM, you won't be able to continue working with 11ty.

Next, we will create a new directory, move into it, and initialize it, respectively:

$ mkdir newEleventySite
$ cd newEleventySite/
$ npm init -y

How to install and create 11ty Project ?

To do this, simply follow the steps given below.

1. Start by running the following command to create a new directory for your 11ty static site:

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

Once done 11ty will be installed in your newly-created directory. It is a per-project installation. Here, we did not choose to install 11ty globally. This makes installation easier and manageable.

2. Now run Eleventy and you will see that some files were written. We don't have any files so nothing will happen at this stage:

$ npx @11ty/eleventy

Now, we can now create the website and publish it. Before that, we need a template.

3. To Create a template, use the below code:

$ echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hi, this is 11ty for Linuxapt.com</p></body></html>' > index.html
$ echo '# Page header' > README.md

Once the template is done, you are good to go to publish your website for the time being. Once you run the above command, you will notice that 11ty has successfully written the two pages.

How to publish the website with 11ty ?

Once the creation of the template is completed, 11ty saves the site to _site folder. You can take all exported files and publish them to your host using an FTP client. You can append the –serve command in the end to publish the website: