Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/voightco/micro-site
Opinionated 11ty micro front-end that can be used to create a one-pager.
https://github.com/voightco/micro-site
11ty eleventy nunjucks postcss static-site static-site-generator
Last synced: 7 days ago
JSON representation
Opinionated 11ty micro front-end that can be used to create a one-pager.
- Host: GitHub
- URL: https://github.com/voightco/micro-site
- Owner: voightco
- License: mit
- Created: 2019-08-12T11:53:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T20:47:01.000Z (over 1 year ago)
- Last Synced: 2024-10-31T11:51:34.011Z (14 days ago)
- Topics: 11ty, eleventy, nunjucks, postcss, static-site, static-site-generator
- Language: HTML
- Homepage: https://voight-microsite.netlify.app
- Size: 1.01 MB
- Stars: 44
- Watchers: 2
- Forks: 4
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
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)][11ty] under the hood and sets _common 11ty defaults_.
## Features ✨
* Inlines and minifies CSS using [`clean-css`][css]
* Inlines and minifies JavaScript using [`terser`][terser]
* Includes a `metadata.json` [global data file][data]
* Includes a `base.njk` [layout template][layout]
* Includes a `assets folder` for [static files][copy] (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.
## Usage
1. Update the `metadata.json` file with your own site details
2. Edit the `index.njk` file and start coding your website!
3. _Optional:_ [Deploy the site][deploy] to Netlify.
## Install
> Requires node.js and npm
Follow these steps to get started:
1. Clone the project
```
$ git clone https://github.com/systemdes/micro-site.git
```
2. Install the dependencies for this projects
```
npm i
```
3. Then do
```
npm run dev
```
to start the live-reloadzz on a local development server.
## Project Structure
```
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
```
## Roadmap
- [ ] Image optimization with `eleventy-image`
- [ ] Asset caching with `eleventy-cache-assets`
- [ ] Syntax highlighting support with `eleventy-plugin-syntaxhiglight`
## License
[MIT][license] © [Danny de Vries][author]
[11ty]: https://www.11ty.io/]
[nunjucks]: https://mozilla.github.io/nunjucks/
[deploy]: https://app.netlify.com/start/deploy?repository=https://github.com/voightco/micro-site
[css]: https://github.com/jakubpawlowicz/clean-css
[terser]: https://github.com/terser/terser
[data]: https://www.11ty.dev/docs/data/
[layout]: https://www.11ty.dev/docs/layouts/
[copy]: https://www.11ty.dev/docs/copy/
[author]: https://github.com/dandevri
[license]: license