Static Site Generators + AI

Static site generators (SSGs) compile templates, Markdown, and data into plain HTML files at build time. When you combine them with AI tools, you get the best of both worlds: AI handles the content creation, template design, and ongoing maintenance while the SSG produces fast, secure static files that run perfectly on shared hosting. This guide covers the most popular SSGs, how to use AI with each one, and how to deploy the output to Ultra Web Hosting.

What Are Static Site Generators?

A static site generator is a tool that takes source files — typically Markdown content, HTML templates, and configuration — and compiles them into a complete website made of plain HTML, CSS, and JavaScript files. The "generation" happens on your local computer at build time, not on the server when a visitor arrives.

Here is what makes SSGs special:

Output is pure HTML/CSS/JS. The build process produces a folder of static files. There is no server-side processing, no database, and no runtime dependency. The web server just sends files to visitors — the fastest, most efficient thing it can do.
Perfect for shared hosting. Since the output is just files, you do not need Node.js, Ruby, Go, or any other runtime installed on the server. Every Ultra Web Hosting plan serves static files out of the box.
No WordPress vulnerabilities. There is no database to get hacked, no admin login to brute-force, no plugins with security holes. Your site is a collection of files that cannot be exploited through the usual attack vectors.
Content stays organized. SSGs let you write content in Markdown files with metadata (frontmatter), keep templates separate from content, and use data files to avoid repetition. This makes it easy to manage sites with dozens or hundreds of pages.
Build once, serve forever. The server does zero work per request. Pages load almost instantly because there is nothing to compute — the HTML is already built and ready to send.

How does this differ from hand-coding HTML? With pure HTML, you write every page from scratch and repeat things like headers, footers, and navigation on every page. With an SSG, you write the header once in a template, write your content in simple Markdown files, and the generator assembles everything into complete HTML pages. When you need to change the navigation, you edit one template file and rebuild — every page updates automatically.

Why Combine SSGs with AI?

Static site generators are powerful, but they have a learning curve. You need to understand the template language, the directory structure, the build process, and often some command-line basics. AI tools eliminate most of that friction.

AI Generates the Content

The biggest time sink in building a website is writing the content. AI can generate blog posts, product descriptions, documentation pages, FAQ sections, and landing page copy in minutes. With an SSG, you save that content as Markdown files and the generator handles the rest.

AI Writes the Templates and Styling

Instead of learning Nunjucks, Liquid, or Go templates from scratch, you describe what you want to an AI coding tool and it creates the templates, CSS, and configuration for you. You get a fully functional SSG project without memorizing template syntax.

AI Maintains and Updates the Site

Need to add a new section to every page? Change the color scheme? Restructure the navigation? Describe the change to your AI tool and it edits the correct template or content files. This is where SSGs and AI really shine together — one template change propagates to every page on rebuild.

You Get Speed and Security for Free

No matter how the content was created, the output is always plain HTML. Your visitors get the fastest possible page loads. Your server stays secure because there is nothing to exploit. The AI does the creative work; the SSG does the engineering work; the hosting just serves files.

Real-world example: The site you are reading right now — docs.ultrawebhosting.com — was built this way. AI generated the HTML, CSS, JavaScript, and all of the content. The output was uploaded to a standard shared hosting account. No CMS, no database, no server-side processing. Just fast, static files.

Popular Static Site Generators

Each SSG has different strengths. Here are the most popular options and how they work with AI tools.

Hugo

Hugo is written in Go and is the fastest SSG available. It can build a site with thousands of pages in under a second. It uses Markdown for content and Go templates for layouts.

Best for: Blogs, documentation sites, portfolios, and any site with a lot of pages.
Content format: Markdown files with YAML or TOML frontmatter.
Template language: Go templates (powerful but less intuitive than alternatives).
Build command: hugo build
Output directory: public/
Install: Download a single binary from gohugo.io — no dependencies required.

AI tools like Claude Code can generate Hugo templates, content files, and configuration. The Go template syntax can be tricky, so having AI write it for you is a significant time saver.

Eleventy (11ty)

Eleventy is a Node.js-based SSG that is intentionally simple and flexible. It supports multiple template languages and requires minimal configuration, making it the most beginner-friendly option.

