Documentation about how KDL sites are developed using a Static Site Generator called 11ty.
You need node.js v16+ & npm installed on your machine.
To install 11ty, run the following command from within alice-thornton folder.
npm ci
To generate the whole static site into the _site folder.
npm run rebuild
To run it as a development server:
npm run serve
Then go to localhost:8080. Each time you modify a source file, 11ty will automatically rebuild the site and refresh it in your browser. .
See https://www.11ty.dev/docs/plugins/
Recommended by KDL:
Relevant to our projects:
- https://www.npmjs.com/package/eleventy-plugin-find
- https://www.npmjs.com/package/@orchidjs/eleventy-plugin-ids
- https://www.npmjs.com/package/eleventy-plugin-html-validate
- https://www.npmjs.com/package/@vidhill/fortawesome-brands-11ty-shortcode
- https://www.npmjs.com/package/@tigersway/eleventy-plugin-ancestry
- https://www.npmjs.com/package/eleventy-plugin-toc
- https://www.npmjs.com/package/eleventy-plugin-nesting-toc
- https://www.npmjs.com/package/eleventy-plugin-plantuml
- https://www.npmjs.com/package/@quasibit/eleventy-plugin-sitemap
Add unclassified tip here first so we don't forget about them, we can relocate them later.
frontend folder contains all the data and code to generate your site:
- _includes: contains liquid templates and fragments
- frontend/_includes/js: contains serve-side javascript (As opposed to client-side, see below)
- assets: contains all the client-side resources loaded by your web pages (css, js, fonts, node_modules, img); the folder is copied as-is to the site.
- _site: where the site is built by 11ty (this folder is disposable)
- _data: global metadata, collections and computed fields
- layout.json: points to the default layout for any page (see _includes folder)
- eleventyComputed.js: computed fields available to every page/layout and fragment
- metadata.json: golbal settings for your site
- _build: to deploy using docker or other methods than npm (currently unused)
...