Tutorial

Build and publish your first site

Follow these steps to go from a blank canvas to a live, hosted index.html file.

1. 1. Sign in

   Sign in with your Whop account to open the dashboard and builder — it's free, with every block, gradients, video and the full effects kit included. Subscribe to Dragsite Pro any time for unlimited sites and the cinematic extras.

2. 2. Create a new site

   From your dashboard, click "New site" to start a blank project. Give it a name — you can rename it any time.

3. 3. Drag blocks onto the canvas — or start from a template

   The left panel lists full sections (Hero, Features, Testimonial, Pricing, FAQ, Footer and more), media blocks, and basics like Heading, Text and Buttons — all free. Under Integrations, the AI Chatbot and Supabase-backed Form are Pro. On a blank project you can also click a starter template to lay out a complete page instantly, then customize it.

4. 4. Reorder blocks

   Grab the ⠿ handle on any block already on the canvas and drag it up or down to reorder your page.

5. 5. Edit content, Effects, Animation and Media

   Click a block to select it. The right panel has four tabs: Content for its text and links, Effects for shadows, glass blur, borders, 3D tilt and parallax, Animation for entrance presets (plus Pro cinematic ones), and Media for uploading or linking images and video — every change updates the canvas instantly.

6. 6. Upload your own images and video

   Any image or video field has a real "Upload" button — pick a file from your device and Dragsite hosts it for you. No account or third-party image host needed.

7. 7. Connect a backend (Pro)

   In the left sidebar under "Backend", paste your Supabase project URL and anon key. Add a Form block, set which table it should write to, and add an insert policy for the anon role on that table in Supabase — submissions land straight in your database, no server of your own required.

8. 8. Save your work

   Click "Save" in the top bar at any time. Your project is stored in your browser so it is there next time you open the dashboard.

9. 9. Export as index.html

   When your page looks right, click "Export HTML". Dragsite generates a single, self-contained index.html file — animations, effects and all — and downloads it to your computer.

10. 10. Publish it to your host

    Upload the downloaded index.html file to the root directory of your web host (the top-level public folder, not a subfolder) so it is served at your domain’s root — e.g. yourdomain.com/index.html. Most hosts call this the "public", "www", or "root" folder in their file manager or FTP client.