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 Hero, Features, Columns, Footer and basic blocks, plus core colors, gradients and effects. Subscribe to Dragsite Pro any time for the richer blocks and 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 (Pro)

   The left panel lists Hero, Features, Columns, Footer and basics like Heading, Text and Buttons — all free. Testimonial, Pricing, FAQ, Gallery and Video are Pro, and so are the AI Chatbot and Supabase-backed Form under Integrations. On a blank project you can also click a full-page starter template (Pro) to lay out a complete page instantly.

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 and static 3D tilt (parallax and interactive tilt are Pro), Animation for entrance presets (plus Pro cinematic ones), and Media for uploading or linking images — 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.