- Version 10.0.1
- Project Flyweb Production
- Section blog
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 ;-)
The FLY-11ty Starter Kit can be found on github.
A Demo can be found here - https://brachycera.github.io/fly-11ty
With the provided
npm commands from the Boilerplate, Eleventy will search the
/src folder for any
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
All the created files can be found in the
Out of the Box the Starter Pack provides:
- HTML Metatags
- ServiceWorker with Workbox
- RSS Feed
- Sitemap for SEO
- Article Tags
- Syntax Highlighting
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
- minify HTML/JS/CSS
- WorkBox (ServiceWorker)
To create a custom Layout the Boilerplate comes integrated with TailwindCSS framework. The main CSS-Stylesheet can be found in
Nunjucks Templates are used to create the HTML files. All Templates can be found in
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.