SvelteKit Hosting: Free Static Site with Render # SvelteKit Hosting: Free Static Site with Render #

✨ SvelteKit Hosting #

We have previously looked at SvelteKit hosting with Netlify, today we see what Render have to offer. Render is a newer service offering hosting, like Netlify, Cloudflare and Vercel. They offer free hosting for static sites (up to 100 GB of bandwidth per month)  . Although there is currently no official documentation on the Render site about hosting a static SvelteKit site, we'll see it is not too difficult to do. As it stands, there is no SvelteKit adapter for Render, though you can use the Node adapter. That said, for static sites, Render works like a charm.

Server Side Rendered vs Static Site Generators #

Server Side Rendered sites (for example those produced by Next.js), like Static Site Generated sites, are good for Search Engine optimization or SEO. Typically, you prefer SSG when your site’s visitors do not need to log in and, essentially, the page looks the same to every visitor. In this case, the site is converted to HTML at build time. That pre-generated HTML is served to every visitor (possibly “hydrated”  in their browser). Because every visitor sees the same site, this is no good for a site like Twitter, for example, where you want to log in and see content compiled just for you (Tweets from accounts you follow, your DMs etc). The waters have been muddied recently; for example, with SvelteKit you can deliver static or prerendered content on some pages even though others are Server Side Rendered.

Anyway, back to Render and static SvelteKit hosting. First, we will see what you need to do in your app code to make it static. We assume your app is already suitable for static generation by its nature. Then we see how to link Render to your GitHub repo and generate your static site.

🔌 SvelteKit Static Adapter #

SvelteKit has various adapters. Like a travel power adapter lets you charge your tablet in another country with a different type of power socket, the SvelteKit adapters let you host your Svelte site on different services. They are needed because SvelteKit typically relies on serverless functions for SSR, and different platforms handle serverless functions differently. As well as platform specific adapters, there is a node adapter, and more important for us, a static adapter  .

Let's start by installing the adapter package. At the time of writing SvelteKit is still in beta and to get the latest fixes, be sure to get the @next version we use here:

    
pnpm install -D @sveltejs/adapter-static@next

  

As well as installing the adapter, you need to tell SvelteKit to use it. Open your svelte.config.js file and ensure it contains the two lines highlighted below:

    
1 /** @type {import('@sveltejs/kit').Config} */
2 import adapter from '@sveltejs/adapter-static';
3 import preprocess from 'svelte-preprocess';
4  
5 const config = {
6 	preprocess: [
7 		preprocess({
8 			scss: {
9 				prependData: "@import 'src/lib/styles/variables.scss';"
10 			}
11 		})
12 	],
13 	kit: {
14 		adapter: adapter(),
15 		// hydrate the <div id="svelte"> element in src/app.html
16 		target: '#svelte'
17 	}
18 };

  

That's the SvelteKit configuration side set up. Next, push your site to GitHub.

🧱 SvelteKit Hosting: Set up Render #

Jump over to the Render site  and click START FREE TRIAL, if you don't yet have an account. If you are just hosting static sites, you will not need to provide payment details. Enter your email address and choose a secure password. You should also set up multifactor authentication (MFA).

Next, click the New + button (top of screen) and select Static Site. Here I pick a public repo. You can use a private repo instead, you will just have to authorize Render to access your GitHub or GitLab account. We can use any unique Name. For the Build Command we can use npm run build unless you have modified from the SvelteKit default in your package.json file. For the Publish directory add ./build. Don't forget to define any environment variables needed for your app. You will find these under Advanced. Finally, click Create Static Site at the bottom. It shouldn’t be too long before your build is ready, and you can click the URL to open it.

If you have your own domain, you can just add a CNAME record wherever it is registered to point to the URL which your new render site has. That's the Render site set up.

🙌🏽 SvelteKit Hosting: Wrap Up #

In this post, we saw:

• how to set SvelteKit up to generate a static site;
• setting up an account with Render; and
• how to build a static site from a git repo on Render.

If you don't yet have a site ready to push, but want to try our Render, just use the demo site repo from the Apollo Client SvelteKit Tutorial  . You will just need to generate your own GitHub API token. There are instructions in the GraphQL GitHub post. Also, have a look at the post on adding Custom HTTP headers to your static SvelteKit site. In that post we look at Cloudflare Pages and Netlify hosting options as well as Render.

SvelteKit Hosting: Feedback #

Have you found the post useful? Which other hosting service would you like to know how to host a SvelteKit site on? Would you like to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram  . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.