Build a blog with Sapper and Svelte

In the age of frameworks, Webpack and complicated build tools, regular boring JavaScript can easily be overlooked. Gone are the days of sites that only shipped the code they needed right? We need runtimes now to compile our JSX else who knows what will happen.

With Sapper, we can create whole websites that compile down to just the HTML, CSS and JS they need. In the latest Web Designer I take a look at how to use it to create a nice, neat blogging site.

Sapper is a site building tool with an added kick. It does all the things we're used to doing with complicated JavaScript setups like server rendering and code splitting but all out of the box.

The best bit? It's built by the team behind Svelte. Svelte is a fast growing alternative to frameworks such as Vue or React, but it's main differentiator is that it pre-compiles websites and supplies only the JS required to get it to work. No need for a runtime or other parts of the framework we don't make use of. The result? Tiny bundles. Really tiny.

I've covered Svelte before. I think the concept is absolutely sound. It's the best of both worlds. To be able to have an out-of-the-box build tool ready to make websites fast by default can only be a good thing. It's opinionated enough to make sure we can't make any silly performance mistakes, but open enough to make pretty much any site required.

In this issue's tutorial we create a simple blogging site. It follows much a similar line to Sapper's own template repo but we go through all the steps on what makes it work, where the data that powers it come from and how to customise it to our own needs.

The end result is a speedy blogging site that has a few neat tricks up its sleeve. To find out what they are, you'll need to pick up Web Designer 290 and follow along. Always leave you wanting more.