josephdyer / skeleventy

A skeleton boilerplate built with Eleventy.

An Eleventy starter skeleton

Skeleventy gives you a rock solid foundation to build fast and accessible static websites. View the demo site.

Features

• A clean, minimal build pipeline with SCSS and Laravel Mix for compiling assets
• Gorko, a smart little Sass-powered utility class generator
• Purgecss to remove unused CSS
• HTML minifier
• Supports ES2017 JavaScript, with Babel compilation
• SEO friendly page meta, including Open Graph and Twitter
• Image lazy loading
• Mobile navigation
• XML Sitemap
• Clean and simple blog, with categories and featured images

Getting started

Prerequisites

Node v10+

Installation

1. Clone the repo git clone https://github.com/josephdyer/skeleventy.git
2. cd into the project folder and run npm install
3. Start the local development server by running npm run dev Tip: Eleventy has live reload baked in!

Folder structure

Eleventy

• site/ contains all the global data, templates and content
• utilities/ contains Eleventy helper filters and transforms
• Each page should have it's own respective folder containing an index.md file
• You can then choose the most appropriate layout for each page (or create more if you need to)
• The navigation is powered by the official Eleventy navigation plugin

Assets

• css/ for compiled CSS
• js/ for compiled JavaScript
• images/ contains our site's images, an SVG icon sprite and a folder for meta images (OG, Twitter etc)

The build pipeline

Laravel Mix gives us a nice API layer on top of Webpack. Skeleventy uses a simplistic set up, but you can take advantage of extending Mix with custom Webpack configurations, code splitting and plugins such as PostCSS, if you so wish.

You'll find the site's uncompiled SCSS and JS within resources/ where Mix will be watching these directories for any changes. Tip: it's best to always restart the server when creating any new partials or folders

SCSS

• scss/ is structured into opinionated sub folders
• The _config.scss file is where you can change the site's colours and the utility classes generated by Gorko
• A typographic scale has already been set up using my personal favourite Major Third scale.
• Tip: for more scales, check out Type Scale

Gorko

I decided to remove Tailwind in favour of Gorko, purely for its simplicity and maintainability (especially for newer developers). Not having too much to begin with and adding in what you need, will lead to a simpler, more maintainable codebase. Gorko lets you add a sprinkle of reusable utility classes to help keep your code DRY. Credit to Andy Bell for making this handy little tool

JavaScript

• utilities/ contains any global utility/helper functions
• modules/ contains your site's actual JavaScript, all kept neat and tidy within their respective modular subfolders
• You can import these subfolders into main.js using import '@modules/example-module'
• Tip: you can set up optional import aliases via the webpack.mix.js file

A note on responsive images

Skeleventy doesn't have responsive images baked in, the main reason being: it's best using CDN. Check out this tutorial on setting up Eleventy with Cloudinary.

skeleventy's Issues

tailwind.config.js changes ignored

Hi,

I have a problem with the tailwind.config.js file which ignores my changes. I have just cloned skeleventy and add to tailwind.config.js a specific height.

