---
( .github/workflows/deploy.yml ):
# 5️⃣ Create the default folder structure mkdir -p src/_includes src/posts Your folder tree now looks like: eleventa full crack
## Why Eleventy?
# Or start a development server with live‑reload npm run serve Open in your browser. You should see the home page (by default a simple directory listing) and your post at /posts/2024-04-14-welcome-to-eleventy/ . Why the trailing slash? Eleventy creates a folder for each page ( /posts/2024-04-14-welcome-to-eleventy/index.html ). This is SEO‑friendly and works with static hosts that serve index.html as the default file. 7️⃣ Build an Index Page (Listing All Posts) Create a homepage that pulls all posts from the posts/ collection. --- (
touch src/index.njk # src/index.njk # --- layout: base.njk title: "Home" pagination: data: collections.post # we’ll create this collection soon size: 5 # number of posts per page alias: posts permalink: " pagination.href /" ---
<footer> <p>© date:"yyyy" My Eleventy Blog</p> </footer> </body> </html> ( .njk ) is Eleventy’s default templating language, but you can swap it for Liquid , Handlebars , EJS , etc. Just change the markdownTemplateEngine / htmlTemplateEngine in .eleventy.js . 5️⃣ Write Your First Post (Markdown + Front‑Matter) Eleventy treats any file with Front‑Matter (YAML block at the top) as a data‑rich page. Create a markdown file: Why the trailing slash
return /* dir config as before */ ; ; Now, when you run npm run serve , the ( / ) will list the five most recent posts with pagination links for older entries. 8️⃣ Add a CSS File (Optional, but looks nicer) mkdir -p src/assets/css touch src/assets/css/style.css /* src/assets/css/style.css */ body font-family: system-ui, sans-serif; max-width: 720px; margin: 0 auto; padding: 1rem; line-height: 1.6;