Build a Svelte, Sapper, & TailwindCSS Website Step-by-Step


UPDATE 20200509: This was fun while it lasted... But I've found, and have fallen in love with 11ty and will be building with it going forward.
I may even migrate my HUGO site at shanerobinson.com to 11ty???


I went searching for detailed, step-by-step tutorials and instructions on how to build a fully functional website (or even just a simple blog). And while I found plenty of examples of how to install and generally configure a Svelte/Sapper site, none seemed to be maintained or actually functioning beyond the setup demo.

So I decided to build my own and document the entire process with detailed step-by-step instructions and screenshots of the entire process.

If you've landed here somehow in late March of 2020 (perhaps you're stuck in isolation due to COVID-19) and there's nothing yet on this site except this home page and the about and roadmap pages, then please check back every week.

For now, I'm off to create the first page that details how to install and config Svelte/Sapper on your local development system from a Github template.

Right now I'm finishing up the TailwindCSS integration and site design. Next is adding the ConvertKit email form.

Right now (March 29, 2020) I just posted the first page, Installing Sapper, Part 1.

Tuesday, March 31, 2020: Added step-by-step instructions with screenshots of how to host your new Svelte-powered Sapper site for free on Netlify.

Tuesday, April 7, 2020: Added step-by-step instructions with code for installing and configuring TailwindCSS, PostCSS, PurgeCSS, and nanoCSS.


Shane Robinson on Instagram
Shane Robinson on Twitter
Shane Robinson on Github
Shane Robinson on Pinterest
Enthusiastically built using Svelte, Sapper, and TailwindCSS.
Graciously hosted at Netlify.
Source code crafted using Visual Studio Code.
Version control via Github.
Image pre-processing by svelte-image.

Site last updated: Tuesday, August 11, 2020