There have been so many nice private web site redesigns just lately. Cassie’s, Jason’s and Josh’s are amongst my favourites, however there are a lot extra flying underneath the radar. What characterises lots of them is a sure playfulness, a resurgence of caprice and delight. You may really feel the love and care that has gone into them, the truth that their creators have carved out their little nook of the net to name residence. Maybe the pandemic state of affairs, coupled with the recognition of Animal Crossing has one thing to do with this?
Sarah Drasner has written just lately about the case for “fussy” web sites. Max Bock has put collectively a set of come of those distinctive creations underneath the guise of The Whimsical Internet – web sites that “spark pleasure” (full with essentially the most joyful of fonts, Lobster!). It really feel like the proper time to get inventive on the internet, and convey your persona to your private web site.
All of this has impressed me to do some redesign of my very own. My private web site, which I’ve beforehand written about, is a quite simple HTML and CSS touchdown web page. There’s no construct course of, and no JS. Whereas it serves its goal completely nicely, it doesn’t inform the total story of who I’m. I’d like my private web site to have extra persona, and develop into a little bit of a playground.
Eleventy vs. Gatsby
I hope to work on my private web site over the approaching weeks. One of many priorities is to make use of a static web site generator, to make it simple to maintain content material up-to-date. Should you’re unfamiliar with static web site mills (SSGs), this Netlify publish explains what they’re.
This weblog makes use of Gatsby, and I briefly thought of utilizing it for my private web site too.
Gatsby
Gatsby has lots to advocate it:
- Most notably, the documentation is improbable, together with well-written tutorials, making it comparatively simple to get up-and-running with a easy web site in a short time.
- There’s a giant neighborhood round it, which makes it simpler to seek out options to frequent issues.
- Templating in JSX, with all the ability of React at your fingertips, makes for a terrific developer expertise.
- Gatsby handles bundling and code splitting out of the field, no configuration required, and there are many plugins to deal with issues like picture optimisation.
- Websites constructed with Gatsby really feel lightning-fast as a result of using React and built-in optimisations.
Then again, it has some drawbacks:
- The whole lot requires a plugin, and I imply all the pieces. You want a plugin for that. There’s a big plugin-authoring neighborhood, nevertheless it feels a step faraway from the uncooked supplies of the net. Getting your arms soiled within the HTML isn’t actually an choice, and I type of miss that.
- All of Gatsby’s bells and whistles can really feel like overkill for a quite simple web site.
- Even a web site that requires no JS, or is totally server-side rendered, ships a bunch of client-side JS with a purpose to really feel “lightning quick”. There may be an argument for less than sending JS to the shopper once you really need it, and for a easy static web site it is likely to be pointless.
Eleventy
Eleventy is one other static web site generator that has been getting numerous consideration just lately. Whereas it doesn’t have as giant a consumer base as Gatsby, (nor the VC funding to go together with it), it does have a rising neighborhood, which is useful for getting began. Simply by wanting on the rising checklist of sponsors, you possibly can see it’s constructed by and for individuals who care in regards to the net.
With Eleventy you possibly can select from a spread of templating languages. Nunjucks is my choice, however you too can use Liquid, Handlebars or others. I like with the ability to write actual, natural HTML, whereas JSX feels one step eliminated. (Not that I’m saying JSX is dangerous, however writing HTML at all times feels a bit like coming “residence”!)
I’ve been eyeing Eleventy for some time (and dabbled just a little bit), and rebuilding my private web site offers me the proper excuse to take it for a full take a look at drive.
Eleventy is far more of a “roll-your-own” static web site generator than Gatsby, and any add-ons must be configured. It doesn’t change your construct pipeline. I really like utilizing Parcel for engaged on facet tasks, so I assumed I’d strive it out together with Eleventy.
Eleventy-Parcel: A starter mission
Eleventy-Parcel is the ensuing starter mission, which makes use of Parcel to compile belongings. It’s a reasonably minimal starter with a few easy templates and base types. I’ll be utilizing it as the bottom for my private web site redesign.
Within the mission, Parcel compiles Sass to CSS and handles module bundling and picture optimisation, whereas Browsersync reloads the web page every time your template information or belongings change. Whereas it’s designed round my very own preferences, should you take it for a spin and it really works for you, let me know! I’d like to see what different individuals construct with it.
Studying Eleventy
One space the place I might say Eleventy is just a little missing is the documentation. It feels barely more durable to navigate than Gatsby’s docs, in that you simply type of have to have an thought of what you’re in search of. The Getting Began tutorial assumes a sure stage of data, and in that regard it’s not fairly as beginner-friendly for somebody who may not already be aware of static web site mills.
Nonetheless, there are a loads of tutorials round that can assist you get began:
Starter tasks
Should you don’t fancy wading by way of documentation and simply wish to get up-and-running rapidly, there are a bunch of starter tasks (apart from my very own) which were lovingly crafted with this in thoughts. The web site has a lengthy checklist, and listed here are a few my suggestions:
- Hylia by Andy Bell – a easy weblog starter, utilising Netlify CMS for content material
- Supermaya by Mike Riethmuller – helps you add wealthy options, with out a difficult construct course of
Conclusion
I’m no professional at Eleventy, however should you fancy making an attempt it out then you possibly can do worse than take a look at among the assets on this article. Utilizing an SSG is a good selection for creating a private web site, and I hope that within the coming years we’ll see increasingly builders leverage Eleventy, Gatsby, and different SSGs to carve out a private inventive area of interest on the internet. Lengthy might the whimsical web site revolution proceed!
