All about 11ty, a simpler static site generator

cory,
@cory@social.lol avatar

I guess next is the blog post on moving all of the content in my site to a CMS.

jak2k,
@jak2k@mastodontech.de avatar

@cory
But why?

cory,
@cory@social.lol avatar
lene,
@lene@front-end.social avatar

I have just released version 3.0 of Eleventy Excellent, now fully on ESM and with many other changes, including my attempts to learn more about WebC and web components. Contributions very welcome! 💚

https://eleventy-excellent.netlify.app/blog/eleventy-excellent-30/

#11ty #webc

cjerrington,
@cjerrington@mstdn.social avatar

@lene it’s been a minute but the redirect syntax is pretty similar. It’ll be a few days but could help take a look too. If it’s different maybe there’s a way we could programmatically keep it updated.

Should update my site again to the new and improved 3.0 version 😎

lene,
@lene@front-end.social avatar

@cjerrington If you come up with a good system don't hesitate to PR!

mia,
@mia@front-end.social avatar

Ok, most of these images still need alt text and captions. I can't do all 500+ at once. But at least I have a system (and a way for people to help out)! Thanks #eleventy

Men In Brackets is online:

https://men.mia.wtf

JackHPeterson,
@JackHPeterson@mastodon.social avatar

@mia Stuff like this is why the Internet is the coolest.

mia,
@mia@front-end.social avatar

@JackHPeterson 💜🥳

mia,
@mia@front-end.social avatar
  1. A folder full of images
  2. Add #eleventy
  3. Loop over images to create pages
  4. A static image site!
  5. ???
  6. It's easy to add/edit alt text & captions now

What's step 5? A markdown file for every image? That sounds painful. A single json or yaml file mapping images to metadata? Maybe better? Could get out of hand. Some very simple CMS? Other ideas?

hdv,
@hdv@front-end.social avatar

@mia if it's new images you could make a Shortcut that moves an image into said folder, but before that prompts for an alt and writes your input into a file with the same name alongside the image.

but it's old images isn't it?

nhoizey,
@nhoizey@mamot.fr avatar

@mia this is what I do for my photography site.

Step 5 is a Node script that creates Markdown files for each image with data extracted from EXIF/IPTC (title, description, alt text, geolocation, gear, camera settings, etc.), but also generates thumbnails.

https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/_scripts/sync-photos.js

I use Lightroom for step 6.

simoncox,
@simoncox@seocommunity.social avatar

Ruh Roh!

Just trying to display 32,000 lines of Spotify tracks I listened to from 2010 - 2015 from a couple of json files. Might need to paginate this!

#11ty

simoncox,
@simoncox@seocommunity.social avatar

@ilovechoclates_
Computer can handle it, not a problem! That was from one json file of data and i have 8 of them - all my Spotify listening history since 2010 with loads of data points per listen.

ilovechoclates_,
@ilovechoclates_@seocommunity.social avatar

@simoncox I see. lol, I didn't even know Spotify existed in 2010. I was 9 then 😂

christian,
@christian@aldr.social avatar

I'm taking a bit more time with my starter kit upgrade.

Along with moving away from SASS/SCSS, I have decided to learn and lean into the CUBE CSS methodology once and for all 💪

I keep seeing it pop up from developers I admire and now would be a perfect time to give it a spin.

Not sure if I'll also delve into design tokens just yet 👀 but maybe.

https://cube.fyi/

christian,
@christian@aldr.social avatar

Also this: https://every-layout.dev/

Lots of learning to do 📖

#CSS

hmiron,
@hmiron@fosstodon.org avatar

@christian if you’re moving away from SASS, perhaps you want to try vanilla extract. I’ve been using it for three years now and I keep finding new awesome things about it.

https://vanilla-extract.style/

christowski,
@christowski@mastodon.social avatar

Finally managed to publish my new website last night! ✨

https://christophrauscher.de/

Now that it’s online, I am extremely underwhelmed (of course). But also relieved that it won’t collect dust in the drawer like all the other attempts.

#11ty #designportfolio #illustration #personalwebsite

ricmac, (edited )
@ricmac@mastodon.social avatar

To the #Eleventy community: does anyone know of any projects to make an 11ty website a first class member of the #fediverse, similar to what The Verge is doing (via WordPress it seems like) and 404 Media will do once Ghost is ready (ref https://digiday.com/media/why-publishers-are-preparing-to-federate-their-sites/). I did implement #webmentions on Cybercultural.com, using Bridgy etc, but it was unsatisfactory so I took it offline. I do want Cybercultural to be an “actor” on the fediverse tho, so now thinking about how to achieve that via 11ty.

binarydigit,
@binarydigit@social.lol avatar

I want to redo my website again, because it really doesn't reflect a "digital cafe" or "garden". Does anyone have favorite #11ty templates they can share? I've seen so many gorgeous sites but don't have the talent to make a theme from scratch 😅

