Skip to content
/ yetty Public template
generated from 11ty/eleventy-base-blog

Yet another 11ty boilerplate to start a new website with optional blog. This boilerplate is based on eleventy-base-blog et al.

License

Notifications You must be signed in to change notification settings

ygoex/yetty

Repository files navigation

yetty: Yet another Eleventy starter kit for my (& your) new projects. Built with accessibility and performance in mind.

Netlify-build GitHub-license GitHub-stars GitHub-forks

Yetty

Features:

TO-DO:

  • Improve documentation
  • Testing with Cypress

Demo

Deploy this to your own site

This builder is amazing. Try it out to get your own yetty site in a few clicks!

Requirements

Getting Started

1. Clone this Repository

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.

2. Navigate to the directory

cd my-new-project

Specifically have a look at .eleventy.js to see if you want to configure any Eleventy options differently.

3. Install dependencies

npm install

4. Edit _data/metadata.json and adjust the values to your details.

5. Run Eleventy

For local development:

npm start

To build a production version:

npm run build

For debug mode:

DEBUG=* npx eleventy

Implementation Notes

  • 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.
  • Add the 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.
  • The blog post feed template is in feed/feed.njk. This is also a good example of using a global data files in that it uses _data/metadata.json.
  • This example uses three layouts:
    • _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.

Other features you might require:

  • 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:

    1. 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>
      
    2. Create a scss file with the name inline_style.scss under _includes/inline_style/scss/inline_style.scss

    3. 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:

    1. https://www.11ty.dev/docs/quicktips/inline-css/
    2. https://www.11ty.dev/docs/quicktips/concatenate/
    3. https://danabyerly.com/articles/manually-splitting-css-files-in-eleventy/

This starter kit was born as a fork of eleventy-base-blog, but it also includes features inspired by other Eleventy projects:

About

Yet another 11ty boilerplate to start a new website with optional blog. This boilerplate is based on eleventy-base-blog et al.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published