Best for: Beginners, small-to-medium sites, and developers who want full control without opinions.
Content format: Markdown, HTML, Nunjucks, Liquid, and more.
Template language: Nunjucks (most common), Liquid, or plain JavaScript.
Build command: npx @11ty/eleventy
Output directory: _site/
Install: Requires Node.js. Run npm install @11ty/eleventy in your project.

Eleventy is the SSG we recommend for AI-assisted workflows because of its simplicity. There is very little boilerplate, so AI-generated projects are clean and easy to understand.

Astro

Astro is a modern framework that outputs static HTML by default but can include interactive components from React, Vue, Svelte, or other frameworks when needed. It ships zero JavaScript to the browser unless you explicitly opt in.

Best for: Content-heavy sites that need some interactivity, developers familiar with component frameworks.
Content format: Markdown, MDX, or Astro components.
Template language: Astro components (similar to JSX), plus React/Vue/Svelte for interactive islands.
Build command: npm run build
Output directory: dist/
Install: Requires Node.js. Run npm create astro@latest to scaffold a project.

Astro is a great choice when you want mostly static pages but need interactive elements (like a search widget, image carousel, or form with client-side validation) on some pages.

Jekyll

Jekyll is the original static site generator, written in Ruby. It popularized the concept of Markdown content with YAML frontmatter and is still widely used, especially with GitHub Pages.

Best for: Blogs, personal sites, and projects already using Ruby or GitHub Pages.
Content format: Markdown with YAML frontmatter.
Template language: Liquid templates.
Build command: jekyll build
Output directory: _site/
Install: Requires Ruby. Run gem install jekyll bundler.

Jekyll pairs well with GitHub Pages for free hosting, but works equally well on any shared hosting — build locally and upload the _site/ directory.

Next.js (Static Export)

Next.js is a React framework that can generate pure static HTML when you set output: 'export' in the configuration. This gives you the React development experience with a static output that works on any hosting.

Best for: Developers already comfortable with React, or sites that may need server features later.
Content format: React components, Markdown via plugins.
Template language: JSX (React).
Build command: npm run build
Output directory: out/
Install: Requires Node.js. Run npx create-next-app@latest.

Which one should you pick? If you are new to SSGs and want the simplest path, start with Eleventy. If you want the fastest builds and plan to have hundreds of pages, choose Hugo. If you want interactive components mixed with static pages, go with Astro. All of them produce the same end result: a folder of HTML files you upload to your hosting account.

Using AI to Generate Content for Your SSG

The core workflow is simple: you ask AI to create content in the right format, save the output as files in your SSG project, and run the build command. Here is how to do each part.

Generating Markdown Blog Posts

Most SSGs expect content as Markdown files with YAML frontmatter — a block of metadata at the top of the file. AI tools can produce these perfectly if you tell them the format.

Here is an example prompt:

Write a blog post in Markdown format with YAML frontmatter (title, date,
description, tags) about the benefits of static websites for small
businesses. Use proper heading hierarchy (h2 and h3, not h1). Include
practical examples and code snippets where relevant. Keep it around
1,000 words.

The AI produces output like this:

---
title: "Why Static Websites Are Perfect for Small Businesses"
date: 2026-04-15
description: "Static websites load faster, cost less to host, and are virtually unhackable. Here is why they are the smart choice for small business owners."
tags:
  - static-sites
  - small-business
  - web-performance
---

## Speed That Converts Visitors into Customers

Your website's loading speed directly affects your bottom line. Studies
show that 53% of mobile visitors leave a page that takes longer than
three seconds to load. Static websites load in under one second because
there is nothing to compute — the server sends a pre-built HTML file
directly to the browser.

## Security Without the Headaches

WordPress sites are targeted by automated attacks millions of times per
day. Static sites eliminate the entire attack surface ...

Save this output as a .md file in your content directory (for example, posts/static-sites-for-business.md in Eleventy or content/posts/static-sites-for-business.md in Hugo). When you rebuild the site, the SSG turns it into a complete HTML page using your template.

Generating Entire Site Templates

AI coding tools like Claude Code and Cursor can scaffold an entire SSG project from a single description. Instead of generating one file at a time, the AI creates the full directory structure, templates, configuration, and sample content.