module.exports = { future: { removeDeprecatedGapUtilities: true, purgeLayersByDefault: true }, prefix: '', important: false, separator: ':', theme: { spacing: { (...) '84': '21rem', } }

After saving the file, stopping the server and npm run dev again, the utility class created won't be applied : h-84. I also tried to add the change to theme.extend but still doesn't work.

Is there something in particular to do in order to customize this file ?
Thanks a lot for your help !

Changes on main.css not reflected in production

Hello, I'm having a problem, when the changes I made in my computer with main.css, are not showing on the website. I have a slightly different configuration, because I'm using gitlab and not netlify, but the process on the gitlab's job don't show errors. main.css is updated on gitlab, but main.min.css don't show the changes.

What can be the problem?

Worth adding a netlify config file!

Currently you need to manually change the build folder and command when adding to Netlify. Not hard to do but tripped me up for a few minutes when my build failed.

Easily fixed with a Netlify config file, which would set those automatically.

Something like: netlify.toml

[build]
  command = "npm run production"
  publish = "dist"

Can't find _includes folder

This could just be my ignorance (new with 11ty), but when I run npx @ty/eleventy --serve --port=8080 I get the following error:

TemplateLayoutPathResolver directory does not exist for default: _includes

My 11ty config file seems to point to the right directory. Any tips?

Cannot link between pages using VS Code Live Preview in browser

Sorry, probably a newbie question, but when I view dist > index.html and then click on blog (for example) the browser throws an error message: Cannot GET /blog/

I've attempted to add a .htaccess file to dist folder with the following code (to address the issue):

`Options +ExecCGI +FollowSymLinks -MultiViews

RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ /$1.html [L]`

Again, I'm unsure if this is the issue and whether it is the correct way to address it. I look forward to any guidance you may be able to provide. Thank you.

CSS change not reflected in production

Great template!

I'm trying to make a small css change which is working in dev environment but not in production when deployed to netlify. Where do I start with this?!

Thanks!

Mobile nav issue

Keeps opening and closing on page load - will look into

Issues with M1 and Laravel-Mix

I'am getting errors in M1 Mac without Rosetta2, and apparently is related to Laravel Mix.

Is anyone is having the same issue?

Running local serve

When running a local server with npx eleventy --serve I was getting the error:

Problem writing Eleventy templates: (more in DEBUG output)
> TemplateLayoutPathResolver directory does not exist for default: _includes

Error was thrown:
    Error: TemplateLayoutPathResolver directory does not exist for default: _includes

By running as npx eleventy --serve --config=eleventy.config.js the problem went away and the site was hosted on my local machine without a problem.

(reporting this as I love how quickly you can get a nice example to start working from with this project, so I hope others don't give up at the first hurdle).

Big Blog

Hi there, just playing around. But I have over 100 blog entries, and I can't find the css that automatically "page brake" the blog entries on the overview.

Lets say; max 4 blog entries in a row - or something else.

Is there an easy way to fix this?
Cheers Gerhard

PS: By the way; do you know an easy way to make a second language work within your starter or globally in eleventy? This would be a very interesting feature for me.

No license file

Please add a license file, so that people feel free to use this. It would be great. Thanks!

Feature: Tag pages

Hello @josephdyer

thanks for skeleventy, really nice blog template. I was wondering what you think about a tag page for all posts of particular tag?

Peter

Gulp & performance related issues

Outdated Gulp version

Noticed that:

• npm audit warns about Gulp related security issues.

Suggested fix is to upgrade to more recent version of the tool

Tried to "upgrade" by updating Gulp package versions to latest v4.x related versions, but ended up with error messages.
Most likely the Gulp configuration syntax has changed a bit, and some of the Gulp plugins that this Eleventy "starter kit" project requires are probably not compatible with the latest Gulp version.

Performance issues

Since the Gulp version is already outdated, was wondering if it would make sense to move forward either to the latest Gulp v4.x version, or alternatively to some other build tool. The biggest issue with Gulp have been the slow build times.

Part of the performance issues are caused by the combination of multiple different types of build pipelines:

• Eleventy builds for various template languages.
• Tailwind for building CSS output from the partly Tailwind-specfic "custom" CSS syntax.
• gulp.js for the build pipeline that combines various other tools together, including Tailwind.

I do have my own package.json scripts that I had to adjust because of the Windows compatiblity related issues (shared earlier on another issue), but those don't change the core Guilp build pipeline.

PurgeCSS Gulp integration

Had various issues with the lack of optimized builds, where Tailwind ends up generating a huge 350-400+ kilobyte CSS files, since the post-processing of the generated CSS is not done properly. Tried to solve the issue by running gulp tasks two times, to make sure that Gulp's PostCSS plugin for PurgeCSS @fullhuman/postcss-purgecss would reduce the size of the CSS file.

Snippet from package.json file's scripts section:

    "build-serial": "npm-run-all --serial build:gulp build:eleventy build:gulp",
    "build:gulp": "gulp build",
    "build:eleventy": "eleventy --config=eleventy.config.js",

Originally the build script was parallel, but had to modify it to the --serial mode so that build steps would not get mixed with each other. Reason for the serial build pipeline was mostly the issues caused by the misbehaving PurgeCSS part of the Gulp pipeline.

    // Original version of the build task
    "build": "npm-run-all --parallel build:gulp build:eleventy",

Tailwind customization

For various reason, need to be able to customize the CSS styles.
Had some odd problems on getting the changes to build, and was wondering about how the build pipeline really works.

Sidenotes

While I understand that part of the issue might be caused by my customized package.json scripts, I feel that there is room for improvement on the Tailwind integration part.

Mainly wondering whether I should spend time trying to debug Gulp related issues, or just throw Tailwind and Gulp away and rewrite major part of the template from scratch. That would be a wasted amount of effort, most likely, since there probably is a faster way to fix the problems.

Deprecated [email protected]: core-js@<3 is no longer maintained

After downloading and installing the code I got the following warning:

npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

Not sure if this needs addressing?

Inconsistency in date formatting filter

The date formatting filter uses a mixture of UTC and local date functions. This could cause some weirdness in the date formatting. For example if the post date is 2020-12-31T23:00:00.000+00:00 but the timezone on the local system is Australian Eastern Standard Time (UTC+10) then the formatted date would be 1st January 2020 when it should be 1st January 2021.

skeleventy/filters/dates.js

Line 32 in de7741c

return d.getDate() + (ordinal[d.getDate()] || "th") + " " + month[d.getMonth()] + ", " + d.getUTCFullYear();

environment variables in Win

This particular method of passing environment variables doesn't work in Windows.
https://stackoverflow.com/questions/25112510/how-to-set-environment-variables-from-within-package-json-node-js

ctrl+c doesn't seem to kill the Eleventy browsersync instance

When using npm run dev, it fires up the Eleventy serve and gulp tasks fine, but when using ctrl+c, it only seems to stop gulp, not the eleventy server.

Unless you close your terminal and re-open it, Eleventy will build twice next time, and incrementally from there if you continue to stop gulp and then re-run npm run dev. This only seems to be an issue when pairing it with gulp.

specific categories to sitemap instead of "category:all"

great work on this.

i have a suggestion & question for sitemap.

Njk template there uses "collections.all" to generate sitemap for all possible pages, like so

---
permalink: sitemap.xml
hidden: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{%- for page in collections.all %}
{%- if not page.data.hidden %}
    <url>
        <loc>{{ site.url }}{{ page.url | url }}</loc>
        <lastmod>{{ page.date | htmlDateDisplay }}</lastmod>
    </url>
{%- endif %}
{%- endfor %}

One of the outputs in a resulting sitemap is
https://skeleventy.netlify.app/category/all/
which is a collection of all possible pages - a bit of a mess for indexing.

Instead of "category all", it would be better that google indexes each category, for example

<url>
<loc>https://skeleventy.netlify.app/category/software/</loc>
<lastmod>2020-7-20</lastmod>
</url>
<url>
<loc>https://skeleventy.netlify.app/category/writing/</loc>
<lastmod>2020-7-20</lastmod>
</url>

But how can i edit that njk template so that it
-captures and outputs different categories in the sitemap?
-excludes category/all
-leaves other important pages like homepage, each blog post etc

thanks again,

Netlify _includes Error

Builds fine locally, in dev, debug and production. However when I deploy to git, fails on Netlify build.

TemplateLayoutPathResolver directory does not exist for default: _includes

eleventy.config.js dir config:

return {
       templateFormats: ["md", "njk"],
       markdownTemplateEngine: 'njk',
       htmlTemplateEngine: 'njk',
       passthroughFileCopy: true,

       dir: {
           input: 'site',
           output: 'dist',
           includes: 'includes',
           data: 'globals'
       }
   }

Try to generate new pages

I'm trying to add in new pages, I'm confused. I created a .njx file with the template code and then created the .md file for it. How do I make it autogenerate the html code in the public folder?

Netlify build error

The local development version + Netlify production builds look different.

When I build on Netlify I get this error message:

The build completed successfully, but the following processes were still running:
5:29:57 PM: ​
5:29:57 PM:    - node /opt/build/repo/node_modules/.bin/mix --production
5:29:57 PM:    - /bin/sh -c npx webpack --config="node_modules/laravel-mix/setup/webpack.config.js"
5:29:57 PM:    - webpack
5:29:57 PM: ​
5:29:57 PM: These processes have been terminated. In case this creates a problem for your build, refer to this article for details about why this process termination happens and how to fix it.

Is the difference in dev and prod because laravel-mix isn't allowed to complete? Netlify's docs suggest:

To fix this, you should make sure the build command waits for its background processes before completing. In JavaScript, this often means properly following and calling promises, async/await, and callbacks.

I'm unsure what to do here. Thank you!

nunjuck get latest 3 posts

Hey There, loved this boilerplate and building my 1st blog using jamstack with this.

I wanted to put the latest 3 posts on index page, but can´t find it on any documentations in nunjucks
When you iterate this: {% for post in collections.blog %} you get all posts.
Is there any way I can modify this to just get the last 3?

Thanks

Question: Pull Request for TW 1.0 Beta

Alright @josephdyer

First off, thanks for Skeleventy, its a pleasure to use.

Now, I'm not sure how I go about this so thought I'd ask first.

I've updated the boilerplate to use Tailwind 1.0b and made all the upgrade changes so it works.

I have forked your repo so could add the changes to there and open a pull request but I can see that goes to your master, as TW is still in beta I wasn't sure if thats the right way to go.

From what I can tell, there will be a final release any day now and shouldn't be any breaking changes.

As you can tell I'm new to pull requests!

How's best to proceed? Thanks.

Great project - but unable to deploy to Netlify

I ran into this issue:

_Error: TemplateLayoutPathResolver directory does not exist for default: includes

Not sure what this means? I looked through 11ty website and it wasn't helpful at this point.

Thanks

How do I update the TailwindCSS version?

👋 This is more of a question than an issue.

How do I update TailwindCSS? I'm currently on "tailwindcss": "^1.0.5"1 in my package.json. I see this repo is on 1.2.0, which I'd love to be on (if nothing else to get my hands on CSS Grid classes). How can I update my project to use 1.2.0?

This is my first time working with 11ty, Skeleventy, and TailwindCSS. Sorry for the noob question!

CSS Variables with Gorko

Love the theme!

I'm trying to implement CSS variables within the _config.scss by following the Gorko documentation and am not having any luck.

I know there's a separate _variables.scss file, but I would rather have the variables defined in Gorko and have them used in the utility classes.

I've cloned the Gorko custom props demo project, and can successfully generate custom props there and drop them into the utility classes... That proejct uses the basic sass processor, as opposed to mix, so I'm wondering if it's something with how that is processing (or failing to process) the SASS?

I sometimes get an error message reading:

ERROR in ./resources/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: "color" is not a map.
   ╷
12 │   $item-value: map-get($items, $value-key);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/gorko/src/mixins/_apply-utility.scss 12:16  apply-utility()

Here's my config config code:

'css-vars': (
    'color': $gorko-colors
  ),
  'bg': (
    'items': 'color',
    'css-vars': true,
    'output': 'standard',
    'property': 'background'
  ),
  'color': (
    'items': 'color',
    'css-vars': true,
    'output': 'standard',
    'property': 'color'
  ),
etc.

I've updated sass-loader and other node modules to the latest versions.

PurgeCSS configured with whitelist

I am maintaining a projects based off of this and I was wondering about the reason for this huge whitelist in the purgeCSS config. Why don't you just use purgeCSS without any config options at all?

skeleventy/webpack.mix.js

Lines 59 to 81 in 626e376

	whitelist: [
	'body',
	'html',
	'a',
	'h1',
	'h2',
	'h3',
	'h4',
	'p',
	'blockquote',
	'breadcrumbs',
	'content',
	'form',
	'input',
	'textarea',
	'intro',
	'btn',
	'loaded',
	'page-title',
	'required',
	'row',
	'visually-hidden',
	'menu-visible'

Gulp compile failure for .js doesn't print location

So far I'm blown away by how helpful this template is. I've run into a couple compile errors while getting my base SCSS and tailwind.config set up. For SCSS errors it cleanly prints the filename:line:col and then gives a nice printout of the exact error. However for .js the error message is only the issue (e.g. Error: Unexpected identifier). It would be so much more helpful if the file and line number were included as well.

Build Error After Cloning

After cloning the project, I'm getting the following build error.

(29:3) `@apply` cannot be used with .transition because .transition is included in multiple rulesets.

I think it's because the transition class name overlaps with the css property of the same name. When I change the class name and all of its references, it builds correctly.