# 3️⃣ Install Eleventy as a dev‑dependency npm i @11ty/eleventy --save-dev
- run: npm ci - run: npm run build
touch src/posts/2024-04-14-welcome-to-eleventy.md --- title: "Welcome to Eleventy!" date: 2024-04-14 layout: base.njk # points to the layout we just made tags: blog post excerpt: "A quick intro to Eleventy, the static site generator you’ll love." --- eleventa full crack
– Install Node → npm init -y → npm i @11ty/eleventy --save-dev → create an src/ folder, a posts/ sub‑folder, a Markdown file with front‑matter, run npx eleventy and you’ll have a static HTML page ready to deploy. 1️⃣ Prerequisites | What you need | Why it matters | |---------------|----------------| | Node.js (v18+ recommended) | Eleventy runs on Node. Install from https://nodejs.org/ (choose the LTS version). | | Git (optional but handy) | Version‑control your site, push to GitHub Pages, Netlify, Vercel, etc. | | A code editor (VS Code, Sublime, Neovim…) | For editing Markdown, config files and templates. | | A terminal / command prompt | To run the npm / Eleventy commands. | Tip: If you already have a project folder, you can skip the “init” steps and just npm i @11ty/eleventy there. 2️⃣ Scaffold a New Eleventy Project # 1️⃣ Make a fresh directory (or cd into an existing one) mkdir my-eleventy-site && cd my-eleventy-site
### Getting Started
- name: Deploy uses: peaceiris/actions-gh-pages@v4 with: github_token: $ secrets.GITHUB_TOKEN publish_dir: ./_site Commit the workflow, push to main , and GitHub will publish your site automatically. | Feature | Quick How‑to | |---------|--------------| | Tag pages | Add a tags.njk template, use collections.tagMap or create a custom collection per tag. | | RSS / Atom feed | Install @11ty/eleventy-plugin-rss and add eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-rss")); | | Syntax‑highlighted code blocks | Use @11ty/eleventy-plugin-syntaxhighlight . | | Image optimization | Add eleventy-img plugin and generate responsive <picture> elements. | | Draft posts | Add a `draft: true
# Pagination navigation (optional) # % if pagination.pages.length > 1 % <nav class="pagination"> % if pagination.previousPageLink % <a href=" pagination.previousPageLink ">← Newer</a> % endif % % if pagination.nextPageLink % <a href=" pagination.nextPageLink ">Older →</a> % endif % </nav> % endif % Add a simple collection function to .eleventy.js : # 3️⃣ Install Eleventy as a dev‑dependency npm
// 1️⃣ Create a collection called "post" that grabs everything in src/posts eleventyConfig.addCollection("post", function(collectionApi) return collectionApi.getFilteredByGlob("./src/posts/*.md") .sort((a, b) => b.date - a.date); // newest first );