How to host a Claude website on Squarespace, step by step

Yes, you can put a website Claude built for you on Squarespace, and you don't need a developer to do it. The method is simple: ask Claude to strip out its own navigation and footer, ask it to make the code safe for Squarespace, then paste the result into a code block inside a blank section. Squarespace supplies the header, footer, hosting, domain and SSL. A one-page site takes about half an hour.

We've done this for clients and fixed it for plenty of people who tried it on their own first, The two prompts below save the most time, and the last section covers what tends to break.

What you need before you start

Start with your Squarespace plan. Code blocks accept HTML and CSS on every plan, but JavaScript and iframes inside a code block need the Core plan or higher, according to Squarespace's code block documentation. Most Claude sites use a little JavaScript for animations or FAQ accordions. If you're on Basic, either upgrade or ask Claude to rewrite those parts in plain CSS.

The output also has to be plain HTML. Claude artifacts sometimes come out as React components, which a code block can't run. If yours starts with import statements, or you can see useState anywhere, ask Claude to "rewrite this as a single self-contained HTML file with inline CSS and vanilla JavaScript" before going further. Claude Code projects with a build step need the same treatment, or you can paste in the built HTML from the output folder.

Then there's size. A code block holds 400 KB, roughly 300,000 characters. A normal page fits with lots of room to spare. Images embedded as base64 text don't, because one photo can take up the whole allowance on its own.

Step 1: ask Claude to remove its nav and footer

This is the step most people skip, and it's the one that makes the finished site look homemade. Claude almost always builds a page with its own navigation bar at the top and its own footer at the bottom. Squarespace already has both. Paste Claude's page in as it is and you get two menus stacked on top of each other, and two footers.

Keep the Squarespace versions and delete Claude's. Squarespace's header gives you a working mobile menu, a header that stays the same on every page, and links you can change from the editor without opening any code. The footer is where Squarespace expects your social links, newsletter sign-up and legal pages to go, and you edit it once for the whole site.

Open the same Claude conversation that built the site and send this:

Remove the navigation bar / header and the footer from this page.
I'm putting it on Squarespace, which has its own header and footer.
Keep every section in between exactly as it is. If any CSS or
JavaScript only existed for the nav or footer (mobile menu toggle,
sticky header offsets, footer styles), remove that too.

