zachleat.com

zachleat.com is the open-source codebase behind the personal website of Zach Leatherman, powered by the Eleventy static site generator and the WebC component format. The repository provides a complete, real-world example of a blog/personal site with SCSS styling, webmentions support, and a local development workflow built on Node.js. For developers evaluating Eleventy or WebC, this codebase shows how a production site combines these tools with a simple npm-based setup.

What is zachleat.com (template)?

zachleat.com is the source code that generates Zach Leatherman's personal website, built with Eleventy (a static site generator that runs on Node.js) and WebC (a component-based authoring format for web components). It takes content in the form of templates and markdown pages and outputs a static HTML site. The repository also includes SCSS for styling and a webmentions integration via the WEBMENTION_IO_TOKEN environment variable. The project is maintained by the site owner and is available as an open repository for others to study or reuse.

Key Features (or What makes zachleat.com stand out?)

• Eleventy-based — The site is generated with Eleventy, a fast Node.js static site generator, and requires Node version 12 or higher.
• WebC components — Uses WebC, an Eleventy-native component model, to build reusable UI components for the site.
• SCSS styling — Styles are written in SCSS, a popular CSS preprocessor, and compiled as part of the build.
• Webmention integration — Reads the WEBMENTION_IO_TOKEN environment variable to fetch webmentions, enabling social replies and interactions on posts.
• Local development server — npm start launches a development server at http://localhost:8080/ with built-in reloading.
• Simple setup — Only npm install is required after cloning, assuming Node 12+ is present.
• Migration history — The codebase documents remaining migration items, including a /history/volc/ section and PHP extras from an earlier build.

Who should use zachleat.com (template)?

zachleat.com is a reference implementation for web developers who want to build their own personal sites or blogs with Eleventy and WebC. Eleventy developers can study this codebase to see how a production site configures the generator, organizes templates, and integrates SCSS. WebC learners can see how WebC components are used in a real project instead of a toy example. Bloggers who want webmentions can copy the set-up for the WEBMENTION_IO_TOKEN environment variable to add social feedback to their posts.

Use cases

• Personal site developers: switch from a PHP-based site to a static Eleventy setup by following the migration notes in the repository.
• Component-driven developers: reuse the WebC component approach to break a site's UI into maintainable pieces.
• IndieWeb enthusiasts: implement webmention support on a static site by adopting the environment-variable token pattern shown here.

How does zachleat.com work?

To run the site locally, install dependencies with npm install, start the development server with npm start, and open http://localhost:8080/ in a browser. The build pipeline compiles Eleventy templates and WebC components, processes SCSS, and outputs static files for deployment. The site requires an environment variable named WEBMENTION_IO_TOKEN if you want webmentions to load.

Pros and cons

• Pro: A real, production personal site that demonstrates the stack, not a minimal starter.
• Pro: Setup is quick: Node 12+ and npm install are the only prerequisites.
• Pro: Includes built-in webmention support through an environment variable.
• Con: The codebase still has outstanding migration items, such as /history/volc/ and the PHP extras, so not every part of the old site is represented yet.

FAQ

Does zachleat.com require a specific Node version?

Yes, the repository lists Node 12+ as a prerequisite. You'll need at least Node 12 installed to run npm install and npm start without errors.

How do I start the site locally?

Run npm install once, then npm start. The development server will be available at http://localhost:8080/.

What is the WEBMENTION_IO_TOKEN used for?

It's an environment variable that the site references for webmention functionality. The token is likely used to authenticate requests to webmention.io so that replies to your posts appear on the site.

What migration items are still outstanding?

The README notes that the /history/volc/ section and all the PHP things from the zachleat.com-build-extras repository remain to be migrated. These are parts of the older site that have not been moved into the Eleventy build yet.