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." ---
# 4️⃣ Add a simple build script to package.json # (Open package.json, locate "scripts", replace with:) # "scripts": # "build": "eleventy", # "serve": "eleventy --serve", # "watch": "eleventy --watch" # ,
# Inside src/_includes create a file called base.njk touch src/_includes/base.njk # src/_includes/base.njk # <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>% if title % title | % endif %My Eleventy Blog</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/assets/css/style.css"><!-- optional --> </head> <body> <header> <h1><a href="/">My Eleventy Blog</a></h1> <nav> <a href="/">Home</a> <a href="/about/">About</a> </nav> </header>
- 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
module.exports = function(eleventyConfig) // … existing config …
