html2astro

Drag & drop your HTML. Instantly convert to an Astro project.

Last Update

06.01

Added package.json to generated projects.
You can now specify the major version of Astro.
You can now configure whether tsconfig.json is included in generated projects.

Upload Your HTML

Drag & drop your ZIP file here

or click to browse

Options

Astro Version

Output ZIP filename

Page structure

output:

/pages/slug/index.astro

fail on missing assets

use TypeScript(generate tsconfig.json)

Features

Skip 0 KB files
Auto-distribute <head> metadata: common in layout, per-page in slot
Copy assets into public/assets/{images,js,css,misc}
Extract <header>/<footer> into Header.astro/Footer.astro

Example Transformation

Input:

/my-site
├─ index.html
├─ profile.html
└─ src/
   ├─ style.css
   ├─ common.css
   ├─ main.js
   ├─ image.png
   ├─ logo.svg
   └─ some-text.txt

Output:

/astro-project
├─ public/
│  └─ assets/
│     ├─ css/
│     │  ├─ style.css
│     │  └─ common.css
│     ├─ js/
│     │  └─ main.js
│     ├─ images/
│     │  ├─ image.png
│     │  └─ logo.svg
│     └─ misc/
│        └─ some-text.txt
└─ src/
   ├─ components/
   │  ├─ Header.astro
   │  └─ Footer.astro
   ├─ layouts/
   │  └─ BaseLayout.astro
   └─ pages/
      ├─ index.astro
      └─ profile.astro