Eleventy Web Starter is a lightweight Eleventy boilerplate utilising, ESBuild Tailwind and PostCSS.

  • By Chris
  • Last update: Nov 21, 2022
  • Comments: 14

Eleventy Web Starter

Eleventy · Tailwind CSS · HTML · CSS · Javascript

Contents


Project Overview

  • The project uses Eleventy as a static site generator
  • Default templating is Nunjucks (can be changed)
  • PostCSS set up to handle:
    • TailwindCSS
    • CSS Imports
    • Autoprefixer
  • PurgeCSS to remove unused CSS (set up for TailwindCSS by default) in production
  • HTML minified in production
  • CSS inlined and minified in production
  • esbuild used to bundle and minify scripts
  • Document <head> crafted using htmlhead.dev

Getting Started

Install dependencies

npm install

Working locally

Starts watch tasks to compile when changes detected

npm start

Creating a production build

Minify HTML, minify JS, inline and minify CSS.

npm run build

Deployment

You can host the production output on any web server or service you like and upload it via any method, it'll work.

If you don't have an existing place to host your site you should have a look at Netlify, I can't recommend it enough. To get started you can hit the button below.

Deploy to Netlify


Credits

Github

https://github.com/scottishstoater/jamstack-web-starter

Comments(14)

  • 1

    Just a little question

    Hi,

    Thanks a lot for this starter, it's the best I've found out there for my needs.

    I was wondering why this css file is here : src/_includes/stylesheets/app.css

    I don't see it used but maybe I don't understand all the build process and logic ;)

    Thanks in advance.

  • 2

    Filters not working on production build

    This looks like a known issue with tailwind since 3.0.12 with certain build systems.

    Would be awesome if we could figure out how to fix this here. I did some poking around but couldn't quite figure out why postcss would be building those styles incorrectly. I am going to post some links from the tailwind repo that discuss the issue and some potential fixes.

    https://github.com/tailwindlabs/tailwindcss/issues/5264 https://github.com/tailwindlabs/tailwindcss/discussions/7131 https://github.com/tailwindlabs/tailwindcss/discussions/7044

  • 3

    How to get ELEVENTY_ENV variable set to production

    Thanks for the awesome starter. I have my site deployed to netlify, and I set my NODE_ENV variable to production on netlify, but for some reason this code for the open graph image is still not printing the site url before the image.

    <meta property="og:image" content="{% if env == 'production' %}{{ site.url }}{% endif %}{% if featured_image  %}{{ featured_image }}{% else %}{{ site.meta_data.default_social_image }}{% endif %}" />
    

    Any ideas why? Do I need to set my elevent_env to production in netlify as well?

    Thanks!

  • 4

    Fix production css pipeline

    It seems that the output path for the postcss compiled production css file is not correct. Wasn't copied to the dist folder in my case. Correcting the path to the same that is used in the debug postcss seems to fix it.

  • 5

    Build script on Windows

    Hello again!

    I'm getting a build error when I try to... well, build.

    Found it on my now-customized clone of this repo, so I re-downloaded the repo again and yes, same build error.

    It might be because I am on Win10, I know these scripts have to be changed maybe? I couldn't say as I do not know how to fix it.

    [build:postcss] [build:postcss] > [email protected] build:postcss H:\Bats\Documents\GitHub\BagushCOM [build:postcss] > NODE_ENV=production postcss src/_assets/stylesheets/app.css -o src/_includes/app.compiled.css [build:postcss] [build:postcss] 'NODE_ENV' is not recognized as an internal or external command, [build:postcss] operable program or batch file. [build:postcss] npm ERR! code ELIFECYCLE [build:postcss] npm ERR! errno 1 [build:postcss] npm ERR! [email protected] build:postcss:NODE_ENV=production postcss src/_assets/stylesheets/app.css -o src/_includes/app.compiled.css[build:postcss] npm ERR! Exit status 1 [build:postcss] npm ERR! [build:postcss] npm ERR! Failed at the [email protected] build:postcss script. [build:postcss] npm ERR! This is probably not a problem with npm. There is likely additional logging output above. [build:postcss] [build:postcss] npm ERR! A complete log of this run can be found in: [build:postcss] npm ERR! C:\Users\bats\AppData\Roaming\npm-cache\_logs\2020-10-28T20_34_55_488Z-debug.log

    0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Users\\bats\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' 1 verbose cli ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle [email protected]~prebuild: [email protected] 6 info lifecycle [email protected]~build: [email protected] 7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]~build: PATH: C:\Users\bats\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;H:\Bats\Documents\GitHub\BagushCOM\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Python27\;C:\Python27\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\PuTTY\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Calibre2\;C:\ProgramData\chocolatey\bin;C:\Program Files (x86)\Yarn\bin\;C:\Program Files\nodejs\;C:\tools\php74;C:\Program Files (x86)\Livestreamer;C:\Program Files\dotnet\;H:\Android\platform-tools;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Users\bats\AppData\Local\Programs\Python\Python37-32\Scripts\;C:\Users\bats\AppData\Local\Programs\Python\Python37-32\;C:\Users\bats\AppData\Local\Microsoft\WindowsApps;H:\Programs\Microsoft VS Code\bin;C:\src\flutter\flutter\bin;C:\Users\bats\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\bats\AppData\Local\Yarn\bin;C:\Users\bats\AppData\Roaming\npm;C:\Users\bats\AppData\Local\GitHubDesktop\bin 9 verbose lifecycle [email protected]~build: CWD: H:\Bats\Documents\GitHub\BagushCOM 10 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'run-s clean build:* --print-label' ] 11 silly lifecycle [email protected]~build: Returned: code: 1 signal: null 12 info lifecycle [email protected]~build: Failed to exec build script 13 verbose stack Error: [email protected] build:run-s clean build:* --print-label13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (C:\Users\bats\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:311:20) 13 verbose stack at ChildProcess.<anonymous> (C:\Users\bats\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:311:20) 13 verbose stack at maybeClose (internal/child_process.js:1021:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) 14 verbose pkgid [email protected] 15 verbose cwd H:\Bats\Documents\GitHub\BagushCOM 16 verbose Windows_NT 10.0.19041 17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\bats\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" 18 verbose node v12.16.1 19 verbose npm v6.14.5 20 error code ELIFECYCLE 21 error errno 1 22 error [email protected] build:run-s clean build:* --print-label22 error Exit status 1 23 error Failed at the [email protected] build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]

    Am I on the right track?

    Thanks a lot!

  • 6

    app.js seems not working on production build

    Hi! 👋 (First of all, thanks for this template, it's super useful for a newbie like me)

    I'm trying to install alpine.js using NPM, and although it's working locally (npm start) it doesn't work when deploying on Netlifly (NPM run build)

    This is what I did:

    1. I install Alpine.js using npm i alpinejs
    2. I added import 'alpinejs' to src/_assets/scripts/site.js (first line)

    These are the things I checked that make me think maybe app.js is not loading on production

    • Show/hide behaviors are not working
    • Console.log message is not loading
    • I can't access /static/app.bundled.js (Netlify screen file not found)
    • I also checked https://webstarter.chriscollins.me/ with same results

    Is it possible there is a problem when building the app.bundled.js?

    Site on Production: https://baterias-gesell.netlify.app/ Repo: https://github.com/LouRaul/baterias-gesell

    Thnaks!

  • 7

    Browsersync not working

    npm run start
    

    Open localhost:8080

    Make a change to index.njk and save

    Browsersync says reloading browsers, but it doesnt actually reload the browser.

    If I refresh the changes are shown.

    On windows.

  • 8

    Missing site data path in Eleventy config

    Hi there, thanks for the amazing starter template! I had to change one thing to get it working:

    // .eleventy.js
            dir: {
                input: "src/",
                output: "dist",
                includes: "_includes",
    -            layouts: "_layouts"
    +            layouts: "_layouts",
    +            data: "_data"
            },
    

    Without that line, the src/_data/site.js global data is not provided to the Nunjuck template environment. For example site.title, site.description, site.env cannot be accessed.

  • 9

    [Enhancement] Add eleventy-img to template

    Hello,

    Thank you very much for your starter template!

    I am an 11ty noob -- and frankly, all-around noob -- and haven't been able to make "eleventy-img" work with this starter.

    Also, I understand that images should go into the src/static folder, and can't see any hardcoded reason why I wouldn't be able to use src/static/img, am I right?

    Thank you for your time.

    Cheers.

  • 10

    Updating to tailwind 1.4 (purge built in)

    Tailwind 1.4 has Purge built in... will this affect anything if I use this version of the web starter and then update tailwind after?

    https://github.com/tailwindcss/tailwindcss/releases/tag/v1.4.0

  • 11

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 12

    Bump engine.io from 6.2.0 to 6.2.1

    Bumps engine.io from 6.2.0 to 6.2.1.

    Release notes

    Sourced from engine.io's releases.

    6.2.1

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)
    Changelog

    Sourced from engine.io's changelog.

    6.2.1 (2022-11-20)

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    3.6.0 (2022-06-06)

    Bug Fixes

    Features

    • decrease the default value of maxHttpBufferSize (58e274c)

    This change reduces the default value from 100 mb to a more sane 1 mb.

    This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

    See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

    • increase the default value of pingTimeout (f55a79a)
    Commits
    • 24b847b chore(release): 6.2.1
    • 425e833 fix: catch errors when destroying invalid upgrades (#658)
    • 99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...
    • d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)
    • 7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)
    • 535a01d ci: add Node.js 18 in the test matrix
    • 1b71a6f docs: remove "Vanilla JS" highlight from README (#656)
    • 917d1d2 refactor: replace deprecated String.prototype.substr() (#646)
    • 020801a chore: add changelog for version 3.6.0
    • ed1d6f9 test: make test script work on Windows (#643)
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Bump socket.io-parser from 4.0.4 to 4.0.5

    Bumps socket.io-parser from 4.0.4 to 4.0.5.

    Release notes

    Sourced from socket.io-parser's releases.

    4.0.5

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    Links

    Changelog

    Sourced from socket.io-parser's changelog.

    4.0.5 (2022-06-27)

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    4.2.0 (2022-04-17)

    Features

    • allow the usage of custom replacer and reviver (#112) (b08bc1a)

    4.1.2 (2022-02-17)

    Bug Fixes

    • allow objects with a null prototype in binary packets (#114) (7f6b262)

    4.1.1 (2021-10-14)

    4.1.0 (2021-10-11)

    Features

    • provide an ESM build with and without debug (388c616)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    404 Page is included in the sitemap

    Technically I don't think the 404 page should be included in the sitemap, but please correct me if I am wrong. I went ahead and added this in the sitemap to prevent it from showing up. Let me know if there is a better way to do it! Thanks!

            {% if '404' not in page.url %}
            <url>
                <loc>{{ absoluteUrl }}</loc>
                <lastmod>{{ page.date | htmlDateString }}</lastmod>
            </url>
            {% endif %}