Here is an example prompt for Claude Code or Cursor:

Create an Eleventy blog with:
- A homepage showing the 10 most recent posts with excerpts
- A blog listing page with all posts
- Individual post pages with reading time and prev/next navigation
- An about page and a contact page
- A base layout template with a responsive dark theme using navy blue
  and white
- An RSS feed and a sitemap
- A .eleventy.js config file with proper passthrough for CSS and images
- Three sample blog posts in Markdown with frontmatter
- A css/style.css file with the complete styling

The AI creates every file, properly linked and configured. You run npx @11ty/eleventy --serve to preview the site locally, then build and upload when you are happy with it.

Tip: When asking AI to scaffold an SSG project, always specify the SSG by name and mention the template language you want. Saying "create an Eleventy site using Nunjucks templates" produces much better results than "create a static site."

Ongoing Content Generation with AI

Once your site is set up, adding new content follows a simple loop:

Write a prompt describing the content you need.
AI generates a Markdown file with proper frontmatter.
Save the file to your content directory.
Run the build command.
Upload the output to your hosting account.

You can semi-automate this with a simple shell script. Here is an example that builds an Eleventy site and uploads it via SFTP in one command:

#!/bin/bash
# build-and-deploy.sh
# Builds the site and uploads to Ultra Web Hosting

# Step 1: Build the site
echo "Building site..."
npx @11ty/eleventy

# Step 2: Upload to server via lftp
echo "Deploying to server..."
lftp -u your-username,your-password sftp://your-server.ultrawebhosting.com <<DEPLOY
mirror --reverse --delete --verbose _site/ /public_html/
bye
DEPLOY

echo "Done! Site is live."

Warning: Never hard-code passwords in scripts you share or commit to version control. Use environment variables or an .lftp/rc config file to store credentials securely. The script above is simplified for clarity.

Building Your First AI-Powered Static Site

This walkthrough uses Eleventy because it has the gentlest learning curve. The same concepts apply to any SSG — only the commands and directory names change.

Install Node.js. Download and install Node.js from nodejs.org. Choose the LTS (Long Term Support) version. This gives you the node and npm commands you need to run Eleventy.
Create your project. Open a terminal and run:
```
mkdir my-site
cd my-site
npm init -y
npm install @11ty/eleventy
```
This creates a new project folder with Eleventy installed.

Generate a base template with AI. Open your AI coding tool (Claude Code, Cursor, or a chatbot) and ask it to generate a Nunjucks layout template:

Create an Eleventy base layout template at _includes/layout.njk with
a responsive design. Include a sticky header with site title and
navigation links (Home, About, Blog, Contact), a main content area,
and a footer. Use a clean, modern design with system fonts. Put the
CSS in css/style.css. Make the navigation collapse to a hamburger
menu on mobile.

Save the generated files to your project.

Generate content pages with AI. Ask the AI to create your main pages:

Create the following Eleventy Markdown pages, each using layout: layout.njk
in the frontmatter:
- index.md (homepage with a welcome message and overview)
- about.md (about page with placeholder company info)
- contact.md (contact page with email and a note about business hours)
Each file should have title and description in the YAML frontmatter.

Save each file to your project root.

Create a config file. Ask the AI to generate an .eleventy.js configuration file that passes through your CSS directory and sets the output folder. Save it to the project root.
Build the site. Run the build command:
```
npx @11ty/eleventy
```
Eleventy processes your templates and Markdown files and outputs complete HTML pages to the _site/ directory. You can also run npx @11ty/eleventy --serve to start a local development server with live reload at http://localhost:8080.
Upload to Ultra Web Hosting. The _site/ directory now contains your entire website as plain HTML files. Upload its contents (not the _site folder itself) to your public_html directory using FileZilla or cPanel File Manager.
Visit your domain. Open your browser and go to your domain. Your AI-generated, statically-built site is live.

The build step is the key difference. Unlike a pure HTML site (where you upload the files you wrote), an SSG site has a build step that compiles your source files into the final output. You always upload the output directory, never the source files. Your source files — templates, Markdown, config — stay on your local machine.

