👤 User #
11ty:
target: relaunc website. use old text and pics. no js and new style. but keeping rough structure. i list the "sections":
- logo + navi in header
- hero pic
- depending on page: sipmle paragraphs OR 3 columns w/ header pics (possibnly cards)
- footer
Q 1: now: how to extract important meta tags and text (incl. links) and pic-urls for 11ty?
my ideas:
- each page copied as text from browser and saved as markdown file or
- better to edit: ONE SINGEL yaml-file including (indented) pages or
- JSON or
- ...
Q 2: How to iport into 11ty.
👆 ChatGPT #
Below is a clear, practical workflow to get your existing site content into 11ty, without JavaScript on the frontend, and keeping the structure simple.
✅ Q1: How to extract important meta tags, text (incl. links) and image URLs?
You basically want to capture only content, not layout. Here are solid options (from most reliable → to least):
Option A — “Source of Truth” per page → Markdown + Front-Matter (Best)
For each old page:
Open your page in the browser.
Copy only the text content, links, and img URLs.
Create a Markdown file:
yaml Copy code #
title: "Page Title" description: "Meta description text" image: "/img/hero.jpg" permalink: "/page/" #
Page headline #
Paragraph text…
Why this is best: ✔ readable ✔ easy to edit ✔ 11ty supports Markdown beautifully ✔ scales well if more pages later
Option B — One central YAML file (OK but harder to maintain)
Example:
yaml Copy code pages: home: title: "Home" hero: "/img/hero.jpg" body: | Welcome text... about: title: "About" hero: "/img/about.jpg" body: | Our story...
Why NOT ideal:
Harder to edit big text blocks
Mixing all pages into one file creates future headaches
Markdown is better for long content Use YAML only for small configuration, not entire pages.
Option C — JSON (similar drawbacks to YAML)
Better for structured data (e.g., cards), not for paragraphs. Example:
json Copy code { "cards": [ { "title": "A", "img": "/img/a.jpg", "text": "Lorem..." }, { "title": "B", "img": "/img/b.jpg", "text": "Lorem..." } ] }
Use JSON for:
3-column card layout
team members
products
blog index
Not ideal for full page content.
🔥 Recommendation (most realistic workflow) → Use Markdown files for pages → Use JSON/YAML only for repeatable data lists (cards) → Put meta tags in front-matter ✔ Which meta tags should you extract?
You only need the important SEO + social ones:
makefile Copy code title description og:title og:description og:image
Plus:
hero/feature image URLs
existing internal links
any alt text on images (SEO!)
📂 Recommended folder structure in 11ty pgsql Copy code . └── src/ ├── _data/ │ └── cards.json ← for 3-column card data ├── index.md ← home page ├── about.md ├── contact.md ├── assets/ │ └── images/ └── _includes/ ├── layout.njk ├── header.njk ├── footer.njk └── card.njk
✅ Q2: How to import this into 11ty? When you create a Markdown page:
index.md
yaml Copy code #
layout: layout.njk title: Home description: "Welcome to our site" hero: "/assets/images/hero.jpg" #
Welcome #
Intro text…
11ty automatically exposes all front-matter variables (title, hero, etc.) to your templates.
Example layout (layout.njk) njk Copy code
{% include "header.njk" %}
{% if hero %}
{% include "footer.njk" %}
How to handle your 3-column card pages
cards.json:
json Copy code [ { "img": "/assets/images/p1.jpg", "title": "Step 1", "text": "Lorem..." }, { "img": "/assets/images/p2.jpg", "title": "Step 2", "text": "Lorem..." }, { "img": "/assets/images/p3.jpg", "title": "Step 3", "text": "Lorem..." } ]
Page that uses them:
services.md
yaml Copy code #
layout: layout.njk title: Services cards: cards #
Template inside layout:
njk Copy code {% for card in cards %}
{{ card.title }}
{{ card.text }}
🎯 Final Recommendation Summary For content pages:
➡️ Use Markdown + front-matter per page (best for long text)
For repeatable blocks (cards, team, 3-column icons):
➡️ Use JSON or YAML in _data/.
For layout:
➡️ Create simple Nunjucks templates (header.njk, footer.njk, etc.)
For importing:
➡️ 11ty automatically reads Markdown, JSON, YAML in src/ and _data/.
If you want, I can show you:
✅ a ready-to-copy folder template for your project ✅ extraction script (optional) to auto-pull text + images from your old site ✅ a sample 3-column responsive CSS (no JS) Just tell me!