FLY-11ty: Boilerplate for Eleventy Static Site Generator

I created a Repository from my Eleventy setup which powers my personal Website

Since this is my first attempt to work with webpack there might be better or more efficient configurations - but this setup worked fine for me ;-)

Repository

The FLY-11ty Starter Kit can be found on github.

https://github.com/brachycera/fly-11ty

A Demo can be found here - https://brachycera.github.io/fly-11ty

Content Creation

With the provided npm commands from the Boilerplate, Eleventy will search the /src folder for any md, njk or html file and will start creating static HTML from these files.

The three available Eleventy commands are:

# debug will tell you exactly what directories Eleventy
# is using for data, includes, input, and output.
$ npm run eleventy:debug
# Automatically run when input template files change.
# Useful if you have your own web server.
$ npm run eleventy:watch
# Boot up a Browsersync web server to apply changes and
# refresh automatically. We’ll also --watch for you.
$ npm run eleventy:serve

Each command is the same as described in the 11ty documentation - https://www.11ty.dev/docs/usage/ and respectively https://www.11ty.dev/docs/debugging/.

All the created files can be found in the /dist folder.

Content Features

Out of the Box the Starter Pack provides:

Development

The FLY-11ty Boilerplate uses the following configuration files which can be edited as needed.

Furthermore are three npm commands to assist while developing a Layout.

$ npm run build
$ npm run dev
$ npm run dev:watch

Development Features

The Webpack Bundler will run these loaders to create the needed CSS, Javascript files.

Layout

To create a custom Layout the Boilerplate comes integrated with TailwindCSS framework. The main CSS-Stylesheet can be found in /src/css/styles.css.

Nunjucks Templates are used to create the HTML files. All Templates can be found in _includes/layout and _includes/partials.

The starting point to add Javascript is the folder /src/js these Javascript files will be compiled with Babel and minified by Webpack.

Epilogue

One of the reasons converting my personal website to static HTML pages, was that feeling a database driven CMS always was a bit of an overkill for my use case. I choose Eleventy as Site Generator which seemed like an interesting option since many people on twitter talked about it. I also wanted to try out Webpack — which so far I only used with Laravel-Mix — as Bundler and Taskrunner.

Eleventy was pretty easy to grasp and the documentation is really helpful. Also the many Starter Projects come in handy to learn from the many different setups.

Surly I only touched the Surface of the many features Webpack provides. But getting up and running is a step learning curve. Since Webpack is so widely used there are a lots of Tutorials, Plugins and Help out there and also the Documentation is very good.
Nevertheless I find Webpack very hard to setup, using the debugger helped a lot but I guess gulp is still my favorite tool for this kind of jobs.