I like Jekyll because it was pretty straightforward, not very technical and you usually get what you see.
Svelte is pretty much the same or more native to HTML than anything I had seen before.
Sveltekit on the other hand - since it includes so many features - is a little tricky to get used to. But once you understand how the basics work, you can gradually go on to try more complicated things.
Why SvelteThemes?
The site in the discussion here is svelteThemes.dev which I built for myself as a directory with Svelte themes and plugins that can be accessed quickly.
I have a similar directory for Jekyll Themes as well. The main thing I wanted to focus on was to make the site easily accessible. So searching through the entire content is a must. All resources should be tagged or categorized.
This was fairly easy to achieve in Jekyll but it was meant for markdown-based articles or small websites. Not so much for APIs.
My idea for sveltethemes.dev was to have a simple API which is an array of resource objects. That way, adding, updating becomes a lot easier compared to Jekyll where I had to add a new file with front-matter to add a new Jekyll theme.
Challenges
Since it was API-based, I wanted to separate the frontend from the data from the get-go. I created a separate subdomain for the API and hosted them there.
Now I had to list them in my sveltethemes.dev site. This seems pretty straightforward. I just have to fetch the API, show the contents as a list with external links to GitHub repo and demos.
This will not help me rank better for SEO. I’m fetching content in the browser and then displaying it. So search engine bots will not know what the content is.
If I want to rank better then the list should be generated on the server. This is where Sveltekit comes in. Otherwise, I could have created the site with just Svelte.
Sveltekit is amazing
Most of my requirements are met on day one of trying Sveltekit. I could fetch the API in the load function and it will be rendered in the server(SSR). This way my SEO problems are solved.
I was able to create routes for each resource(object) in the API to display more details. Not just that, I was able to create routes for every category as well!
Sveltekit made the site amazingly fast. So much so that the page loads in an instant. At this moment the site scores high on Lighthouse benchmarks.
More challenges
The hardest thing in the entire development was to fix hosting. I wanted it to be hosted on git. Obviously! But I moved from Netlify, Vercel, and finally settled using GitLab.
I have never had any issues with GitLab regarding rate limits. GitLab lets you create private repositories that can be hosted as a website on free accounts as well which isn’t the case with GitHub.
The static-adapter used to prerender the entire site had a lot of issues while I was trying but right now most of them have been resolved.
Fetching GitHub Readme
I did not want to copy-paste the contents of a resource’s GitHub page to my site. Because they are not constant. It will be changed by the maintainers as and when they change features in their themes or plugins.
So I had to dynamically fetch the README and show it on my site. It was fairly simple, where I do it in jekyll-themes.com as well but it was way simpler in SvelteKit. Prerendering the content was challenging because it was throwing
One issue that bugged me was when I parse the README markdown to HTML and use {@html markdownParsedToHTMLString}, I used to get errors in the build because these GitHub readme files can have relative links for images <img src="/path/to/img.img"> and adapter doesn’t find the image it in my site.
After days of search, I wrote it on a closed issue. Geoff Rich answered within a day to the question.
After the most bugging problem was out of the way the build was succeeding but it wasn’t building all the pages. I kept on trying different things for a day.
But at some point, I remembered that in Sapper - the predecessor of Sveltekit - you have to have a link to a page to be prerendered. I tried it and created a simple sitemap with all the links to the resources. Static adapter created these files away!
Results
At the time of writing this, the site ranks top on Google search for the keyword “svelte themes”. I guess Sveltekit has nothing do with it but I think it is going to help improve the ranking. I will explain this soon.
I have used Tailwind for styles which helped me get the site online within days. I’m glad it helped me ship things faster but I have been seeing a delay in dev server startup while using Tailwind. I’m considering using UnoCSS. Let’s see how that goes.
Overall, I’m happy with the result. I also added a banner ad which earns enough to renew the domain 🙃.