<ul> % for post in posts % <li> <a href=" post.url "> post.data.title </a> <small>— readableDate </small> <p> post.data.excerpt </p> </li> % endfor % </ul>
That’s it! 🎉 You now have a fully‑functional blog post. | Part | Explanation | |------|-------------| | --- block | YAML front‑matter – tells Eleventy metadata about the page. | | title | Used in the <title> tag and can be referenced in layouts. | | date | Used for sorting, archives, and the readableDate filter. | | layout | The name of the layout file (relative to _includes ). | | tags | Handy for creating tag pages later ( collections ). | | excerpt | Custom field you can display on index pages. | | Content after the second --- | Standard Markdown that Eleventy will render into HTML. | 6️⃣ Run Eleventy Locally # Build once 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
- run: npm ci - run: npm run build
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 /" --- <ul> % for post in posts % <li>
- name: Use Node.js uses: actions/setup-node@v4 with: node-version: '20'
<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: | | title | Used in the <title>
# 3️⃣ Install Eleventy as a dev‑dependency npm i @11ty/eleventy --save-dev