June 7, 2023
I recently updated my website after not touching it for years because I was tired of the setup. Previously, my website was built with a premade theme on Stackbit, and a Static Site Generator called GatsbyJS. All the content on the website was managed in Sanity CMS and it was hosted on Netlify.
I was a huge fan of Gatsby when it first came out but the framework didn't progress like many of it's competitors. So when I was building this website I was contemplating between building with another React framework, like Remix, or I building it with something else like Svelte. I'm a big fan of building sites with React and I was pretty close to choosing Remix for my new website. But Svelte is also a lot of fun to build with and I haven't built as much with that framework as I have with React. So my new website is built with SvelteKit, which is a framework built on Svelte. This website is pretty simple, so there wasn't a lot of heavy lifting that needed to be done (which Svelte can totally handle). But it's still fun to dig in to unfamiliar territory and figure out new ways to solve old problems.
Choosing a framework
Svelte has some advantages over React that make it a favorite among developers. It requires writing less boilerplate code to get started and at the end of the day it's compiled down to vanilla JS, making it super lightweight. On top of the great developer experience, Svelte is great for building fast, performant websites. Below I've put some pictures showing how it scores with some of the popular testing tools.
Making it look nice
On top of Svelte, I used TailwindCSS for all the styling. Tailwind is a framework for CSS that makes styling a website wicked easy. I wasn't a fan of it for the longest time, but the more that I've used it the more I've come to appreciate how easy it makes styling a site. Unlike something like Bootstrap, Tailwind uses sensible utility classes and only ever compiles the classes that you actually use. So basically if you know how to write CSS, which you should before starting to use a CSS framework, you can pretty easily write CSS with Tailwind.
Updating content
For the most part the content on my new website is just hardcoded. However for my blog I've decided to use Prismic. Prismic might be my favorite CMS. It's extremely simple and easy to use, and free for a website the size of mine.
Hosting
Finally, hosting. For hosting any website I typically either use Netlify or DigitalOcean. DigitalOcean is where I'll host any WordPress or PHP website I build and Netlify is where I'll host pretty much everything else. Hosting with Netlify is about as easy as it gets. All you have to do is connect your git repo to Netlify and it takes it from there. Anytime you make any new changes to your master branch it will push the changes to your live website (this feature can be turned off).
Conclusion
My new website is pretty simple but it was still a lot of fun to build and allowed me to get more familiar with the Svelte framework. I definitely plan to reach for Svelte more on future projects.