Email or username:

Password:

Forgot your password?
Zach Leatherman :11ty:

Framing this Twitter exchange on my wall

(sorry for the Twitter link, but it’s worth it twitter.com/karrisaarinen/stat)

Karri Saarinen: “Been wanting to update my personal site for a long time. 

Is there any extremely simple tool, kind of like Jekyll that has templates and then can churn .html pages to S3.

Or do I just need go back to notepad.exe and hand code each page.”

Lee Robinson replies: “Here's React → HTML in 20 LOC.

$ mkdir site && cd site
$ npm init -y && npm i next
$ mkdir app && touch app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
$ touch app/page.js
export default function Page() {
  return 'Hello, Karri!';
}
$ touch next.config.mjs
export default { output: 'export' };

Add a couple `package.json` scripts...

"scripts": {
    "dev": "next --turbo",
    "build": "next build"
}

$ npm run build
$ cat out/index.html 🎉

Can upload the `out` folder to S3. Or if you want...

$ npm i -g vercel && vercel --prod”

Kaari: “Nice! Will try this”

Kaari: “This doesn’t look good” with an image attachment of the output HTML.
36 comments
Ethan Marcotte

@zachleat i just saw the phrase “view source aesthetic” and suddenly my laptop was floating down the charles river, what is even happening over there

Zach Leatherman :11ty:

@beep I have altered the abstraction, pray I do not alter it any further

Ethan Marcotte

@zachleat as if millions of sub-3G network connections suddenly cried out and were suddenly silenced

Zach Leatherman :11ty:

@beep congrats to all my Empire friends, just seeing that the Death Star raised a new Series A round of $4.2T!!

jack(y) or treat!

@zachleat ah i wanna see the top post but that's broken for logged out accounts

Zach Leatherman :11ty:

@jalcine Sorry about that! I put the original screenshot in my first post

jack(y) or treat!

@zachleat thank you and ahahahaha couldn't even make this up

Mia (web luddite)

@zachleat sadly, without logging in, there is no exchange.

Zach Leatherman :11ty:

anyway, here’s Eleventy’s version in two commands:

echo '# Page header' > index.md
npx @11ty/eleventy

and the output is `<h1>Page header</h1>`

Random Geek

@zachleat thanks for doing your part to keep honest to god web site building alive

Zach Leatherman :11ty:

@randomgeek I like building web sites and I would like to keep doing it more please 😅

Evan B🥥ehs

@zachleat @randomgeek I didn't make the website, the website made me

Mayank

@zachleat this actually makes me wonder: should .md be processed by default?

it's certainly great for blog posts, but maybe not a good default for a general purpose static site generator? it also requires excluding README.md (and other top-level *.md) from being built

Zach Leatherman :11ty:

@hi_mayank yeah—a fair question! I’ve hit this a few times too as I slowly gravitate towards recommending using a `content` or `src` folder by default.

I think the benefits outweigh the negatives though—the onramp with immediate markdown support is hard to beat. We couldn’t do a default `content`/`src` folder either because that would require an additional folder creation step or even head towards a boilerplate CLI which I have a real hard time getting onboard with.

Mayank

@zachleat maybe not a `src` folder but a `pages` folder that's a different thing from the input dir.

everything (including *.MD) inside `pages` could generate an .html file, and everything outside will still be considered by 11ty but not used as pages.

onboarding:
$ touch pages/index.html
$ npx @11ty/eleventy

Zach Leatherman :11ty:

@hi_mayank I like `pages`! How you describe `pages` is exactly how the input folder operates! You can change your input folder to be anything, currently:

Onboarding:

$ touch pages/index.html
$ npx @11ty/eleventy --input=pages

I wonder if this would be a better thing to try out in our quickstart!

Mayank

@zachleat in my mind, the difference between `pages` and `input` is that the includes and layouts are currently relative to the input folder and default to being inside of it. (the `_` prefix certainly helps tho)

also i should have tried `touch pages/index.html` before posting. 🤦 it needs to be `mkdir pages && touch pages/index.html`

Mu-An

@zachleat where does a template(+/static css/assets) get factored in in this command? I thought it was more complicated than that the last time I tried to use it.

Zach Leatherman :11ty:

@muan markdown files are preprocessed with liquid by default

Marijke Luttekes

@zachleat This post makes me feel feelings that I cannot express adequately.

Mayank

@zachleat this whole thread gives me the icks

personally i don't even care about "view source", but the OP literally asked for a simple tool that does templating! replying with a framework that adds hundreds of KBs of JS and *also* inlines the whole page as json is already 😬. but then the CEO goes and defends it instead of admitting fault (or simply that it's maybe not the right tool for the job)

Zach Leatherman :11ty:

@hi_mayank Yeah, not a good look. I do think the immediate assumption that Karri was complaining about “View Source” says a lot.

Chris Ferdinandi ⚓️

@zachleat 😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂

Mike Aparicio

@zachleat This broke my fucking brain. All that to build something that looks like the first web page ever made. 🤦🏻‍♂️

GoOz

@zachleat I’m astonished by the lack of people answering how messed up it is to use React for one freaking simple & obviously static website.

Vesa Piittinen

@GoOz @zachleat Although React is messed up to use for anything these days.

It made some sense for a SPA where you can pay the relatively big size of the thing, but now it is all about RSC, and NextJS doesn't help with pushing alpha quality stuff for production use where basic things like CSS is not loading for dynamic imports when using App Router which they now recommend despite still not working for everything.

Григорий Клюшников

GoOz, having watched this, I don't understand why anyone would use React for anything. Want a blog or a "business card" website or something for docs for your project? Use a static site generator like Hugo. Want something dynamic? Build a server application with any stack you like and render your pages server-side. (this comment was proudly served to you by such a server application)

Go Up