Deploying Static Sites to Ultra Web Hosting

The deployment process is the same regardless of which SSG you use. You build locally, then upload the output. Here are three methods, from simplest to most automated.

Method 1: Manual Upload

Build your site locally, then upload the output directory contents to public_html using FileZilla or cPanel File Manager.

Run your SSG's build command (hugo build, npx @11ty/eleventy, npm run build, etc.).
Open FileZilla or cPanel File Manager.
Navigate to public_html on the server (or your addon domain's document root).
Upload everything inside the output directory (public/, _site/, dist/, or out/) to public_html.
Visit your domain to verify the site is live.

Warning: Upload the contents of the output directory, not the directory itself. If you upload the _site folder, your files end up at public_html/_site/index.html instead of public_html/index.html, and your site will not load at your domain. The files need to be directly inside public_html.

Method 2: VS Code SFTP Extension

If you use VS Code, Cursor, or Windsurf, you can configure the SFTP extension to sync your build output directory directly to the server. This lets you build and deploy without leaving your editor.

Configure the SFTP extension to watch your output directory and upload changes automatically. For a complete setup guide, see AI-Assisted FTP Deployment.

Method 3: Deploy Script

Write a script that builds and uploads in one command. Here is an example using lftp, which supports SFTP and can mirror an entire directory:

#!/bin/bash
# deploy.sh - Build and deploy an Eleventy site to Ultra Web Hosting

set -e

echo "Building site..."
npx @11ty/eleventy

echo "Uploading to server..."
lftp sftp://$DEPLOY_USER:$DEPLOY_PASS@$DEPLOY_HOST <<EOF
mirror --reverse --delete --verbose _site/ /public_html/
bye
EOF

echo "Deployment complete."

Set the DEPLOY_USER, DEPLOY_PASS, and DEPLOY_HOST environment variables in your shell profile or a local .env file (never commit this file to git). Then run bash deploy.sh to build and deploy in one step.

Tip: Adapt the script for any SSG by changing the build command and the output directory. For Hugo, replace npx @11ty/eleventy with hugo build and _site/ with public/. For Astro or Next.js, use npm run build and dist/ or out/.

Important Deployment Notes

Upload output, not source. Your Markdown files, templates, and configuration stay on your local machine. Only the compiled HTML/CSS/JS goes to the server.
Files go into public_html. For your primary domain, upload to public_html. For addon domains, upload to that domain's document root directory.
Use version control. Keep your source files (Markdown, templates, config) in a git repository. This gives you a complete history of every change, the ability to roll back mistakes, and an easy way to collaborate or move between computers.
The server does not need Node.js, Ruby, or Go. Those tools run on your local machine during the build. The server just needs to serve HTML files, which every Ultra Web Hosting plan does out of the box.

Maintaining Your Site with AI

One of the biggest advantages of the SSG + AI workflow is how easy it is to maintain your site over time. Here are common maintenance tasks and how to handle them.

Adding New Content

This is the most frequent task. Tell your AI tool what you need:

Write a new blog post in Markdown with YAML frontmatter about
[your topic]. Match the tone and style of my existing posts.
Use h2 and h3 headings, include practical examples, and keep
it around 800 words.

Save the Markdown file to your content directory, rebuild, and upload. The SSG automatically adds it to your blog listing, RSS feed, and sitemap.

Redesigning the Site

Because SSGs separate content from presentation, you can redesign your entire site by changing the templates and CSS without touching any content files.

Update my Eleventy layout template and CSS to use a light theme
with a white background, dark gray text, and teal (#0d9488) as the
accent color. Keep the same layout structure but modernize the
typography using the Inter font family.

The AI rewrites your template and stylesheet. You rebuild, and every page on the site gets the new design instantly.

Updating Existing Content

Open the relevant Markdown file and describe the change:

Update the pricing section in services.md to show the new
pricing: Basic plan is $9.99/month, Pro plan is $24.99/month,
Business plan is $49.99/month. Update the feature lists for
each tier accordingly.

The AI edits the file, you rebuild and upload. Done.

Bulk Content Generation

SSGs handle large volumes of pages efficiently. AI can generate content at scale:

Location pages. "Generate 20 Markdown pages for a plumbing company, one for each city they serve in the Dallas-Fort Worth area. Each page should have unique content about plumbing services in that specific city, with the city name in the title and description frontmatter."
Product pages. "Generate a Markdown page for each item in this product list: [paste list]. Include the product name, description, price, and features in the frontmatter and a detailed product description in the body."
FAQ pages. "Generate 15 FAQ entries as individual Markdown files with question as the title and answer as the body content. Topic: web hosting for beginners."

This is where the SSG + AI combination is dramatically faster than any other approach. Generating 20 location pages by hand could take days. With AI, it takes minutes. With an SSG, they all share the same template and design automatically.

Tip: When generating bulk content, ask the AI to make each page genuinely unique rather than just swapping in a city name or product name. Search engines penalize thin, duplicate content. Give the AI enough context to write substantive, differentiated copy for each page.

Static Sites vs WordPress vs Pure HTML

There are three main approaches to building a website on shared hosting. Each one has clear strengths depending on your situation.

Static Site Generators

Build process: Write content in Markdown, build locally, upload HTML output.
Speed: Extremely fast. Pre-built HTML with no server processing.
Security: Excellent. No database, no server-side code, minimal attack surface.
AI compatibility: Excellent. AI generates Markdown content and templates naturally.
Version control: Perfect fit. Source files are plain text that works great with git.
Maintenance: Low. No updates, no patches, no plugin conflicts.
Content editing: Requires rebuilding and re-uploading after changes.
Best for: Developers, AI-assisted workflows, blogs, documentation, marketing sites, and any project with more than 5-10 pages.

WordPress

Build process: Install via Softaculous, edit in browser.
Speed: Slower. Every page is generated dynamically from a database.
Security: Requires vigilance. Regular updates needed for core, themes, and plugins.
AI compatibility: Limited. AI can help write content, but cannot easily manage themes or plugins.
Version control: Difficult. Content lives in a database, not in files.
Maintenance: Ongoing. Updates, backups, and security monitoring required.
Content editing: Easy for non-technical users via the visual editor.
Best for: Non-technical editors, blogs with multiple authors, online stores (WooCommerce), membership sites.

Pure HTML (No SSG)

Build process: Write HTML directly, upload files.
Speed: Extremely fast. Same as SSG output — just static files.
Security: Excellent. Same as SSG — no server-side code.
AI compatibility: Good. AI generates complete HTML pages easily.
Version control: Works, but lots of duplicated code across pages.
Maintenance: Tedious at scale. Changing the navigation means editing every page.
Content editing: Edit HTML files directly. Simple but error-prone for non-developers.
Best for: Small sites with 1-5 pages, landing pages, and quick projects. See Building Websites with AI for this approach.

The sweet spot for SSGs: If your site has more than 5-10 pages and you want the speed and security of static files with the organization of a CMS, a static site generator is the right choice. You get templates (so you do not repeat yourself), Markdown content (so writing is pleasant), and pure HTML output (so hosting is dead simple). Below 5 pages, pure HTML is simpler. Above that, the template system pays for itself immediately.

Quick Reference: SSG Build Commands and Output Directories

Here is a cheat sheet for all the SSGs covered in this guide. In every case, you upload the contents of the output directory to public_html.

SSG              Build Command                   Output Directory
-----------      ---------------------------     ----------------
Hugo             hugo build                      public/
Eleventy         npx @11ty/eleventy              _site/
Astro            npm run build                   dist/
Jekyll           jekyll build                    _site/
Next.js          npm run build                   out/

Tip: Regardless of which SSG you choose, the hosting side is always the same: upload HTML files to public_html. Ultra Web Hosting does not care how those files were generated. Whether you wrote them by hand, had AI generate them, or compiled them with an SSG, they are all just files. The server serves them the same way, instantly and reliably.

Ready to start? Install Node.js, create an Eleventy project, and ask your AI tool to generate a template and some content. Build the site with npx @11ty/eleventy, upload the _site/ contents to public_html via FileZilla or cPanel File Manager, and your AI-powered static site is live. For help with the upload step, see AI-Assisted FTP Deployment. For a simpler approach without a build step, see Building Websites with AI.