chrissy-dev / eleventy-web-starter

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

Hey, I'm Chris 👋🏼

I'm a Full Stack Developer and Designer currently based in Glasgow, Scotland 🏴󠁧󠁢󠁳󠁣󠁴󠁿

eleventy-web-starter's Issues

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!

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!

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 %}

Add a simple blog collection with tags

Version 2 Roadmap

Back in 2018 the project goal of JAMStack Web Starter was to create a simple project structure that tied Eleventy and an opinionated asset pipeline together. The core pillars (Eleventy, Tailwind, Webpack and Post CSS) all worked together using simple commands but contained the absolute minimal configuration.

Although I still firmly believe the best boilerplate is minimal with solid foundations there's a few things I'll be changing in version 2. These changes are taking into account the emails and questions I've been asked over the last couple of years about the project.

Roadmap

Tailwind & CSS

I'm a big Tailwind fan. Some of the Twitter fanboys have questionable strong opinions on it, I'm not one of them. I believe it has it's place within the web eco-system but I don't think anyone should be forced to use it or degraded for not using it/using it. It's an optional tool at the end of the day.

• Documented support for adding Tailwind CSS v2+ to the project but not by default.
• Make CSS3 (combined with Post CSS) a first class citizen.

Javascript

I don't dislike Webpack but it's probably overkill for a project of this size. I still believe the ability to bundle ES6 modules is a core functionality of a boilerplate, especially a Javascript based one where the developer is most likely familiar with the eco-system.

• Use a smaller and more efficient Javascript bundler in place of Webpack, perhaps esbuild.

Eleventy

It's evident there's some additional foundations within the Eleventy boilerplate that would be useful and are likely required most of the time.

• Support for eleventy-img out the box.
• Tag support out the box.
• Sample collection in the form of a blog utilising tags.
• Support for storing assets alongside it's associated collection files. (eg, images from a blog post live in the same folder as the markdown file).

Misc

• Basic server worker support.
• Slight changes to the project structure.

Notes

• Major breaking change.

I'll start scoring these off as I work through them. All work will be available on a v2 branch while it's getting worked on.

Remove ./utils folder to simplify config

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.

tailwindlabs/tailwindcss#5264
tailwindlabs/tailwindcss#7131
tailwindlabs/tailwindcss#7044

node_env etc on windows (and others)

I think you'll want to use something like https://www.npmjs.com/package/cross-env to make sure env vars are cross-platform.

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.

Audit the head of the document

I don't think you need Luxon

Just an FYI. I think you can use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat.

Question: Should this project contain a sample blog?

Add RSS feed for posts

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

Netlify Builds Failing

Hey there!

Thanks so much for this starter kit, it's awesome! However, either when clicking on the "Deploy to Netlify" button or when cloning this repo and trying to upload to a new Netlify instance, I get the following error:

1:58:06 AM: Failing build: Failed to build site
1:58:06 AM: failed during stage 'building site': Deploy directory '_site' does not exist

Any idea what's happening here? I've also received other errors when experimenting which hinted that Eleventy might not be installing correctly?

Thanks in advance!

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.

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!

Add note in README about using `cross-env ` 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:

// .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.

Basic schema markup for posts

[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.