11ty is a static site generator that can build sites using HTML and CSS. 11ty takes complex markdown files and JSON files and condenses them resulting in an API for us to leverage content and build templates with.
Learn 11ty from Scratch Article
Starting with 11ty
First ensure you have the latest versions of NPM and NODE installed on your PC. Simply type npm -v or node -v in your terminal to see the version of npm and node you currently have.
Create a folder, preferably named 11ty, and open it using the Visual Studio code editor. While in Visual Studio code editor under the 11ty folder, create a .gitignore file. What this does is ignores any file that ends with the extension after the asterisk (*)
Add a .eleventy.js file under the 11ty folder you created. This file will empower your 11ty site to produce the final output.
Add dependencies to your 11ty site. Now we will install a package.json file. This allows npm to handle the project's dependencies properly. In your 11ty folder run 'npm init -y' in your terminal. This will allow npm to generate the package.json file for you.
With all of those steps complete, now it's time to install eleventy. Run the command 'npm install @11ty/eleventy' in your terminal.
Create a folder and label it 'src'. Under this folder create a file named index.md. For this blog post, I will simply be typing Hello World! in the index.md file. Save all your scripts in VS code editor and type 'npx eleventy --serve' in your terminal and click on the Local URL. You should see a page that looks like this:
Pre-established Eleventy Blog Template
Go to eleventy base blog to clone the repository to your local file/folder.
The cool thing about leveraging this repo is that it comes pre-built with links, tags, and posts. All that is required of you is to edit the information in the files. Here is an example of how I edited the firstpost.md file:
Pretty awesome? Yes, very.
Now to take a look at how everything came out, in your terminal execute the npm install command. After all dependencies are loaded in, type npx eleventy --serve in your terminal. This is how my blog post webpage turned out:
11ty Blog Post Part 3
For this eleventy site, we will be following the steps provided in the first section, getting started with 11ty, however we will be adding a little more to it. The work is credited to Learn Eleventy From Scratch Article. To run the site easier, change the scripts section of the package.json from "test": "echo \"Error: no test specified\" && exit 1" to "start": "npx eleventy --serve". What this does is allows you to type npm start to serve the site. Follow the steps in the article to complete building your sample eleventy site.
First User Experience
From here, we have a thorough understanding of the concept behind 11ty/eleventy. The Part 3, with leveraging a sample of someone else's eleventy site was the most time consuming but in depth learning experience from all three static sites created. The easiest and most fundamental was the actual blog post 11ty site. This includes a great template to organize things and get started with eleventy.
Links and Repositories
eleventy sample repo
Site 2
Hello World Beginners Setup
Top comments (0)