What is 11ty?
11ty is a static site generator that was created as a JavaScript Alternative to Jekkyl. It works with several different languages such as markdown, html, javascript, and nunjucks. Furthermore, it uses independent template engines so it can easily be coupled or uncoupled from your project without any hassle.
Hello World Blog
The First method that used is provided directly from the 11ty.dev website, first, start by running the following line,
echo '# Page header' > README.md
npx @11ty/eleventy
Follow this by running,
npx @11ty/eleventy --serve
A prompt will pop up providing you with a local host link. Copy this link then add /README to the end of it and you will be brought to a blank website with only a header. From here you can go into VS code and either edit the *README * file or add a new file to link to when you run the program again. Add your blogposts from DEV into the file and they should pop up when you use npx @11ty/eleventy --serve
Using an 11ty Template to host blogs
we can also utilize 11ty through existing templates. In this scenario, I will be using the one provided to us for the lab at . To use this, simply clone the repository, install npm, and open up the code with code . From here you can go into the posts tab and add your own blogposts "In markdown format" to the template.
Follow this by running npm run start
Copy and paste the local host into your URL on your web browser and you will be presented with the page giving you the option to click on the blogs you've added.
Click on either of the blogs and it will bring you to them.
HAX11ty
The final method used is through a combination of 11ty and out Edtechjoker's very own HAXcms. Like the previous example, clone the provided repo and open it up through the terminal.
NOTE - This needs yarn so if you don't have it figure it out and get it installed.
Add a Markdown file and title it something, add your blogpost into said Markdown file.
Apply all the changes and use yarn install before yarn run to boot up the website. you will now be able to see any of the pages you have added or edited.
Final Thoughts
Clearly, using a template is much easier than trying to build an 11ty website from scratch. building on this, the implementation of HAXcms works to increase overall accessibility of the website and provide it with some much needed formatting. Provided in the links below will be my repos, and other resources needed to complete this lab.
https://github.com/kfo5087/11ty-hello
https://github.com/kfo5087/11ty-template
https://github.com/kfo5087/haxerman11ty
https://www.11ty.dev/docs/plugins/syntaxhighlight/
Top comments (0)