SvelteKit Hosting: Free Static Site with Render
Tags: svelte, webdev, javascript
Published: 2021-08-11 08:31:54

---
title: "SvelteKit Hosting: Free Static Site with Render"
published: "true"
description: "SvelteKit Hosting: see how you can host your static SvelteKit site for free with Render taking advantage of their CDN and SSL certificates."
tags: "svelte, webdev, javascript"
canonical_url: "https://rodneylab.com/sveltekit-hosting/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqy2w50jo9otvzthxera.png"
---

## ✨ SvelteKit Hosting

We have previously looked at <a aria-label="Read about Svelte Kit site hosting with Netlify" href="https://rodneylab.com/use-netlify-to-host-your-sveltekit-site/">SvelteKit hosting with Netlify</a>, today we see what Render have to offer. Render is a newer service offering hosting, like Netlify, Cloudflare and Vercel.  They offer <a aria-label="See Render docs on static hosting" href="https://render-web.onrender.com/docs/static-sites">free hosting for static sites (up to 100&nbsp;GB of bandwidth per month)</a>.  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 for Render, which means you might prefer Netlify or Cloudflare Workers if you want to build a Server Side Rendered site.  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 NextJS), like Static Site Generated sites are <a href="https://rodneylab.com/tags/seo">good for Search Engine optimisation or SEO</a>.  Typically you prefer SSG when your sites 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 <a aria-label="Read more about hydration on Wikipedia" href="https://en.wikipedia.org/wiki/Hydration_(web_development)">&ldquo;hydrated&rdquo;</a> 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 you GitHub repo and generate your static site.

## 🔌 SvelteKit Static Adapter

SvelteKit has various adapters.  Like a travel power adapter lets you charge you 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 <a aria-label="Open the Svelte Kit static adapter repo on Git Hub" href="https://github.com/sveltejs/kit/tree/master/packages/adapter-node">static adapter</a>.

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:

```shell
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:

```javascript
/** @type {import('@sveltejs/kit').Config} */
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
 
const config = {
	preprocess: [
		preprocess({
			scss: {
				prependData: "@import 'src/lib/styles/variables.scss';"
			}
		})
	],
	kit: {
		adapter: adapter(),
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	}
};
```

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

## 🧱 SvelteKit Hosting: Set up Render

Jump over to the <a aria-label="Register a new account with Render" href="https://render-web.onrender.com/">Render site</a> 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 multi factor authentication.

Next click the **New +** button (top of screen) and select **Static Site**.  Here I choose a public repo.  You can use a private repo instead, you will just have to authorise 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: Wrapup

In this post we saw:

- how to set SvelteKit up to generate a static site,

- setting up an account with Render,

- 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 <a aria-label="Open the Rodney Lab Git Hub page for the Svelte Kit Graph Q L Git Hub repo" href="https://github.com/rodneylab/sveltekit-graphql-github">demo site repo from the Apollo Client Sveltekit Tutorial</a>.  You will just need to generate your own GitHub API token.  There are <a aria-label="Open post on Svelte Kit Apollo Client tutorial" href="https://rodneylab.com/use-apollo-client-sveltekit/#githubGraphqlAPI">instructions in the GraphQL Github post</a>.

## 🙏🏽 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 <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

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 <a aria-label="Direct message me on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a> as well as other topics. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.