Yet another 11ty boilerplate to start a new website with optional blog. This boilerplate is based on eleventy-base-blog et al.
MIT License
./src/styles
folder and then will be passed through copy (see .eleventy.js
) to the new site created under ./dist/
. For Netlify users, an alternative option with plugins is explained here: https://css-tricks.com/making-my-netlify-build-run-sass/.<figure>
, <picture>
and native lazy loading.This builder is amazing. Try it out to get your own yetty site in a few clicks!
git clone https://github.com/ygoex/yetty.git my-new-project
or, if you are currently signed in to GitHub, generate a repo from this template.
cd my-new-project
Specifically have a look at .eleventy.js
to see if you want to configure any Eleventy options differently.
npm install
For local development:
npm start
To build a production version:
npm run build
For debug mode:
DEBUG=* npx eleventy
about/index.md
shows how to add a new content page.posts/
has the blog posts but really they can live in any directory. They need only the post
tag to be added to this collection.nav
tag to add a template to the top level site navigation. For example, this is in use on index.njk
and about/index.md
.feed/feed.njk
. This is also a good example of using a global data files in that it uses _data/metadata.json
._includes/layouts/base.njk
: the top level HTML structure_includes/layouts/home.njk
: the home page template (wrapped into base.njk
)_includes/layouts/post.njk
: the blog post template (wrapped into base.njk
)_includes/postlist.njk
is a Nunjucks include and is a reusable component used to display a list of all the posts. index.njk
has an example of how to use it.Inline CSS: If you require further control over the above the fold & common style inlined by CriticalCSS, you can inline the style manually as follows:
Add the following code between the head tags in the base.njk
file:
{% set css %}
{% include "inline_style/inline_style.css" %}
{% endset %}
<style>
{{css | cssmin | safe}}
</style>
Create a scss file with the name inline_style.scss
under _includes/inline_style/scss/inline_style.scss
Add the following command to the beginning of the sass:prod script in package.json
:
node-sass src/_includes/inline_style/scss/ --output src/_includes/inline_style/ --output-style compressed &&
And also, the following command to the beginning of the sass:dev script:
node-sass src/_includes/inline_style/scss/ --output src/_includes/inline_style/ --source-map true --source-map-contents true &&
For additional documentation about how to inline css in Eleventy visit:
This starter kit was born as a fork of eleventy-base-blog, but it also includes features inspired by other Eleventy projects: