Logo

dev-resources.site

for different kinds of informations.

Set up Eleventy with Bun

Published at
11/19/2023
Categories
tutorial
javascript
webdev
eleventy
Author
franciscornejog
Author
15 person written this
franciscornejog
open
Set up Eleventy with Bun

If you do not already have bun installed, install bun here for different ways to install.

In your terminal, we create a new project and hop in.
bun init will create a package.json file for you.

mkdir new-project
cd new-project
bun init
Enter fullscreen mode Exit fullscreen mode

Now we install Eleventy as a dev dependency.

bun add --dev @11ty/eleventy
Enter fullscreen mode Exit fullscreen mode

We create a file to try out.

echo '<h1>Hello World!</h1>' > index.html
Enter fullscreen mode Exit fullscreen mode

Compile and run Eleventy to generate a static file.

bunx @11ty/eleventy
Enter fullscreen mode Exit fullscreen mode

You should be able to see a new directory, _site, that contains your generated file.

How about we start up a hot-reloading local web server?

bunx @11ty/eleventy --serve
Enter fullscreen mode Exit fullscreen mode

Go to http://localhost:8080/ to see your file live!
You can make changes and save your file for your browser to auto-reload and see your new updates.

Learn more from the following resources.

eleventy Article's
30 articles in total
Favicon
Upgrading to Eleventy v3.0 (beta)
Favicon
Eleventy - Is it time to upgrade to version 3?
Favicon
Type-Safe Eleventy Data Cascade Access with TSX and Preact Hooks
Favicon
Making Eleventy Data Traceable with TSX and Zod
Favicon
How to connect Eleventy and Storyblok
Favicon
Eleventy - Create a global production flag
Favicon
Importing posts from an RSS feed with Eleventy
Favicon
Otro Hacktoberfest mรกs
Favicon
Set up Eleventy with Bun
Favicon
Eleventy and Storyblok โ€” My perfect combination
Favicon
How to make a PWA out of your Eleventy site
Favicon
Setting active state on navigation with Eleventy
Favicon
Eleventy Style Guide Generator โ€“ Step by Step guide adding to an existing site
Favicon
Pulling WordPress Post Categories & Tags Into Eleventy
Favicon
Use TailwindCSS with Eleventy Static Site Generator
Favicon
Eleventy Style Guide Generator with WebC Component Support
Favicon
Eleventy (11ty) vs. Gatsby in 2023 โ€“ which SSG is best for you?
Favicon
Eleventy (11ty) vs. Astro
Favicon
Speaking at Eleventy Meetup
Favicon
CloudCannon.com is now built with Eleventy!
Favicon
Eleventy/Figma Plugin Template
Favicon
Adding search to an Eleventy site
Favicon
Migrating from Jekyll to Eleventy
Favicon
Extracting and using Critical CSS on my Eleventy site
Favicon
Adding a Table of Contents to dynamic content in 11ty
Favicon
A Step-by-Step Guide to Sorting Eleventy Global Data Files by Date
Favicon
Static Site Generator (SSG) Visions, Roadmaps, and Trajectories: What to Watch in 2023
Favicon
Automating Advent Calendar with Github Actions and Eleventy
Favicon
23 of the best Eleventy Themes (Starters) for 2023
Favicon
11 Top Eleventy Blog Themes (Starters) for 2023

Featured ones: