Ready To Paste:

Act as a Senior Eleventy (11ty) Migration Architect, Frontend Tech Lead, and Production Engineer.

I am providing a complete static HTML website source code.

Your task is to fully convert this website into a production-ready Eleventy (11ty) project suitable for real-world deployment.

OBJECTIVE

Do not explain how to do it.

Do not provide examples.

Do not provide partial implementation.

Perform the entire migration and generate the complete project.

ANALYSIS PHASE

Before generating code:

1. Analyze the entire project structure.
2. Detect all pages.
3. Detect reusable UI sections.
4. Detect repeated HTML patterns.
5. Detect shared assets.
6. Detect SEO-related elements.
7. Detect navigation structure.
8. Detect forms and interactive components.

Then refactor the project architecture accordingly.

TECHNICAL REQUIREMENTS

Use:

- Eleventy (latest stable version)
- Nunjucks templates (.njk)
- Modular architecture
- Production-ready folder structure

Create:

/src
  /_includes
  /_layouts
  /_data
  /assets
    /css
    /js
    /images
  /pages

Generate:

- package.json
- .eleventy.js
- .gitignore
- sitemap.xml generation
- robots.txt
- navigation data
- site metadata
- SEO metadata
- Open Graph tags
- canonical URLs
- 404 page
- build scripts
- dev scripts
- production scripts

REFACTORING RULES

Convert repeated sections into reusable includes:

- Header
- Navbar
- Footer
- Hero sections
- CTA blocks
- Cards
- Testimonials
- Pricing blocks
- Forms
- Reusable content sections

Move reusable content into:

- _data/site.json
- _data/navigation.json
- additional data files when needed

CODE QUALITY RULES

1. Preserve the design exactly.
2. Preserve all URLs.
3. Preserve all content.
4. Preserve all styling.
5. Preserve all JavaScript functionality.
6. Remove duplicated code.
7. Follow DRY principles.
8. Follow Eleventy best practices.
9. Optimize for maintainability.
10. Optimize for performance.
11. Optimize for SEO.
12. Optimize for accessibility (WCAG).

PRODUCTION REQUIREMENTS

Include:

- clean asset handling
- minification configuration
- image optimization setup (if applicable)
- proper metadata management
- environment-aware configuration
- scalable template architecture

OUTPUT FORMAT

Generate everything file-by-file.

Use this exact format:

================================================
FILE: package.json
================================================

[file content]

================================================
FILE: .eleventy.js
================================================

[file content]

Continue for every file until the entire project is complete.

AFTER ALL FILES

Provide:

1. Final folder structure tree
2. npm install command
3. npm run dev command
4. npm run build command
5. deployment instructions

IMPORTANT RULES

- Never stop after a sample.
- Never stop after a partial conversion.
- Never ask for confirmation.
- Never summarize instead of generating code.
- Never leave TODO placeholders.
- Never skip files.
- Generate the complete working project.
- Continue across multiple responses if token limits are reached.
- Assume the generated code will be deployed directly to production.

START NOW.

Analyze the uploaded HTML project and immediately begin generating the complete Eleventy project.

Migration Prompt | Part-II

Role: Act as a senior 11ty (Eleventy) architect and migration engineer.

I will provide a complete static HTML website (multiple pages, assets, CSS, JS, images, forms, and content).

Your task is to convert it into a production-ready Eleventy (11ty) project with modern best practices.

Requirements

  1. Analyze the entire HTML site structure before making changes.

  2. Convert repeated sections into reusable components/includes:

    • Header
    • Navigation
    • Footer
    • CTA sections
    • Cards
    • Forms
    • Any repeated UI patterns

  3. Create a scalable Eleventy architecture:

    • _includes/
    • _layouts/
    • _data/
    • assets/
    • pages/
    • collections/ (if applicable)

  4. Extract reusable content into:

    • Global data files
    • Navigation data
    • Site settings
    • SEO metadata

  5. Generate:

    • .eleventy.js
    • Package.json
    • Build scripts
    • Development scripts
    • Production scripts

  6. Preserve all existing design, styling, functionality, URLs, and content.

  7. Optimize for:

    • Performance
    • SEO
    • Accessibility (WCAG)
    • Maintainability
    • Clean code

  8. Add:

    • Sitemap generation
    • Robots.txt
    • Open Graph metadata
    • Canonical URLs
    • Structured data where appropriate

  9. Use Nunjucks templates unless another approach is clearly better.

  10. Follow current Eleventy best practices and conventions.

Output Format

For every file:

FILE: path/to/file.ext

Then provide the complete file contents.

Deliverables

  • Complete project structure tree
  • All generated files
  • Migration notes
  • Required npm packages
  • Installation commands
  • Build commands
  • Deployment instructions

Important

Do not provide explanations first.

Start by analyzing the uploaded HTML project and immediately generate the complete production-ready Eleventy project file-by-file.

If the project is large, continue generating files across multiple responses until the migration is 100% complete.

For Claude Code / ChatGPT (Best Version) | Part-III

Convert the uploaded HTML website into a fully working production-ready Eleventy (11ty) project.

Your goal is not to explain the migration but to perform the migration.

Return:

  • Complete folder structure
  • Every generated file
  • Every template
  • Every layout
  • Every include
  • Every data file
  • .eleventy.js
  • package.json
  • SEO configuration
  • Build configuration

Preserve the design exactly.

Refactor duplicate HTML into reusable components.

Use Nunjucks templates and Eleventy best practices.

Assume the result will be deployed directly to production.

Generate code only, organized file-by-file, until the migration is fully completed. Do not stop after examples or partial implementation.