Set up Eleventy with Bun

franciscornejog

Francisco Cornejo Garcia

Posted on November 19, 2023

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.

💖 💪 🙅 🚩
franciscornejog
Francisco Cornejo Garcia

Posted on November 19, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Set up Eleventy with Bun
tutorial Set up Eleventy with Bun

November 19, 2023