# Build a static site with AI Use an AI assistant like Claude, ChatGPT, or Gemini to generate a complete website, then deploy it on DanubeData in minutes — no coding experience required. ## Why use AI to build your site - **No coding required** — Describe what you want in plain language and get working HTML, CSS, and JavaScript - **Fast iteration** — Regenerate or tweak designs in seconds - **Production-ready output** — Modern, responsive, accessible code you can deploy immediately - **Learn as you go** — Read the generated code to understand how websites work ## Step 1: Choose an AI assistant Any LLM that can generate code works. Popular options: | Tool | Access | Best for | |------|--------|----------| | **Claude** | claude.ai | Clean code, thoughtful design, long outputs | | **ChatGPT** | chatgpt.com | General-purpose, widely available | | **Gemini** | gemini.google.com | Google ecosystem integration | | **GitHub Copilot** | VS Code extension | Inline code completion | The examples below use Claude, but the prompts work with any AI assistant. ## Step 2: Write a prompt Tell the AI exactly what you want. The more specific your prompt, the better the result. ### Example: Personal portfolio ``` Create a single-page personal portfolio website as a single HTML file with inline CSS. Include: - My name: Maria Popescu - Title: UX Designer based in Bucharest - A short bio paragraph about my experience in product design - A section with 3 project cards (placeholder titles and descriptions) - Links to GitHub, LinkedIn, and email - Dark color scheme with blue accents - Responsive layout that works on mobile - Clean, modern design with good typography ``` ### Example: Landing page for a product ``` Create a landing page for a SaaS product called "TaskFlow" as a single HTML file with inline CSS and minimal JavaScript. Include: - Hero section with headline, subtitle, and a call-to-action button - Three feature cards with icons (use emoji as icons) - A pricing section with Free, Pro, and Enterprise tiers - A footer with links and copyright - Light theme with a gradient hero background - Fully responsive, mobile-first design ``` ### Example: Documentation site ``` Create a documentation site for a REST API as a single HTML file with inline CSS and JavaScript. Include: - Sidebar navigation with sections: Getting Started, Authentication, Endpoints - Main content area with formatted code blocks - Dark code theme with syntax-like coloring - A search box in the header (visual only, no backend needed) - Responsive: sidebar collapses on mobile - Clean, readable typography similar to Stripe or Tailwind docs ``` ### Example: Event or conference page ``` Create a single-page website for a tech conference called "DevSummit 2026" as a single HTML file. Include: - Event date: October 15-16, 2026 in Cluj-Napoca, Romania - Hero with event name, date, location, and a "Get Tickets" button - Speaker section with 4 speaker cards (placeholder names and photos) - Schedule/agenda for both days - Sponsors section with placeholder logos - Registration form (visual only) - Modern, bold design with a dark background ``` ## Step 3: Refine the output After the AI generates your site, you can ask follow-up questions to refine it: - "Make the hero section taller and add a background image placeholder" - "Change the color scheme to green and white" - "Add a contact form at the bottom" - "Make the navigation sticky" - "Add smooth scroll to section links" - "Add a dark/light mode toggle" - "Optimize the layout for mobile — the cards should stack vertically" Each follow-up gives you an updated version. Keep refining until you are happy with the result. ## Step 4: Save the files 1. Copy the generated HTML from the AI assistant 2. Create a folder on your computer (e.g., `my-site`) 3. Save the HTML as `index.html` inside that folder 4. If the AI generated separate CSS or JS files, save those too ### File structure for a single-page site ``` my-site/ index.html ``` ### File structure for a multi-page site ``` my-site/ index.html about.html contact.html css/ style.css js/ main.js images/ logo.png ``` ## Step 5: Preview locally Open `index.html` in your browser to see how it looks. If something is not right, go back to the AI assistant and ask for changes. ## Step 6: Deploy to DanubeData ### Option A: ZIP upload (simplest) 1. Select all files inside your `my-site` folder and compress them into a ZIP file 2. Log in to the DanubeData dashboard 3. Go to **Static Sites** > **Create Static Site** 4. Enter a name, choose the **Free** plan, select **ZIP Upload** 5. Click **Create Static Site** 6. On the site detail page, click **Upload** and select your ZIP file 7. Wait 1-2 minutes for the build to complete 8. Your site is live at `https://{slug}.pages.danubedata.ro` ### Option B: Git repository (for ongoing updates) 1. Create a Git repository (e.g., on GitHub) and push your files 2. In the DanubeData dashboard, create a new static site with **Git Repository** deployment 3. Enter your repository URL and branch 4. Set the **Publish directory** to `/` (or wherever your `index.html` is) 5. Set up a webhook for automatic deploys on push Now every time you update your files and push, the site redeploys automatically. ### Option C: CLI push (for scripting) ```bash tar -czf site.tar.gz -C ./my-site . curl -X POST \ -H "Authorization: Bearer YOUR_API_TOKEN" \ -F "file=@site.tar.gz" \ https://api.danubedata.ro/api/v1/static-sites/{site-id}/deploy ``` ## Tips for better AI-generated websites ### Be specific about design Bad: "Make me a website" Good: "Create a portfolio site with a dark navy background, white text, blue accent links, 3 project cards in a grid, and a sticky navigation bar" ### Request a single HTML file For the simplest deployment, ask for everything in one file: "Create this as a **single HTML file** with all CSS inline in a `