- I don't need the layers of abstraction or the complexity of a CMS — markdown files are where I'm most comfortable writing content and I’d be happy never to touch a MySQL database or wysiwyg editor again.
- I want to improve my site’s performance: static HTML files are, 99 times out of 100, going to be faster than pages built on the fly.
- Lastly, there’s the cost benefit: A LAMP stack server costs money every month; Netlify’s free tier (300 build minutes/month) should comfortably cover a personal blog at zero cost.
“I heard Gatsby was good”
According to the official site, “Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps”. It has a data layer powered by GraphQL and it outputs everything to static files, allowing you to host it pretty much anywhere.
- The user requests a page
- The server sends the statically-generated HTML document to the user’s browser and the browser starts rendering the page.
Accessibility in single-page applications
RouteAnnouncer component. This uses an ARIA live region to announce the
h1 of the page, alerting users of screen reader software to navigation changes. This approach, however, is not without its problems: there are still outstanding issues around configuration and localisation.
Starting from scratch with Eleventy
Eleventy encourages you to build your site how you want to. You use the technology you're most comfortable with and it sticks to generating your pages. Eleventy gives you the option of mixing and matching ten different templating languages, including markdown, nunjucks, and liquid; this meant I could copy and paste my old twig templates from Craft, change the file extension, and with some minor tweaks have them running in Eleventy. Instead of adapting my front-end build process to a new bundler I could just drop in my existing webpack file and
src folder. Using the concurrently package I can run my build script at the same time as Eleventy’s
I've chosen to use Eleventy to build my website, but I understand starting with a blank canvas is not for everyone — having the freedom to build something exactly how you want can be daunting. But you don’t have to approach it the way I have — similar to Gatsby, Eleventy has lots of starter projects that you can use as a base. Some of these, such as Andy Bell’s Hylia starter kit can be up and running in a matter of minutes; it even comes pre-configured with Netlify CMS so you can edit your site’s content without touching any code.
- I’ve had to remove Google Analytics from my site, but analytics was never really good for users in the first place, so I’m not sad to see it go — fortunately, there are server-side alternatives which I will cover in another post.
- I’ve used the
loading="lazy"attribute for lazy loading images, but browser support is patchy and until the native browser implementation improves, there’s no way to gradually fade in images as they load.
- A dark mode toggle — while I could probably hack this together using only CSS, without access to cookies or local storage, I’d have no way of persisting the value between pages.
Linux, Apache, MySQL, PHP: a common hosting setup for cheap shared servers ↩︎
A process whereby React attempts to match elements in the existing HTML markup to its own components and state, effectively re-running the logic which rendered the static HTML file at build time, but in the client ↩︎