-
- - - - - - - - - -
-
-

Finally Settled With 11ty

-

Move from WordPress to Static Sites Generators โ€” 11ty, and others.

-
- - Finally Settled With 11ty - -
- Published on - in - - SSG, - WordPress & - Web Development. - -
- -
- - - -
-
- - - - -
-
-
-

What Changed?

-

The web development landscape changed a lot in recent years. Developers moved to modern web development (JAMstack) and become more specialised. There are now front-end, backend and full-stack web development stacks. I believe, front-end web development became the automatic choice for most developers with designer background.

-

Other than that, WordPress evolved from a simple blogging platform to a full-site-editing CMS (soon). We kinda see that coming. After years of reviewing on ThemeForest, the demands for a full fledge CMS from WordPress are increasing and page builder is gaining popularity since the introduction of WPBakery.

-

Static Site Generators

-

I first encountered SSG back in 2017. I forgot the reason why I get into SSG but once I get started, I cannot stop. I tried Gatsby & Hugo but 11ty became my favourite.

-

What fascinate me is the fact that we are using basic HTML/CSS again for building websites. This might sound like a return to the old ways of making sites but there are some key differences:

-
    -
  • SSG has improved over the years. You can basically get a site running within minutes.
    • -
  • Different templating languages to choose from. Choose the one you like and go nuts.
    • -
  • Automation became mainstream.
    • -
  • It is secured, easy to scale and the performance is insane. These are also my main reasons of using SSG.
    • -
-

SSG simply makes more sense for most company static websites with minimal interaction or less-frequent content update.

-

Gatsby

-

Gatsby is my first attempt to the SSG world. Well, I have my personal reason behind this. WordPress started using React for Gutenberg and it's just a good timing to learn React. There is definitely a learning curve when dealing with Gatsby while learning ReactJS at the same time. However, the performance of Gatsby is no doubt one of the best.

-

I found this article by Bryce Wray who has the similar struggle or experience with Gatsby. The plugins dependencies and those errors / warnings in the CLI are driving me crazy. There is this uncertainty playing in head every time I install / run a build. Further, I find it is an overkilled to use Gatsby for personal blog.

-

Hugo

-

The thing about Hugo is that it feels lightweight, I was intrigued by the reported build speed. Site as big as SmashingMagazine is build on Hugo, this won't go wrong. So I dive in, having fun building my personal site 2.0 on Hugo using Go's html/template which based on Golang. I'd recommend Hugo to anyone who would like to try SSG, I may still try it for a few small projects in the future.

-

The Archetypes feature is really handy and I really hope I can do the same with 11ty.

-

11ty

-

Eleventy is fairly new, if comparing to Gatsby and Hugo. It supports plugins and you can write it in multiple template languages, you can pick one or use them all together!

-

Eleventy seems to have all the features I wanted ( no archetypes tho ), fast-enough build speed, easy-to-use collections to group content. Further, I can add shortcodes easily for easy content management. The folder system is simple, dummy proof.

-
-
-
google lighthouse score 400
The magic 400 on Google Lighthouse.
-
-
-

This site is built with 11ty & TailwindCSS. It scores the magic 400 on Google Lighthouse.

-
- -
- - -
- - - - - - - - - - - - - -
- - - -
- - - -