Opinionated micro front-end that can be used to create a one-pager. Great for landing pages or sign-up pages. It uses the static site generator Eleventy (11ty) under the hood and sets common 11ty defaults.
- Inlines and minifies CSS using
clean-css - Inlines and minifies JavaScript using
terser - Includes a
metadata.jsonglobal data file - Includes a
base.njklayout template - Includes a
assets folderfor static files (images, fonts etc.)
This is a *skeleton project so it doesn't include any components or basic styling. It's a *bring your own front-end.
- Update the
metadata.jsonfile with your own site details - Edit the
index.njkfile and start coding your website! - Optional: Deploy the site to Netlify.
Requires node.js and npm
Follow these steps to get started:
- Clone the project
$ git clone https://github.com/systemdes/micro-site.git
- Install the dependencies for this projects
npm i
- Then do
npm run dev
to start the live-reloadzz on a local development server.
micro-site/
├── _site/ // output folder of 11ty
├── _data/
│ └── metadata.json // metadata for the website
├── _includes/
│ ├── style.css // minified and inlined
│ ├── script.js // minified and inlined
│ └── base.njk // base layout
├── assets/ // passtrough copy
├── index.njk/ // landing page
└── .eleventy.js // 11ty configurations
- Image optimization with
eleventy-image - Asset caching with
eleventy-cache-assets - Syntax highlighting support with
eleventy-plugin-syntaxhiglight