After Export Guide: FramerExport

📂 Chapter 1

What's inside the ZIP

When you unzip the file, you'll see a folder structure like this. Think of it as a "snapshot" of your Framer site: everything the browser needs to display your site, organized into folders.

your-site/ ├── index.html ← Your homepage, open this to preview ├── about/ │ └── index.html ← /about page ├── blog/ │ ├── index.html ← /blog listing page │ └── my-first-post/ │ └── index.html ← Individual blog post └── assets/ ├── css/ ← Stylesheets ├── fonts/ ← Custom fonts (WOFF2) ├── images/ ← All images (PNG, JPG, SVG, WebP) └── js/ ← Minimal scripts (animations only)

Try it now! Double-click index.html to open your site in a browser. It works completely offline. No server needed. Scroll through to verify everything looks right before deploying.

🌐 Chapter 2

Put it on the internet

Your exported site is "static": it's just files, no database or server code. That means you can host it for free on any of these platforms. Pick the one that feels easiest:

▲

Netlify

Drag-and-drop deploy. Zero config.

Free tier

▼

Vercel

Git-based deploys. Great DX.

Free tier

🐙

GitHub Pages

Free hosting via GitHub repo.

Free forever

1

Go to Netlify Drop

Open app.netlify.com/drop in your browser. No account needed for the first deploy (they'll ask you to sign up to keep it).

2

Drag your folder

Unzip the file first. Then drag the entire folder (not the ZIP) onto the drop zone. That's it. Netlify uploads everything and gives you a live URL in about 10 seconds.

3

Your site is live!

You'll get a URL like random-name-1234.netlify.app. Click it to verify. You can change this name or connect a custom domain in the next chapter.

Easiest option for non-technical users. Netlify Drop is literally drag-and-drop. No terminal, no Git, no config files. Perfect for getting online in under a minute.

1

Create a GitHub repository

Go to github.com/new, create a new repo, and upload your unzipped folder contents there (drag files into the browser).

2

Import on Vercel

Go to vercel.com/new, sign in with GitHub, and select your new repository. Click Deploy. No settings needed for static sites.

3

Auto-deploys on every push

Every time you push changes to GitHub (or edit files in the browser), Vercel automatically re-deploys. Your URL: your-repo.vercel.app

Best for ongoing updates. If you plan to edit the code regularly (with Cursor, Claude Code, etc.), Vercel + GitHub means every change you push goes live automatically.

1

Create a GitHub repository

Go to github.com/new and create a repo. Upload your unzipped files (drag and drop into the browser works).

2

Enable GitHub Pages

Go to Settings → Pages. Under "Source", select Deploy from a branch, pick main branch and / (root) folder. Click Save.

3

Wait ~2 minutes

GitHub builds and deploys your site at yourusername.github.io/your-repo. Refresh the Settings page to see the live URL once it's ready.

Note about paths. If your site is at username.github.io/repo-name/ (not the root), some asset paths might need adjusting. For a simpler setup, name your repo username.github.io, then it deploys to the root.

🎛 Chapter 3

Connect your custom domain

Want visitors to see yourname.com instead of random-name.netlify.app? Here's how:

1

Buy a domain (if you don't have one)

Popular registrars: Namecheap, Cloudflare Registrar, Google Domains. A .com costs roughly $10-15/year.

2

Add the domain to your hosting platform

In Netlify/Vercel/GitHub Pages, go to your site's domain settings and type in your domain name. The platform gives you DNS records to add.

3

Update DNS records at your registrar

Log into your domain registrar and add the records your hosting platform gave you. Usually it's one of these:

# Option A: Point your domain directly (A record)
Type:  A
Name:  @
Value: 75.2.60.5        # (use the IP your host provides)

# Option B: Use CNAME (for subdomains like www)
Type:  CNAME
Name:  www
Value: your-site.netlify.app

DNS changes take 5-30 minutes. After updating records, wait a bit for propagation. Netlify and Vercel automatically provision free SSL certificates, so your site will work with https://.

📊 Chapter 4

Add analytics

We stripped all tracking scripts during export for a clean output. To see who visits your site, add one of these options.

Option A: Google Analytics (most popular)

1

Get your tracking ID

Go to analytics.google.com, create a property for your site, and copy the measurement ID (starts with G-).

2

Paste this snippet into every HTML file

Add it right before the closing </head> tag. If you have multiple pages, add it to each one.

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Option B: Plausible (privacy-friendly, no cookie banner needed)

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Netlify and Vercel also have built-in analytics on their paid plans. No code changes needed. Cloudflare (free) also offers server-side analytics if you use their DNS.

📩 Chapter 5

Make forms work

Your exported forms have the HTML structure (inputs, labels, submit button) but no backend to receive the data. Here are three easy options. No coding required.

Option A: Netlify Forms (if you're on Netlify)

Just add one attribute to your <form> tag. Netlify handles the rest, including spam filtering.

<!-- Find your <form> tag and add netlify attribute -->
<form name="contact" method="POST" netlify>
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="Your email" />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Option B: Formspree (works anywhere)

Sign up at formspree.io (free for 50 submissions/month), create a form, and update the action URL:

<form action="https://formspree.io/f/your-form-id" method="POST">
  <!-- your existing inputs stay the same -->
  <input type="email" name="email" />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Option C: Web3Forms (no signup, just an API key)

Get a free access key from web3forms.com and add one hidden input:

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="your-key-here" />
  <!-- your existing inputs -->
  <button type="submit">Send</button>
</form>

Where to find the form in your exported HTML. Open your index.html (or whichever page has the form) in any text editor. Search for <form. That's the tag you need to modify.

✨ Chapter 6

Edit your site with AI

You don't need to learn HTML to change your site. AI coding tools can understand your exported files and make changes when you describe what you want in plain English.

Claude Code Terminal

Anthropic's CLI tool. Runs in your terminal, reads your files, and makes edits directly. Best for precise, surgical changes.

Best for
Quick text changes, adding scripts, fixing broken links, bulk edits across multiple pages

Cursor Editor

VS Code fork with built-in AI. See your files, type a prompt, preview the diff before applying. Most visual workflow.

Best for
Visual editing, seeing changes side-by-side, exploring file structure, learning how the code works

Windsurf Editor

AI-first code editor with "Cascade" mode that can plan and execute multi-file changes autonomously.

Best for
Larger changes, adding new sections, restructuring pages, building new features

GitHub Copilot VS Code ext.

Works inside VS Code as a plugin. Autocompletes code and answers questions about your files via the chat panel.

Best for
If you already use VS Code and want AI assist without switching editors

Getting started with Claude Code

1

Install Claude Code

Open your terminal (Mac: Spotlight → "Terminal", Windows: search "cmd") and run:

npm install -g @anthropic-ai/claude-code

2

Open your exported site folder

Go to the folder where you unzipped your files and launch Claude Code:

cd ~/Downloads/your-exported-site claude

3

Tell it what you want to change, in plain English

Claude Code reads all your files, understands the structure, and makes the exact edits. You review and approve each change.

Getting started with Cursor

1

Download Cursor

Go to cursor.com and download the app. It looks and works just like VS Code.

2

Open your exported folder

Drag your unzipped folder onto Cursor, or use File → Open Folder. You'll see all your HTML, CSS, and asset files in the sidebar.

3

Press Cmd+K (Mac) or Ctrl+K (Windows) to prompt

Select some code, press the shortcut, and type what you want. Cursor shows you a diff preview: green for added lines, red for removed. Click "Accept" to apply.

Example prompts you can try right now

Copy any of these into Claude Code or Cursor's AI chat:

"Change the hero headline to 'We build digital products that matter'" Text change

"Make the header background dark (#111) with white text" Design

"Add a new testimonial card after the existing ones with this quote: ..." Feature

"The contact form doesn't work. Wire it up to Formspree with my ID f/abc123" Fix

"Add Google Analytics tracking code to all HTML pages. My ID is G-XXXXX" Feature

"Replace the hero image with /assets/images/new-hero.jpg that I just added" Design

"Add meta description and Open Graph tags to all pages for SEO" SEO

"The mobile menu doesn't open. Add a hamburger toggle that shows/hides the nav links on screens under 768px" Fix

You own every line of code. Unlike Framer where changes go through their editor, you now have full control. AI tools help you make changes, but you approve everything. Push to GitHub and it's version-controlled forever.

You downloaded the ZIP.Now what?

In this guide

What's inside the ZIP

Put it on the internet

Netlify

Vercel

GitHub Pages

Go to Netlify Drop

Drag your folder

Your site is live!

Create a GitHub repository

Import on Vercel

Auto-deploys on every push

Create a GitHub repository

Enable GitHub Pages

Wait ~2 minutes

Connect your custom domain

Buy a domain (if you don't have one)

Add the domain to your hosting platform

Update DNS records at your registrar

Add analytics

Option A: Google Analytics (most popular)

Get your tracking ID

Paste this snippet into every HTML file

Option B: Plausible (privacy-friendly, no cookie banner needed)

Make forms work

Option A: Netlify Forms (if you're on Netlify)

Option B: Formspree (works anywhere)

Option C: Web3Forms (no signup, just an API key)

Edit your site with AI

Claude Code Terminal

Cursor Editor

Windsurf Editor

GitHub Copilot VS Code ext.

Getting started with Claude Code

Install Claude Code

Open your exported site folder

Tell it what you want to change, in plain English

Getting started with Cursor

Download Cursor

Open your exported folder

Press Cmd+K (Mac) or Ctrl+K (Windows) to prompt

Example prompts you can try right now

Ready to export your Framer site?

You downloaded the ZIP.
Now what?