What is 11ty? It is a static site generator that converts markdown, Nunjuck, or JS files into HTML and CSS. This is great for those new to web development and just want to create a site as fast as possible.
Hello World
To get started, open terminal to a directory you’d like the site to exist. Enter the following commands, touch Readme.md and code .. This should create the a markdown file and open vs code. To get started add a file header such as # Hello There and some basic text below. like what I have here. To generate html it takes 2 commands, npx @11ty/eleventy and npx @11ty/eleventy —serve. This will generate a directory called __site white will contain html and —serve will cause a server to spin up. Open the localhost port displayed and go to /readme/index.html to see your site!
Template Blog
Say you want a more professonal looking site without having to do a lot of extra work, you’re in luck! 11ty has a community that has created templates that are available at this site. For this example, we will use the eleventy-base-blog, make sure to go to this repo and select the USE THIS TEMPLATE button to make a copy of the project in your namespace.
Once you have cloned and pulled the repo to your machine, open the folder in VS Code. You want to look in the posts directory and here you is where you can add/update posts. I decided to clear out the posts and change them with my own dev.to posts. When ready to view the code again there are two commands to run: npx eleventy and npx eleventy —serve.
Feel free to add more files and get more creative styling! Now that you know the basics, what are you waiting for, start coding!
Links:
11ty Hello World Repo: https://github.com/liljimmyk99/11ty-Hello-World
11ty Hello World gh-page: https://liljimmyk99.github.io/11ty-Hello-World/
11ty Basic Blog Repo: https://github.com/liljimmyk99/eleventy-basic-blog
Top comments (0)