cjerrington, (edited )
@cjerrington@mstdn.social avatar

@binarydigit here’s a few!

@lukem has Eleventy Bliss https://github.com/lwojcik/eleventy-template-bliss

@lene has Excellent Eleventy https://github.com/madrilene/eleventy-excellent

@bobmonsour has a great collection of all kinds of resources, and starter templates is one of them from the community https://11tybundle.dev/starters/

ashur,
@ashur@front-end.social avatar

means a lot to me, both professionally and personally. On paper it’s a static site generator, but it’s so much more than that:

🔨 It’s the best damn tool there is for building the kinds of things I want to see on the kind of web I want to thrive

🎈 It’s a community overwhelmingly made up of genuinely nice people doing cool things and helping each other out

💖 It’s led by someone who shows again and again he believes in the best of what the web can be

ashur,
@ashur@front-end.social avatar

That someone — @zachleat — is asking for help to make the job of shepherding #Eleventy full-time into something that can be independent and sustainable.

In a sea of VC-backed tools whose goals are often at odds with a healthy web, Eleventy stands out to me as worthy of our collective support 💜

https://www.zachleat.com/web/independent-sustainable-11ty/

zachleat,
@zachleat@zachleat.com avatar

@ashur your posts here are making me emotional — what an incredible thing to read ❤️

Really appreciate you!

robb,
@robb@social.lol avatar

I've just upped my #11ty contribution to $11 a month. By my count, I currently have 11 (coincidence, I swear) sites live and using it. It's a no-brainer to keep it funded as best we can.

You can read all the details here https://www.zachleat.com/web/independent-sustainable-11ty/ or jump straight to the open collective page https://opencollective.com/11ty https://rknight.me/notes/202405231612/

zachleat,
@zachleat@zachleat.com avatar

@robb Thank you Robb!!

robb,
@robb@social.lol avatar

@zachleat You're more than welcome 👊

mxbck, German
@mxbck@front-end.social avatar

Every month I pay subscriptions for Netflix, Spotify and Google. But none of them provide as much value to me as - its the best tool I know, and I use it for everything I can.

That's why I'm a long time supporter of the project - and now that it's going independent, you should consider becoming one too!

  1. Go to https://opencollective.com/11ty
  2. Sign up as a monthly backer
  3. Let me know and I'll get you a beer and a high five next time we meet

https://www.zachleat.com/web/independent-sustainable-11ty/

zachleat,
@zachleat@zachleat.com avatar

A blog post about what is likely the biggest @eleventy news in our project’s history — and we need your help!

https://www.zachleat.com/web/independent-sustainable-11ty/

cferdinandi,
@cferdinandi@mastodon.social avatar

@uncenter @zachleat @eleventy It's also ENTIRELY possible that my ADHD-driven sensitivity is causing me to read your original words with a tone that wasn't there and react too strongly (or that you're also ND and I'm not recognizing your own communication quirks).

cferdinandi,
@cferdinandi@mastodon.social avatar

@uncenter @zachleat @eleventy As someone who's often told I'm being an asshole when I don't intend to be, you handled my feedback far better than I would have if I were on the receiving end of it.

hawkticehurst,
@hawkticehurst@fosstodon.org avatar

While I've only recently started to spend serious time using @eleventy, I've long admired and align with the values/culture @zachleat has been cultivating for years.

Zach is now looking for help to independently go full-time on . I want to share and encourage anyone with extra money, influence, or both to consider supporting this project.

Like other folks have been saying today, I too want to live in a world where projects like 11ty are sustainable.

https://www.zachleat.com/web/independent-sustainable-11ty/

hawkticehurst,
@hawkticehurst@fosstodon.org avatar

@eleventy @zachleat I often think about this quote from The "Cheap" Web manifesto:

> cheap ≠ free
> Making nice things is difficult and time-consuming.
> If we want people to make nice things for us, we have to pay for their rent and grocery bills and raw materials.

So as of today, I am now contributing monthly to the project and will be nominating 11ty for Microsoft's FOSS fund going forward

Thanks for all your hard work pushing the web forward @zachleat!

https://potato.cheap/

zachleat,
@zachleat@zachleat.com avatar

@hawkticehurst @eleventy Thank you so much!

robb,
@robb@social.lol avatar

A Ghost × iMessage art collab between me and @DavidDarnes

DavidDarnes,
@DavidDarnes@mastodon.design avatar

Would like to thank @robb for collaborating on the new branding for my @ghost to @eleventy plugin
https://github.com/daviddarnes/eleventy-plugin-ghost

DavidDarnes,
@DavidDarnes@mastodon.design avatar

@hamatti @robb Robb sent the ghost, I added the balloon sticker

