Website re-platform and a light redesign for 2023

Man sitting at a desk coding a website with multiple screens.

This website has been rebuilt many times since it was first put together in 1995 and it will probably go through more iterations in the future. Part of my enjoyment of the web is creating and optimising websites and I am always keen to learn more and try out different things.

Wix website builder

The site had been hosted on Wix for a few years as part of my involvement on the Wix SEO Board. This allowed me to really dig into the platforms capabilities, discuss it and feed back many suggestions to the Wix teams. Wix had a pretty bad reputation for all things SEO pre pandemic but with some very clever hiring, and a lot of hard work, they have turned the platform around and I can recommend it to anyone -now – especially those of you who don't have time to tinker under the hood like I do and need a lot of functionality.

That said, I felt it was time to move my personal site on. I still have client sites on Wix and am still good friends with the Wix SEO teams.

Things that go around

Back in the early days of the web there was no choice but to hand code a website and it was all just html files and images simply served. Over the past 28 years things have become considerably more complex. Page sizes have been bloated as broadband rolls out across (some of) the world. Then Google decided that speed of delivery of a page was a factor we had to think about and I applaud that. It has meant that a careful look at site code and a need to develop a slimmer, quicker set of code to deliver a website to someones browser. So some simpler techniques have come back into fashion. Client side javascript can really slow down a users experience of a page so server side scripts are now preferred. And likewise why build your page on the fly when requested by a browser, as I had done for years with php based CMS's. Now the smart thing to do is deliver flat precompiled html from the server.

Static site generators

That does make building the site a little more tricky though as you really want to share bits of common code between pages. SSGs (Static Site Generators) do exactly this and provide flat file html output that you can then push to your hosting.

I had been looking at flat file site generators for some years - all needed Command Line set up which I was not comfortable with. I ran the site on Kirby CMS. (a great CMS) up to the point of moving it to Wix and had hoped to revert back to Kirby but use it to create an flat site - you can actually do that..

However, I came across Eleventy. early in 2022 and it ticked a lot of boxes for me. I realised some of its potential (I'm still learning new things about it all the time!) and even though it uses NPM and Terminal commands to set up, I dove in. I found several very helpful tutorials on how to set up a site in 11ty, this video on turning static html/css into a blog being the one I kept going back to..

I have been using Visual Studio Code (Microsoft – you hero's! ) for some years and it has a built in terminal and Git making my process all in one place. Easy to use.

A change in CSS techniques

I was using style sheets before the web - in print programmes so when CSS launched I was onboard with it immediately and have been a big fan since. However it has come a long long way since those early days I whilst I had been using grid successfully on some sites I knew there was a better way.

CSS Layout

I have used Every Layout. from Heydon Pickering. & Andy Bell.. This is set of very well thought out techniques for CSS layouts. This isn't a framework but a methodology so you need to think through what your layout is and how you can build that out. I'd been looking at this for a few years and not really had a chance to try it out so now was the time to give it a go and am very glad I did!

The layout of my site is roughly what it has been for many years but the code underneath is much smaller an better thought out. It's not perfect - but I'm not a CSS Master Craftsman. It is however light and functional.

Fonts

Typography has always fascinated me since I was a child and I have been making fonts for computers since the late 1970's. I couldn't afford Letraset rub down type. sheets back then but was able to get a free Letraset Catalogue that had all their typefaces with all characters so I was able to copy them by hand. Sometimes I wish I'd made a career out of typography, or model making, but it never happened. So I made a fairly big decision early on to utilise system fonts. This is the first site I have built for many years that does not have any fonts to download. This does mean the site looks different on different platforms but who is to know!!! The css uses your system fonts to display and that means a much faster site! And, importantly, I am really happy with the way the site looks!

11ty plugins

Whilst I'm not a fan of plug ins, because of the issues around dependencies and the vulnerabilities that WordPress tends to face, the plug ins for Netlify I am using so far are really just extensions of the core modules and I am a bit more comfortable with them. Of course they are not on the final site so not exposed to any shenanigans! Here are the one's I have used so far.

Minimise CSS

Last week I realised there was a plug in for 11ty that allows you to minify the css. You put your css file in the _includes folder, and 11ty runs the minification on build and adds the minified css as a single line in the head. For smaller sites I am loading a minified line of css in the head of each page but for bigger sites it would make sense to build a minimised css file and link to it in the normal way. For this site it is fast, one less download, and very manageable.

Date time

Small plug in to format date and times, using Luxon, on the blog pages.

RSS feed

Finishing touches on the site build

The finishing touches took almost as long as the rest of the build and include:

Lighthouse optimisations

Performance - 100% – this is mainly down to being a flat file html site and deciding not to use any fonts!
Accessibility - 100% – had a few issues to fix - the usual touch areas around links were to small, and I have fat fingers so should know better.
Best Practices - 100% – Again I had a few issues to deal with here but surprisingly few - images being part of that but they are always trouble.
SEO - 100% – As I write this the site isn't actually launched and the SEO score is 97% and that is because the robots.txt file has blocked any indexing while it is only accessible on the Netlify dev URL. I really don't want the search engines indexing the pages until I move the domain over. I did quickly test without the block and got 100% on the SEO test so I know it's only that to deal with.

Structured data

I have included structured data to help the search engines understand the content. This was easy as an json script in the articles template with the content pulled from the article front matter. The other pages that have structured data are the home page and the About page – nothing else on the site really needs any.

xml Sitemap

For completeness I added a sitemap.njk file and used Duncan McDougall's very handy post with code.. Nice and quick - auto updates when the site is built = thats all I need. Added a link in robots txt to the sitemap file for completeness but it is in the normal place for one.

RSS feed

There is a lovely 11ty plug in that does all the heavy lifting - you just need to point it to the collection you want to feed and set up the feed.njk file and it outputs a very serviceable feed.xml file. That is unless you put an 's' on the end of your collection name and don't realise for several hours while wondering why it's not working. I did give up at one point and put collections. All - but that really does produce a mess - don't do that. But aren't people going to set up something that uses your feed to auto populate their bot sites and beat me in the rankings for my own content? Never happened yet but I do have people reading my feed.

Hosting

One of the attractions of an SSG is that there are a couple of very good hosting solutions available. Cloudflare Pages. and Netlify.. I'm using both and the key factor for me is the automated deployment from Github. I can push to git and this triggers deployment to the live server and in 30 seconds or so the changes are live. The first time you do this its almost magical! Of course both services are known for their CDN's so everything is fast. For small sites the cost is free - another massive incentive!

What did I learn?

I have a really fast flat file site. I don't yet have a CMS to be able to update it quickly but thats ok for me as I have several tools that I can write in and then output to markdown. There are a lot of solutions for this that I am looking into. Netlify has a simple CMS - took a bit of setting up but I am using it on one site. I am a lot happier using Terminal, NPM and even javascript than I thought I would ever be and I have learnt a whole lot doing this.

So far I am loving building in 11ty and have converted quite a few sites over to it. It cannot replace everything but for sites of a certain size and sets of requirements it's really doing it for me this year!

Midjourney generated image of someone not unlike me a bit at a desk with keyboard an multiple screens coding something up.