Before you move on, take note of what the old nav linked to. You'll rebuild those links in the Squarespace header in Step 5, and if Claude's nav jumped to sections on the same page (#services, #contact), those anchors will still work from the new header.

Step 2: ask Claude to make the code Squarespace-safe

A code block isn't a blank web page. It sits inside a Squarespace page that already has its own fonts and colours. Claude writes CSS as though it owns the whole page, so its styles leak out and Squarespace's styles leak in. The usual symptoms are a Squarespace header that suddenly changes font, or buttons that pick up the site's default styling halfway through your design.

The fix is to have Claude wrap everything in one container and scope every rule to it. Send this in the same conversation:

Now prepare this so I can paste it into a Squarespace code block.

1. Remove the <!DOCTYPE>, <html>, <head> and <body> tags.
   Keep the <style>, the markup and the <script>.
2. Wrap all the markup in <div class="cw-page">...</div> and
   prefix every CSS selector with .cw-page. Don't style html,
   body, * or :root directly. Move any :root variables onto
   .cw-page instead.
3. Keep the Google Fonts <link> tag at the top of the output.
4. Replace any base64 images with obvious placeholder URLs and
   list them so I can swap in my own.
5. Every section must be fully visible without JavaScript.
   Scroll animations can add motion, but nothing should start
   at opacity: 0 or display: none before the script runs.
6. Remove any <form> elements and tell me where they were.
7. Give me the whole thing back as one code snippet.

Point 5 matters because Squarespace doesn't run your code block's JavaScript while you're logged in and editing the page. A Claude page that fades its sections in on scroll starts every section invisible and waits for a script to reveal them. In the editor, that script never runs, so you're looking at a blank white block and assuming the paste failed. Making the content visible by default fixes that, and it's also better for search engines and slow phones.

Point 6 is there because Claude writes form markup, not a working form. There's nothing on the other end to receive what people type, so a pasted Claude form looks fine and quietly sends nowhere. You'll replace it with a Squarespace form in Step 5.

If your site has more than one page, get one snippet per page

Each Squarespace page holds its own code block, so a five-page Claude site becomes five Squarespace pages with a separate snippet in each. Claude often builds a multi-page site as one long file, or as several files that share a stylesheet, and neither will paste straight in. Ask it to split the site up:

This site has several pages. Prepare each one as its own
Squarespace code block snippet, using the same rules as above,
and give them to me one page at a time.

1. Put the CSS that more than one page uses (colours, fonts,
   buttons, spacing) into a separate block of plain CSS with no
   <style> tags, for Squarespace's site-wide Custom CSS panel.
   Keep it scoped to .cw-page.
2. Each page's snippet should only contain the styles unique to
   that page, plus the Google Fonts <link> tag.
3. Change every link between pages to the Squarespace URL it
   will have: / for the home page, then /about, /services,
   /contact and so on. Ask me if you're not sure of a slug.

Paste the shared CSS into the Custom CSS panel once, under Website in the Squarespace menu. Then each page snippet stays small, and changing a button colour later is one edit rather than one per page. You can repeat the shared CSS inside every snippet instead, which works, but every style change then has to be made on every page.

Write down the slugs you gave Claude. You'll need to match them exactly when you create the pages in Step 4.

Step 3: move your images onto Squarespace

Claude usually fills a page with stock photo links or placeholders. Swap in your own images, hosted on Squarespace, so they load from the same place as the rest of your site.

The quickest way is the Asset Library. Upload all your photos there in one go, open each image and copy its URL, which begins with images.squarespace-cdn.com. Paste it over the matching placeholder in your code. For a multi-page site, upload every page's images at once and work through the snippets one by one.

If you can't find the copy option, add a temporary image block to any page, upload the photo, open the live page in a new tab, right-click the image and choose "Copy image address". Then delete the temporary block. Squarespace keeps the file.

Resize photos before you upload them. Anything wider than 2,500 pixels is wasted on a website and slows the page down on mobile data.

Step 4: paste it into a code block in a blank section

1. In Squarespace, go to Pages and add a new blank page. Give it its proper name and URL now rather than later, using the slug you gave Claude.
2. Click Edit, then Add Section, and choose a blank section. Delete any other sections the page came with.
3. Inside the blank section, click Add Block and choose Code.
4. Click the pencil icon on the block, set the type to HTML, and untick Display Source. If that box stays ticked, visitors see your code as text instead of a web page.
5. Paste the full snippet from Step 2 and save.
6. Drag the code block's edges so it spans the full width of the section. Then open the section's settings and set the width to full and the height to small, so Squarespace's own padding doesn't box your design in.

For a multi-page site, repeat these steps for each page, pasting that page's snippet. One code block per page is easiest to look after. You can split a long page into several blank sections with a code block in each, which lets you put native Squarespace blocks in between them, but the CSS then needs repeating or moving to the site-wide Custom CSS panel.

Step 5: rebuild the header links and forms in Squarespace

Open the header editor and add the links Claude's nav used to have. On a multi-page site these point to the Squarespace pages you just made, and you can add them from the Pages panel rather than typing URLs. Then edit the footer once for the whole site.

For any form you removed in Step 2, add a section where the form used to be and drop in a Squarespace form block. Squarespace emails each submission to you, stores a copy in your account, and can send entries to Mailchimp or Google Sheets. It won't match Claude's styling exactly out of the box. A few lines of custom CSS usually get it close enough, and a form that sends is worth more than one that matches.

Step 6: check it logged out, then do the SEO settings

Because scripts don't run in the editor, the editor isn't a reliable preview. Open the live page in a private browser window, or on your phone, where you're not logged in. Check that animations play, accordions open, buttons go to the right place and nothing overflows sideways on a small screen.

Then fill in the Squarespace side, which Claude's code can't do for you. In the page's settings, write an SEO title and a meta description, and check the URL slug. Make sure the page has exactly one main heading: if Claude's hero uses an <h1>, don't also add a title block above it. Content inside a code block is ordinary HTML in the page source, so Google reads it like any other text. The SEO checklist we run on every Squarespace site covers the rest.

What usually goes wrong

These come up over and over when people send us a Claude-on-Squarespace page to look at.

The block is blank in the editor. Almost always the scroll-reveal problem from Step 2. Check the live page logged out. If it shows there, you're fine. If it's blank there too, ask Claude to make all content visible by default.

The Squarespace header changed font or colour. A CSS rule is targeting body, h1 or * without the .cw-page prefix. Search the code for any selector that doesn't start with it.

The design looks squashed. The code block is sitting inside the section's default width and padding. Go back to the last part of Step 4.

Fonts fall back to the site default. The Google Fonts link got stripped along with the <head>. Put the <link> tag back at the very top of the code block.

Anchor links land under the header. If your Squarespace header is fixed, jumping to #contact hides the section's heading behind it. Ask Claude to add scroll-margin-top to each section, set to your header's height.

JavaScript does nothing on the live site. You're on the Basic plan. Upgrade to Core, or ask Claude for a CSS-only version.

The trade-off: you can't edit it like a normal Squarespace page

A code block gets your design live on Squarespace quickly, but every word on the page now lives inside code. Changing a price or a phone number means opening the block and finding it in the HTML, or going back to Claude and hoping it doesn't rewrite three other things while it's there. Anyone else on your team will need the same comfort with code.

For a landing page or a site you'll rarely touch, that's a fair price for getting it live this afternoon. For a business site that changes every month, or one other people need to update, rebuild the content in native Squarespace blocks so it can be edited the way Squarespace intends. That's the work our Claude and AI website conversion service does: we keep the design you already approved and rebuild it in Squarespace, with working forms, analytics and SEO settings included.

And if you're comfortable with code and only want somewhere to host the files, you don't need Squarespace at all. Vercel, Netlify and Cloudflare Pages will host a static Claude site at no cost in about ten minutes.

Other questions about Claude sites on Squarespace

Can I upload an HTML file to Squarespace?

Not as a page. Squarespace has no way to turn an uploaded HTML file into a page with your header, footer and SEO settings. Pasting the HTML into a code block is the supported way to put your own HTML on a Squarespace page.

Can I put a multi-page Claude website on Squarespace?

Yes. Ask Claude for one code block snippet per page, plus the shared CSS as a separate block for the site-wide Custom CSS panel. Create a Squarespace page for each, paste in its snippet, and make sure the links between pages use the Squarespace URLs.

Which Squarespace plan do I need for a Claude website?

Any plan will display the HTML and CSS. You need Core or higher if the page uses JavaScript, which most Claude sites do for animations and accordions.

Will Google index a page built in a code block?

Yes. The code block's HTML is part of the page Squarespace serves, so search engines read the headings and text like any other page. Content that only appears after JavaScript runs is less reliable, which is another reason to make everything visible by default.

Can I use Claude to make changes later?

Yes. Paste the current code block back into Claude, describe the change, and ask for the full updated snippet. Save a copy of each version in a text file before you paste over it, so you can roll back if a change goes wrong.

Should I hide the Squarespace header instead of Claude's?

It's possible with a little CSS, but we don't recommend it. Claude's nav is hard-coded into one page, so every other page on your site would still need the Squarespace header, and the two would drift apart the first time you add a page.