Give feedback as an early user and get the docs plus a full website free. Code FRIEND: valid on one-time purchases only.
WebsiteroWebsitero

Build your website in 5 minutes

This Eleventy starter ships pre-built sections, a Decap CMS-powered blog, LESS styling, and automatic image optimization via the Sharp plugin, all organized inside src/ using the includes-and-sections pattern.

Before You Start

Make sure you've read the initial setup guide.

See Quick Setup

What We'll Build

1
1 min

Install the Template

Scaffold your Eleventy project from the starter template in one command

2
2 min

Customize Your Site Info

Update your business name, colors, and navigation data

3

Edit the Landing and Interior Pages

Modify the sections in the includes folder

4
1 min

Preview & Deploy

Run the dev server, verify your page, and ship it

1

Install the Template

1 minute

Pull the project straight from the GitHub template using degit.

Scaffold the project

This copies the starter template into a new folder with a clean git history, no extra setup needed.

npx degit websitero-org/Eleventy-Starter my-eleventy-site

Enter the project and start the dev server

cd my-eleventy-site
npm install
npm start

Your site is live locally

Open http://localhost:8080, you should see the full demo landing page from the template.

2

Customize Your Site Info

2 minutes

Two files control all global site data, your business info and your navigation links.

Edit src/_data/client.js

This is the single source of truth for your brand, name, address, SEO metadata, and social links. Replace the placeholder values:

// src/_data/client.js
module.exports = {
  name: "Your Business Name",
  email: "hello@yourdomain.com",
  phoneForTel: "555-555-5555",
  phoneFormatted: "(555) 555-5555",
  address: {
    lineOne: "123 Main Street",
    lineTwo: "",
    city: "New York",
    state: "NY",
    zip: "10001",
    country: "US",
    mapLink: "https://maps.google.com/?q=...",
  },
  socials: {
    facebook: "https://facebook.com/yourhandle",
    instagram: "https://instagram.com/yourhandle",
  },
  // Used for SEO canonical tags and the sitemap
  domain: "https://yourdomain.com",
  isProduction: process.env.ELEVENTY_ENV === "PROD",
};

Also update your navigation in src/_includes/sections/header.html

Edit the anchor links to match your pages. The active link is highlighted automatically by comparing each href against page.url.

<li class="cs-li"><a href="/about/" class="cs-li-link">About</a></li>
3

Edit the Landing Page and Interior Pages

1 minute

The landing page lives at src/index.html and the interior pages live in src/content/pages/. It's composed of pre-built sections you can swap or edit.

Page structure at a glance

Open src/index.html.

See Landing page

Editing a page

Each page is its own .html file inside src/content/pages/. Open any section and edit the text and image paths directly in the markup, no config files needed:

<!-- src/_includes/sections/hero.html -->
<section id="hero">
  <div class="cs-container">
    <div class="cs-content">
      <h1 class="cs-title">Your Headline Here</h1>
      <p class="cs-text">
        A short description of what you do and who you help.
      </p>
      <a href="/contact/" class="cs-button-solid">Get Started</a>
    </div>
    <picture class="cs-picture">
      <img src="/assets/images/hero.jpg" alt="Hero image"
           loading="lazy" decoding="async" width="600" height="400" />
    </picture>
  </div>
</section>

Replace placeholder images

Drop your own images into src/assets/images/ and update the paths in the section files. Eleventy automatically optimizes them with the Sharp image plugin.

Want to see all components in action?

Check out the components showcase page to see live examples of every component with interactive demos.

View Component Library
4

Build & Deploy

1 minute

Run a production build and deploy to any static host in seconds. See Deployment Guide

Build for production

npm run build

Output goes to public/. Preview it locally with npm start.