New Eleventy starter, initial thoughts on Astro, website fun, and 11ty meetup

Published

Subscribe to the newsletter RSS feed.

New Eleventy Blog Starter #

In my last newsletter, I mentioned that I'm giving a mini workshop on building and deploying an Eleventy blog. I forked the eleventy-base-blog, which was my original starting point, and made some opinionated changes:

  • Uses a /src/ directory
  • Moves most filters to a separate file to clean up the config file
  • Adds more filters commonly used by me
  • Inlines and minifies CSS by default
  • Uses a more accessible color scheme for code blocks, and uses CSS variables so it's easier to switch it up.
  • Adds RSS link to navigation
  • Uses a responsive font size and flow system that is more readable, partially based on Improve the readability of the content on your website by Andy Bell
  • Adds a footer at the bottom of the viewport
  • Centers post article column, with wider image and code blocks, similar to the Hylia starter

Like the sound of that? You can preview a build and checkout out the GitHub repo. The event is on Tuesday if you still want to join.

Initial Thoughts on Astro #

I have a legacy webpack project that is mostly HTML pages with vanilla JS and one page that is a full React app. I've been wanting to add HTML templating for all the regular HTML pages. Eleventy would be great, but I still have that one page that is mostly a React app.

Slinkity is a promising-looking Eleventy plugin, but still very early stage. So I started trying out Astro. It's pretty slick. Here are my pros and cons so far:

  • Pro: Easy to create a new project using the CLI
  • Pro: Can use most JS frameworks (React, Preact, Vue, Angular, Svelte) and regular HTML templates with the .astro file type.
  • Pro: Porting over my SCSS just worked
  • Con: Vanilla JS is still tricky. There is no bundling, transpiling, etc. available yet. So you have to inline it all in your HTML (if you're not using a framework component). They are working on this.
  • Con: It's built on Snowpack but they hijack and use their own server, so all the Snowpack dev server config stuff isn't available yet. I need to proxy an API web server (a Rails backend), but this isn't possible yet.

I'm still excited about it. I think it's a big step in the right direction. I'm not sure why Webpack chose JavaScript to be the only entry point for a bundler as the web uses HTML. So it was always tricky to set up configs to work with a mixture of HTML and frameworks.

Sometimes I wish they went with a more established templating language link Nunjucks, but then Astro files can use straight up JavaScript which makes some things easier. However, you can't dump in content inside <script> tags. This point might become moot if they get a Script component working which will also transpile and bundle vanilla JS.

What cool new tools have you tried out lately? Drop me a line on Twitter!

Building websites is fun #

I don't have any new blog posts for this episode, but if you want a fun tongue-in-cheek read for this Friday, check out How to build a website in 2021.

11ty Meetup Episode 2! #

Our second Eleventy meetup is next week! We're learning about 11ty image and the creator economy. Check out all the deets on 11tymeetup.dev.

Cheerio and Happy Friday!

← Newsletter Home