First Published 30/12/2020
2020 is a year to forget in most aspects, however danielcanetti.com has seen some major improvements and I've learnt some valuable new skills along the way. You may have noticed a visual change with a simpler layout and cleaner colour pallete, but there's much more to the update and here I'll take a deeper dive into the techincal changes and advancements that have been made to the site.
Before these updates were made the site was still built on eleventy, a static site generator, having previously being built on WordPress for a number of years - if you're interested in making the switch, have a look at this Smashing Magazine article.
By the end of 2019 the site [danielcanetti.com] had become increasingly bloated and unorganised. I wasn't taking advantage of the simplicity Jamstack offers and found updating the site to be a complicated and time-consuming process riddled with inefficient processes and incorrect build steps which regularly led to build errors.
Add to this the messy and unorganised root directories and that I was manually updating the build directory with js files and images (I was using Node Sass to compile CSS into this directory at least) and the simplicity of Jamstack is lost further.
Find out more about Jamstack.
One the biggest issues I had was just how un-organised the site was, my first action was to tidy this up. There were a number of steps to be taken here, firstly I had to figure out how to make sure the build directory was untouched when I was updating the site. Enter webpack.
For those that don't know, webpack 'is a module bundler' with a primary focus on javascript but can become much more powerful with additional loaders. For a while I'd been putting off learning how to use it as it looked quite complicated and I was little scared to just dive into it... but boy am I glad I did.
It turns out it's really simple to use and has been a huge benefit to my development process, I can honestly say it's been just as game-changing for me as Sass - they're both now a core part of any new project I work on.
Of course I moved all the javascript into webpack and I also stopped using the Node Sass compiler in favour of a webpack loader. Finally, I migrated all the images out of the build directory and included them within the webpack using a media loader, all this meant that I now had a src directory outside of the build directory (which was still named _site from the default 11ty settings).
The only issue I ran into was the dreaded FOUC [Flash of un-styled content]. To correct this I simple added the MiniCssExtractPlugin to the config and exported the CSS out as a separate file, allowing me to keep the js files set to defer on page load and avoid any FOUC.
Once I had everything compiling correctly I wanted to find a way to be able to run 11ty locally (typicaly eleventy --serve) and compile webpack (typically npx webpack) simultaniously. Thankfully, I was able to follow this guide from Statickit and now all I need to run is npm run serve and all compilation happens at the same time (including Sass).
Find out more about webpack and Sass.