Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

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

blurry low resolution placeholder image SvelteKit Hosting
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. SvelteKit SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

SvelteKit Hosting: Free Static Site with Render #

Published: 4 years ago
4 minute read
Gunning Fog Index: 7.3
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

✨ 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:

svelte.config.js
javascript
    
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.

🗳 Poll #

Which git service prefer for new projects?
Voting reveals latest results.

🧱 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).

Please enable JavaScript to watch the video 📼

SvelteKit Hosting: Free Static Site with Render

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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
SVELTEKIT

Likes:

Likes

  • Matthew Higley profile avatar
  • Jonathan Hart profile avatar
  • Render profile avatar
  • Chris Castle profile avatar
  • David Mauskop profile avatar
  • Anurag Goel profile avatar
Likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image SvelteKit SSG: how to Prerender your SvelteKit Site

SvelteKit SSG: how to Prerender your SvelteKit Site

sveltekit
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.