# Eleventy (11ty) hosting

Host an Eleventy (11ty) site: build it, and npx lobsite deploys _site/, uploading only the files that changed. Free to try with no account, HTTPS included.

On the web at https://lobsite.com/hosting/eleventy

```sh
npx @11ty/eleventy && npx lobsite
```

Eleventy builds into _site/, and npx lobsite finds it and deploys it.

Eleventy (11ty) takes your templates and Markdown and writes plain HTML to `_site/`, with no client-side framework unless you add one. A folder of plain files is the easiest thing to host: run the build, then `npx lobsite`, and the site is live at a `*.lobsite.app` address with HTTPS. You can also drop `_site/` in the box above.

## How it works

1. **Build the site** with `npx @11ty/eleventy` (or your `npm run build`). Eleventy writes it to `_site/`.
2. **Run `npx lobsite`** in the project. It finds `_site/` and deploys it. The first deploy needs no account and lasts 6 hours.
3. **Keep it** with the claim link, in a free account. The folder is saved in `lobsite.toml`, so later deploys go to the same site.

## Eleventy settings that matter on Lobsite

```js
// eleventy.config.js
export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("img");
  eleventyConfig.addPassthroughCopy("css");
}

export const config = {
  dir: { input: "src", output: "_site" },
};
```

- **Passthrough copy** is how images, fonts and CSS reach `_site/`. A file that isn't a template and isn't copied won't be deployed, so if something is missing on the live site, check it's in `_site/` first.
- **`pathPrefix`** stays at `/`: the site is served from the top of its address.
- **The output folder** can stay `_site`. If you change it, pass the folder once (`npx lobsite ./dist`) and it's remembered in `lobsite.toml`.

## Permalinks, images and stale files

Eleventy writes `about.md` as `about/index.html`, which opens at `/about/`; a permalink ending in `.html` opens without the extension. Images processed by `@11ty/eleventy-img` are written during the build, so they deploy like any other file, and unchanged images aren't uploaded again. Like most generators, Eleventy doesn't empty `_site/` before a build: a page you renamed leaves its old file behind. Delete `_site/` before building (many starters do it in the `build` script) to deploy only the current pages.

## Eleventy hosts compared

| | Lobsite | Netlify | Cloudflare Pages | GitHub Pages |
|---|---|---|---|---|
| Builds Eleventy for you | No: you deploy `_site/` | Yes | Yes | In GitHub Actions |
| Account before the first deploy | No: live 6 hours, then keep it free | Yes | Yes | Yes, and a repository |
| Only changed files upload | Yes | Yes | Yes | Through Git |
| Preview URL for every deploy | Yes | Yes | Yes | No |
| Forms without a backend | Yes, once the site is in an account | Yes | No | No |
| Custom domain | Yes, free | Yes | Yes | Yes |

Netlify has long been the default home for Eleventy sites, and builds from Git. Lobsite suits you when you build locally or in CI and want the result online in one command, from a terminal or an AI agent, with nothing to configure.

## Frequently asked questions

### Is 11ty the same as Eleventy?

Yes. 11ty is Eleventy's short name, and the package is `@11ty/eleventy`. Everything on this page applies to both names.

### Why are my images missing on the deployed Eleventy site?

They probably aren't in `_site/`. Add a passthrough copy for the folder (`eleventyConfig.addPassthroughCopy("img")`), build again and deploy.

### Does Eleventy's serverless or edge rendering work on Lobsite?

No. Lobsite serves the files in `_site/`; features that render pages per request need a host that runs functions. Pages built ahead of time, which is most Eleventy sites, all work.

### Can I give my Eleventy site a custom 404 page?

Yes. Make a template with `permalink: 404.html`; Lobsite serves it with a 404 status for any address that doesn't exist.