robb,
@robb@social.lol avatar

TIL you can use your #11ty filters in computed data if you use regular functions rather than arrow functions https://illtron.net/2023/01/11ty-directory-data-filters/
Very handy for the clean up I've been doing on my site. https://rknight.me/notes/202405200945/

Chris,
@Chris@mastodon.social avatar

@robb My first thought was, “hmm this sounds complicated,“ followed immediately by “oh wait I wrote this.” Glad it was helpful!

robb,
@robb@social.lol avatar

@Chris This is why we write blog posts, with this one thing you've helped me clean up so much of my code.

christian,
@christian@aldr.social avatar

Why have I been sleeping on AVIF!? The site I tested it on isn't particularly image heavy, but turning 1.8 MB .png into 330 KB .avif is just an absolute win. All done on the fly thanks to the 11ty Image Plugin 💚

https://www.11ty.dev/docs/plugins/image/

stefanzweifel,
@stefanzweifel@phpc.social avatar

Now that I've switched my blog to use #11ty, it makes much more fun to update it again.

Finally updated my /uses page. Updated some screenshots and apps. (The biggest change is that I've replaced Feedbin with Reeder.app)

https://stefanzweifel.dev/uses/#ios

#homescreen

regis,
@regis@phpc.social avatar

@stefanzweifel Oh! It made me realize that Plexamp exists for macOS with the iOS app, and it's great since I used the plex web version which is not as good as the dedicated music app.

Thanks for Bruno, didn't know this one.

stefanzweifel,
@stefanzweifel@phpc.social avatar

@regis Plexamp is awesome.
I’ve downloaded some ambient music from World of Warcraft and mostly listen to this while coding.
Probably 80% of the time, Plexamp is running.

hi_mayank,
@hi_mayank@hachyderm.io avatar

playing with JSX components in #11ty, complete with my own CSS-in-11ty pipeline. the IDE experience is phenomenal!

(this is all done at build-time, with zero client-side JS)

hi_mayank,
@hi_mayank@hachyderm.io avatar

@kgf the asset bundling from webc is actually built into 11ty now (as of 3.0.0-alpha.10), so i'm just using that.

i'll open-source my repo after i clean up some things. maybe i'll even do a writeup if this sounds interesting to other folks 🤔

nhoizey,
@nhoizey@mamot.fr avatar
markllobrera,
@markllobrera@mastodon.social avatar

I’ll write more about this next week, but last night I quietly switched over to a new 11ty v3 build of my site. Cut myself on the bleeding edge a few times but also figured out a whole lot of fun things!

https://markllobrera.com

markllobrera,
@markllobrera@mastodon.social avatar

@nhoizey Markdown + image paths + overlapping filters/transforms are no joke!

nhoizey,
@nhoizey@mamot.fr avatar

@markllobrera indeed! 🤯

simoncox, (edited )
@simoncox@seocommunity.social avatar

Just got my Spotify data - had to wait a few days for it to arrive. Was going to do something with it but now can't remember what.

Probably something with #11ty - will have a play later.

jak2k,
@jak2k@mastodontech.de avatar

@simoncox
When I wouldn't listen to my music locally, I would probably build something like a genre or artist map.

simoncox,
@simoncox@seocommunity.social avatar

@jak2k
Ah that reminds me, someone had mapped out a version of the yearly Spotify report for thier whole time on Spotify - think mine should be 14 years now - that will be intersting (to me and really no-one else!)

cjerrington,
@cjerrington@mstdn.social avatar

Looking to add a /stats page to my blog and website? If you have one, what do you put on yours? So far I have total posts and a nice graph

cjerrington,
@cjerrington@mstdn.social avatar

@nhoizey @ffoodd I might play around with this for a post graph type thing.

nhoizey,
@nhoizey@mamot.fr avatar
bkardell,
@bkardell@toot.cafe avatar

Thanks to the Conference speaker who chose to donate part of their honorarium to @servo 🎉

https://opencollective.com/servo/contributions/761781

OddBird,
@OddBird@front-end.social avatar

A big thank you to the speaker who contributed a portion of their honorarium to support OddBird's open source work!

https://opencollective.com/oddbird-open-source/contributions/761810

azimrh,
@azimrh@mastodon.social avatar
zachleat,
@zachleat@zachleat.com avatar

@azimrh awesome!! enjoy!

  • All
  • Subscribed
  • Moderated
  • Favorites
  • 11ty
  • DreamBathrooms
  • ngwrru68w68
  • modclub
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • InstantRegret
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • mdbf
  • GTA5RPClips
  • provamag3
  • ethstaker
  • normalnudes
  • tester
  • osvaldo12
  • everett
  • cubers
  • tacticalgear
  • anitta
  • megavids
  • Leos
  • cisconetworking
  • JUstTest
  • lostlight
  • All magazines