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.
Credits
- Eleventy
- TailwindCSS
- PostCSS
- Autoprefixer
- PostCSS Import
- esbuild
- Luxon
- NPM Run All
- HTML Minifier
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.
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
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.
Any ideas why? Do I need to set my elevent_env to production in netlify as well?
Thanks!
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.
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!
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:
npm i alpinejs
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
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!
Browsersync not working
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.
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:
Without that line, the
src/_data/site.js
global data is not provided to the Nunjuck template environment. For examplesite.title
,site.description
,site.env
cannot be accessed.[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.
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
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
7efb22a
1.2.6ef88b93
security notice for additional prototype pollution issuec2b9819
isConstructorOrProto adapted from PRbc8ecee
test from prototype pollution PRDependabot 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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.
Changelog
Sourced from engine.io's changelog.
Commits
24b847b
chore(release): 6.2.1425e833
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 matrix1b71a6f
docs: remove "Vanilla JS" highlight from README (#656)917d1d2
refactor: replace deprecatedString.prototype.substr()
(#646)020801a
chore: add changelog for version 3.6.0ed1d6f9
test: make test script work on Windows (#643)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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.
Changelog
Sourced from socket.io-parser's changelog.
Commits
f3329eb
chore(release): 4.0.5b559f05
fix: check the format of the index of each attachmentDependabot 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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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!