How I built my personal website using SvelteKit, Tailwind CSS & CloudFlare Pages

I built this personal website in October 2023, and as is customary, I wanted to write a quick blog post about why and how I built it. However, I fell terribly sick on the day I deployed the website, delaying this blog post until now!

Motive

The only real motive behind building this website was to experiment with technologies I’m not normally exposed to as part of my job. I used this as an opportunity to play around with some stuff that was new to me like SvelteKit, Tailwind CSS and Cloudflare Pages. I honestly enjoyed learning the basics of this stack and would highly recommend it to someone who’s looking to build a similar website.

Separately, I’ve been thinking about publishing stuff online and these blog articles acted as catalysts: Why You Should Start a Blog Right Now & Why and how to write things on the Internet.

I’m sure almost nobody is asking why I decided to build a static site, but for those of you who might have that question - because it’s lightweight, ultra-fast and simple to manage.

Why not use an existing Static Site Generator? The website probably would’ve been better if I had used one of the million available SSGs but I wouldn’t have learned the basics of SvelteKit or Tailwind CSS. Also, I feel like I’ve gotten bragging rights now that I’ve built this from scratch!?

Why SvelteKit? 1: Everyone’s raving about it. 2: I felt like I understood enough to be dangerous in an hour or two of browsing the documentation and playing with the interactive tutorial - I think that’s one of the strengths of SvelteKit, it really isn’t too complicated as long as you understand HTML, CSS & JS.

Why Tailwind CSS? Only because a colleague recommended it to me once, and I was itching to try it somewhere. I found it to be an efficient way to style websites, though it can make the HTML a bit messy with all the classes.

Why Cloudflare Pages? I’ve used GitHub Pages before, and it was solid, but I wanted to try something new. Also, I’m intrigued by some of the other developer-focussed services from Cloudflare, such as Workers, R2, and D1. I intend to play around a bit more with this platform in the future.

Resources

1. Let’s learn SvelteKit by building a static Markdown blog from scratch: This article by Josh Collinsworth is probably the only thing you’d need if you’re looking to build a static blog using SvelteKit. It also includes a useful starter template which I referenced a lot.

2. Preloading important pages: I thought this article by Hendrik Harlichs supplemented Josh’s article very well, especially for setting up SvelteKit’s preloading feature.

3. Design: While many advocate for content over design, I like my websites to have some pizzazz! I looked around for some inspiration and decided to ”borrow” some ideas from Adam Wathan’s personal website, which had a minimal yet elegant design.

4. How to add a basic SEO component to SvelteKit: I used this article by Thilo Maier and the Open Graph protocol documentation to figure out the basics of Search Engine Optimisation (SEO), but I don’t think I’ve got the perfect setup yet.

Thanks to all of the authors of the websites linked above, I wouldn’t have been able to learn all of this stuff in such a short time by myself. If you have any comments or suggestions, please email me at [email protected]; I love hearing from kind internet strangers! :)