DEV Community

NikitaL2022
NikitaL2022

Posted on

Getting Started with 11ty

#html #webdev

This is my first time using 11ty, so I had some trouble creating a blog at first, so I followed this LINK to start.

Besides step 1 using VSC, I created all these files and folders within the project through Notepad

Step 1

  • You start of by creating a directory in the terminal 
mkdir myblog
cd myblog
Enter fullscreen mode Exit fullscreen mode

(myblog is what I called my project).

Step 2

  • Next is creating a package.json file 
npm init -y
Enter fullscreen mode Exit fullscreen mode

Then you install it

npm install --save-dev @11ty/eleventy
Enter fullscreen mode Exit fullscreen mode

Step 3

  • Creating a folder called _includes and a file within called layout.njk.

First Blog

  • Now you have to create a folder where all your .md files will be held. I created a folder called blog and the first markdown file firstblog.md

  • Now you can compile the project with

npx @11ty/eleventy --serve
Enter fullscreen mode Exit fullscreen mode

Image description

Your terminal should have compiled an index.html into a _site folder.

Final Project

Image description

Plug-in

  • The plug-in is used to make the date more presentable and easier to read.

  • To do this, create a file .eleventy.js. Then you put npm install --save-dev eleventy-plugin-date and do npx @11ty/eleventy --serve.

  • You'll see a http link containing localhost. Do ctrl + click to open your page!

Here is a link to my Github repo and Here for the 11ty lab.

Top comments (0)