Tugboat is a modern starter project for building static websites with Eleventy and WebC, combining Eleventy's static site generation with WebC's single-file component authoring model. It is actively maintained and published with a live demo at https://tugboat.11ty.dev/, though the repository banner flags it as under construction.
What is Tugboat?
Tugboat is a boilerplate or starter template that pairs the Eleventy static site generator with WebC, Eleventy's component framework for creating web components. It takes the Eleventy build system as its foundation and adds a set of WebC components, such as semantic heading components (h2–h4.webc), a table of contents, and an accessible emoji component, so developers can start a new site with a component-driven architecture out of the box.
Key Features
- Eleventy + WebC — Built on Eleventy and utilizes WebC components for templating, giving developers a modern component workflow without a heavy client-side framework.
- Table of contents — The starter includes a table of contents component, which appears in the repository's TODO list as an area that may require updates when heading anchors are integrated.
- Heading components — Provides h2–h4.webc components that enforce consistent heading structure; the TODO plan calls for connecting them to the heading-anchors plugin by zachleat.
- Accessible emoji component — Ships with an accessible-emoji component for rendering emoji accessibly, though the roadmap plans to switch this to the eleventy-plugin-font-awesome package.
- Live demo — A working demo is hosted at https://tugboat.11ty.dev/, allowing you to see the default output before customizing.
- Open roadmap — The repository includes a TODO list that outlines concrete next steps, including adopting heading anchors and Font Awesome icons.
Who is it for?
- Eleventy developers who want a starting point that already uses WebC for components, saving time on initial setup.
- Technical writers and documentation maintainers who need a static site with a built-in table of contents and clean heading hierarchy for long-form guides.
- Developers exploring WebC can use Tugboat as a real-world reference implementation to see how WebC components, accessible emoji, and table of contents are structured in a small project.
What can you do with Tugboat?
- Launch a new static site — Clone the repository, run the Eleventy build, and customize the WebC components and content to fit your project.
- Build a documentation site — Leverage the table of contents and heading components to organize pages and sections without writing the navigation logic from scratch.
- Prototype a component library — Use the included WebC components as a pattern for building and reusing template snippets across pages.
