{"id":10090,"date":"2021-09-20T13:45:06","date_gmt":"2021-09-20T13:45:06","guid":{"rendered":"https:\/\/linuxways.net\/?p=10090"},"modified":"2021-09-20T13:45:06","modified_gmt":"2021-09-20T13:45:06","slug":"how-to-install-11ty-on-ubuntu-20-04","status":"publish","type":"post","link":"https:\/\/linuxways.net\/de\/ubuntu\/how-to-install-11ty-on-ubuntu-20-04\/","title":{"rendered":"How to Install 11ty on Ubuntu 20.04"},"content":{"rendered":"

Introduction<\/h2>\n

11ty is a NodeJS-based powerful static site generator. In this tutorial, I will walk you through step by step and show you how to install 11ty on your Ubuntu system and generate static websites. I am using Ubuntu 20.04 Edition. All instructions and commands only apply to Ubuntu.<\/p>\n

Prerequisites<\/h2>\n

As a Linux user you should have the following two packages available on your system.<\/p>\n

~ NodeJS<\/p>\n

~ NPM<\/p>\n

If you do not have them at this time. Install them with the following commands:<\/p>\n

$ sudo apt update<\/strong><\/pre>\n
$ sudo apt install node<\/strong><\/pre>\n
$ sudo apt install npm<\/strong><\/pre>\n
Without Node.js and NPM, you won\u2019t be able to continue working with 11ty.<\/p>\n
The best thing about 11ty is that you do not need to install it like other node packages. For now, let\u2019s create a new directory, move into it, and initialize it, respectively.<\/p>\n
$ mkdir newEleventySite<\/strong><\/pre>\n
$ cd newEleventySite\/<\/strong><\/pre>\n
$ npm init -y<\/strong><\/pre>\n
<\/strong><\/p>\n
Installing and Creating 11ty Project<\/h2>\n
 Step 1.<\/strong> Now simply run the following command to create a new directory for your 11ty static site.<\/p>\n
$ npm install --save-dev @11ty\/eleventy<\/strong><\/pre>\n
Once done 11ty will be installed in your newly-created directory. It is a per-project installation. I did not choose to install 11ty globally. This makes installation easier and manageable.<\/p>\n
Step 2.<\/strong> Now run Eleventy and you will see that some files were written. I don\u2019t have any files so nothing will happen at this stage.<\/p>\n
$ npx @11ty\/eleventy<\/strong><\/pre>\n
<\/strong><\/p>\n
As you can see in the above screen, I ran 11ty successfully. Everything at this stage is working absolutely fine. We have been working so long, and it is time now to create the website and publish it. Before that, we need a template.<\/p>\n
Create a template<\/h2>\n
Step 3.<\/strong> Now I will help you to create a template. It is simple and there isn\u2019t anything complex to perform. It is merely a starting point.<\/p>\n
<\/p>\n
Here is the code:<\/p>\n
$ echo '<!doctype html><html><head><title>Page title<\/title><\/head><body><p>Hi<\/p><\/body><\/html>' > index.ht<\/strong>ml<\/pre>\n
$ echo '# Page header' > README.md<\/strong><\/pre>\n
<\/p>\n
Once the template is done, you are good to go to publish your website for the time being. In the above screenshot, you notice that 11ty has successfully written the two pages.<\/p>\n
Publishing the website<\/h2>\n
Once templating is done, 11ty saves the site to _site<\/em><\/strong> folder. You can take all exported files and publish them to your host using an FTP client. As shown in the screenshot below, I appended the –serve command in the end to publish the website.<\/p>\n
<\/p>\n
Here is how it looks in the browser.<\/p>\n
<\/p>\n
Conclusion<\/h2>\n
In this tutorial, I guided you on how to install Eleventy, which is a nice static site generator powered by NodeJS. This guide is for Ubuntu 20.04 users. I constantly write articles for different distributions. I invite you to read and share them with your friends and family.<\/p>","protected":false},"excerpt":{"rendered":"
Introduction 11ty is a NodeJS-based powerful static site generator. In this tutorial, I will walk you through step by step and show you how to install 11ty on…<\/p>","protected":false},"author":1,"featured_media":10307,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[542,100],"class_list":["post-10090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ubuntu","tag-11ty","tag-ubuntu-20-04"],"_links":{"self":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/10090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/comments?post=10090"}],"version-history":[{"count":0,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/10090\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media\/10307"}],"wp:attachment":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media?parent=10090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/categories?post=10090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/tags?post=10090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}