What sort of site do you think would be too difficult to make with a static site generator, like Eleventy?

#1

I asked this on Twitter earlier, but it’d be great to bring the discussion in here too.

This all helps me plan the upcoming Learn Eleventy From Scratch course :slightly_smiling_face:

#2

A website that needs almost real-time updates, possibly also entered by their own hq interface! I’m imagining a 3d print shop website that allows clients to check print status and makers to create jobs and update them.

2 Likes
#3

I was reading an article earlier about using headless WordPress with Gatsby, and was wondering whether similar was possible with 11ty.

Wouldn’t necessarily have to be about WP, but something about integrating 11ty with third party APIs would interest me, as it’s not something I’ve looked at at all yet.

2 Likes
#4

Oh this is super cool! If you strapped on some web components or Vue, this would be very doable.

You would have to have some sort of data-source/web sockets doing the fancy data stuff though.

#5

Yeh this is 100% doable. The pagination system could be used to paginate over data pulled with a JavaScript data file, to then create output pages.

This is a really handy article that’s based on Ghost, but it’d be a similar approach IMO.

2 Likes
#6

Oh interesting - I saw that article, but haven’t read it yet. I might have a go at porting one of the WP sites I look after, just to see what issues I run into. I feel like some plugins might be an issue if they require individual setup - clowns love to add random plugins.

1 Like
#7
  • that was meant to say clients, but clowns sometimes works too! :man_shrugging:
2 Likes
#8

I’m new to static sites and I’m dipping my toes slowly into 11ty. I would be interested in learning how to display data from CSV, JSON, YAML in a page. Especially in a page where users can manipulate the data for example covidtracking.com but users can view a table and sort by columns.

Another one that has been challenging to me is getting a static site to update automatically via API.

These suggestions might be too basic but I thought I would ask.

Thank you.

#9

That’s really useful to know. 11ty certainly has to tools to do this—especially when paired with a service like Netlify where builds can be triggered with Webhooks etc.

There will 100% be some remote data access with this course, too, because I personally think that’s when 11ty really shows its power.

3 Likes
#10

thank you :grinning:

1 Like
#11

Working in Jekyll today lead me to another question: how does 11ty handle responsive images? Is there a way to keep the markdown for posts and pages clean? Is this a job for 11ty shortcodes or 11ty plugins?

#12

Good question! By default: nothing.

There’s a few of things you could do:

  1. You could like you say, create a shortcode where you pass in paths and sizes
  2. Add the HTML for a <picture> element
  3. Use JSDom in a transform to add a srcset and maybe some sort of image processor to generate sized images

I use JSDom in Hylia to add permalinks to headings, add loading="lazy" to images and generate <figures>: https://github.com/hankchizljaw/hylia/blob/master/src/transforms/parse-transform.js

1 Like
#13

awesome thank you so much I will try this out.

1 Like
#14

Please can you blog it if you do? I’m likely to go down the same road at some point :slight_smile:

2 Likes
#15

Co-signed! I’d love to read about how you’re gonna do it.

#16

Finding most of my time taken up with the kids at the moment, but when I get the chance I will try to give it a go. Will definitely write it up if I do.

3 Likes
#17

Hell yeh! Hope the kid situation gets easier :slightly_smiling_face:

#18

Today I played around with eleventy-plugin-lazyimages and eleventy-plugin-image. Using the verbose configuration options, I think/hope I got responsive lazy loading images working on a project. It looks good on local.

2 Likes
#19

I’ve spotted this one recently too https://github.com/11ty/eleventy-img

2 Likes