How to Export Your Draftly Website Code and Host It Anywhere

Draftly empowers you to create stunning 3D websites with a single prompt, but we believe in giving you complete control over your creation. That’s why we make it simple to export your Draftly website code and host it on any platform you choose. Whether you're an agency needing to hand off a finished project, a developer integrating a site into a larger application, or a business with specific hosting requirements, this guide will walk you through the entire process.

Exporting gives you ultimate freedom. You get a self-contained, production-ready package of your website's HTML, CSS, JavaScript, and all associated assets. This means you can deploy it on your own infrastructure, put it under version control with Git, and ensure it remains online indefinitely, independent of your Draftly subscription.

Why Export Your Draftly Website Code?

While Draftly’s built-in hosting is fast, secure, and globally distributed, there are several key scenarios where exporting your code is the right move. For many businesses, self-hosting isn't just a preference—it's a requirement. In fact, an estimated 70% of enterprise-level web projects must be deployed on private infrastructure to comply with internal security and data governance policies.

!how to export your draftly website code host it anywhere, product

Here are the most common reasons to export your site:

• Corporate Compliance: Your company may mandate using specific cloud providers like AWS, Google Cloud, or Azure for all digital properties.
• Custom Backend Integration: You might need to integrate the cinematic front-end you built in Draftly with a custom backend, a headless CMS, or proprietary APIs.
• Version Control: Developers and agencies often prefer to manage website updates through Git repositories on platforms like GitHub or GitLab for better change tracking and collaboration.
• Long-Term Archival: Exporting your site creates a permanent, offline backup that you can store and redeploy anytime in the future.

Before You Export: A Pre-Flight Checklist

To ensure a smooth transition from Draftly to your own hosting environment, it’s best to complete a few preparatory steps. Taking 10 minutes to run through this checklist can save you hours of work post-export.

• Finalise Your Design: Make sure all content, animations, and page structures are exactly as you want them. While you can edit the exported code, it's far easier to make design changes in the Draftly editor and re-export. Check that all your Draftly Page Transitions and Section Animations are working perfectly.
• Optimise All Media: Your site's performance depends heavily on asset size. Before exporting, ensure you've followed best practices to Optimise Images Before Uploading to Draftly. Draftly automatically handles much of this, but starting with well-sized source files is crucial.
• Confirm Mobile Responsiveness: Use Draftly’s preview mode to check your site's appearance on desktop, tablet, and mobile devices. A seamless user experience across all screen sizes is non-negotiable, as over 60% of web traffic in India now comes from mobile.
• Review Your Plan: The code export feature is available on our Pro and Agency plans. Navigate to your account's billing section to confirm your plan includes this capability.

How to Export Your Draftly Website Code: Step-by-Step

Once you’ve completed the pre-flight checklist, you’re ready to export. The process is designed to be straightforward and takes just a few clicks.

Step 1: Navigate to Your Site Dashboard

Log in to your Draftly account. From the main dashboard that lists all your projects, find the website you wish to export and click on its name to enter the editor for that specific site.

Step 2: Initiate the Code Export

Inside the site editor, look for the Publish button in the top-right corner. Click it to open the publishing options. Alongside the options to publish to a Draftly subdomain or a custom domain, you will see a Download Code button. Click this to begin the export process.

• Draftly will start compiling all your site’s elements—HTML, CSS, JavaScript, images, and 3D models—into a single, optimised package.
• This process usually takes between 2 to 5 minutes, depending on the complexity and size of your website's media assets.

Step 3: Download and Unzip the File

Once the compilation is complete, you will be prompted to download a `.zip` file to your computer. Save the file, navigate to its location, and unzip it. Inside, you'll find a clean, standard web project structure ready for deployment.

Understanding the Exported Code Structure

Your downloaded `.zip` file contains everything needed to run your website on any server. The code is minified and bundled for optimal performance, ensuring you can maintain a 90+ PageSpeed Score even when self-hosting. Here’s a quick look at the directory structure:

• `index.html`: This is the main file for your homepage. If you have a multi-page site, you'll see other `.html` files here as well.
• `/assets`: This folder contains all of your media. This includes images, videos, 3D models (`.glb` files), and any other files you've uploaded.
• `/css`: Your website's styles are bundled into one or more minified CSS files in this directory.
• `/js`: All the JavaScript required for animations, 3D rendering, and interactivity is compiled and placed here.

Hosting Your Exported Website: Popular Options

With your production-ready code in hand, you can now upload it to the hosting provider of your choice. The process is as simple as uploading the unzipped files and folders.

Static Hosting Platforms

• Create an account with your chosen provider.
• Connect your GitHub, GitLab, or Bitbucket account.
• Create a new Git repository and push your exported Draftly code to it.
• In your hosting provider's dashboard, create a new project and link it to your Git repository.
• The platform will automatically build and deploy your site to a global CDN.

Cloud Storage Hosting

• AWS S3: Upload your files to an S3 bucket and configure it for static website hosting. For global distribution, you can pair this with Amazon CloudFront.
• Google Cloud Storage: Similar to S3, you can create a bucket, upload your files, and enable static site hosting.

Traditional Web Hosting

• Log in to your cPanel and find the 'File Manager'.
• Navigate to the `public_html` directory.
• Upload the contents of your unzipped Draftly folder directly into `public_html`.
• Your site will be live on your domain immediately.