A new website using Eleventy
Estimated reading time: 3 minutes
It has been nearly 5 years since I last updated my site. I recently updated my portfolio with a new design, so figured it was time to update the site too.
When I last designed & built my site I was a front-end developer - how things have changed!
Previously I had built it using Wordpress, as I had anticipated blogging fairly regularly (this didn't happen!). I had also built a number of commercial websites using the tool, so I knew it quite well.
This time round I wanted a far simpler approach, with minimal maintenance. My plans for blogging regularly never really materialised, due to workload & family life.
So I looked to Eleventy (aka "11ty"). I'd heard really good things about it.
I'm most comfortable writing HTML, and I ended up using Nunjucks as the templating language, despite never using it before.
I looked through their Starter Projects, but none really offered what I was looking for. I simply wanted one that used HTML, Nunjucks & SASS. I came across the 11ty Sass Skeleton Starter project. Perfect.
I also used advice from this site to help with setting up the actual blog pages.
Whilst all that was going on, I put together a few ideas in Adobe XD. I already had a rough design I used for my portfolio, so I managed to mock up these prototypes relatively quickly:
I was also inspired by a couple of CSS techniques I'd come across on the web:
I'm proud of the fact that I can say my site is #axeClean using the Axe dev tools!
I appreciate that it doesn't mean it is accessibility-perfect, but it is a step in the right direction
Designing, building and testing the site took me two weeks in total (whilst also learning Eleventy and Nunjucks from scratch).
However there is plenty more work to do, such as:
- Enhanced blog features, such as pagination & search;
- Validating in more browsers & devices;
- Compressing images more effectively;
- Improving SEO.
I hope you like my new site, and are inspired in some way to have a play with your own site.UX design