This is an Eleventy project powered by Netlify CMS.
The project root has a bunch of config files for linters, eleventy and netlify itself.
The source is the heart of the project. It contains everything Eleventy needs to build the website. As eleventy is a directory site generator: it moves files, transforming some, you can just place Nunjucks templates, HTML or Markdown and Eleventy will perform it's magic.
The _data
folder is a global data store that is composed of JSON
and js
files. You can access this data on all templates.
The _includes
folder should contain layouts and re-usable stuff.
Directories prefixed by _
means that they are not directly procesed by Eleventy.
admin
is Netlify stuff. This directory is just copied over with no transformations.
articles
is where all the Markdown generated by Netlify goes to.
images
. That's it. In the future I'll be running imgmin or something over them.
styles
. It's has an index.css
entrypoint, all styles on here are used by Eleventy. This is all processed with PostCSS so it's
pretty familiar. Import stuff on it and you are good to go.
scripts
. Javascript! Use it sparingly and go for progressive enhancement. Webpack runs @babel/preset-env
over it so it runs on older browsers and that's it.
static
. All files here are copied to the root of the output directory. Stuff like PWA manifests, robots and favicons go here. To the root of the output directory, so static
is ommited from the output path. I warned you.
Eleventy deals with templates. PostCSS with CSS. Webpack with JS. They are 3 different processes that are executed in parallel both at the build and dev processes.
During dev a light-server
is used to mantain the 3 processes. Every change to the dist
folder (yes the dist folder), reloads the browser. Why the dist
folder? So when PostCSS, Webpack or Eleventy post updates to the output folder your browser refreshes. See? Magic.
In case stuff doesn't update just reboot the dev-server. Bad advice but feel free to improve the stability of the dev-server.
The usual. bin/setup
, bin/server
, bin/build
do the obvious. All the scripts are specified on the package.json
. The bin
folder just contains some nice abstractions.
The dev server runs on port 4000, so access it like so, via localhost.