Go back to all posts
text
How host a static SvelteKit website for free

Because of this website I now have lots of experience with static SvelteKit webpages.

And that is why I want to teach you how you too can create a nice static SvelteKit website - just like this one! :).

For this tutorial you will need Node.js and npm. You will also need a GitHub account, for the free hosting it provides to static websites.

But first for the unitiated: What is SvelteKit?

It's a web building framework. It allows you to follow a structure to have websites that are reactive.

I personally love SvelteKit, because it is intuitive and it does not require a lot of hoops to jump through. Things just make sense!


Alright. How to do it?

First of all we'll need to initialise a SvelteKit project. That can be done through Node.js and npm. First you will need to use Vite to create a project with some name. Then change directory there and run npm install and npm run dev. That will start a server that you can see inside your browser.

npx create-vite@latest my-sveltekit-project
cd my-sveltekit-project
npm install
npm run dev

Now install the static adaper for SvelteKit

That can be done easily by using npm again.

npm i -D @sveltejs/adapter-static

This package allows you to translate SvelteKit syntax to normal HTML, JS and CSS, which let's you host this SvelteKit website on GitHub pages.


Now add it to svelte.config.js

Just add the extra lines into the default svelte.config.js.

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
   kit: {
      appDir: 'app', // Required as the default is _app
     adapter: adapter()
},
    preprocess: vitePreprocess()
};
export default config;

Yay! Now you have a static website.


Setting the base URL

Now that you have a static website, you can host it on GitHub pages. But beware, GitHub pages multi page websites do not work as the normal ones.

Instead you will need to set a start of the URL that is the same as your GitHub repository name.

For example the default URL of this portfolio is davidstrasak.github.io/Porfolio. "/Portfolio" is something I had to set into a variable and use in every anchor tag on this website.

This is how you set the svelte.config.js

kit: {
adapter: adapter(),
paths: {
	base: process.env.NODE_ENV === `production` ? `/Portfolio` : ``
}
}

And this is how you use the {base} in every anchor tag.

//Add this only once in the <script>
import { base } from `$app/paths`;
//add this into every anchor tag
<a href={`${base}/blog`}> Blog </a>

Final step to make this site hosteable:

Just add a .nojekyllfile into the static folder of your project.

This file tells GitHub pages to not try to generate a static site from this repository. Because generating is handled by us.


Life hack 1:Hosting on GitHub pages automatically

The page that we have now would have to be manually built (translated from svelte to HTML, JS and CSS) and uploaded to github pages.

But that's unneccesary work!

Instead let's use the "gh-pages" package to upload our built file onto github pages and set up the hosting for us.

First install the package.

npm i gh-pages --save-dev

Now add these scripts into your package.json file.

`scripts`: {
`predeploy`: `npm run build`,
`deploy`: `gh-pages -d build`,
}

So now you can call these scripts through typing "npm run deploy".

npm run deploy

Or if you want to add to git, push to a remote github repository, build the website AND host on github pages, this is the code I run when I update my site.

`scripts`: {
`git`:`git add . && git commit && git push origin main && npm run host`
`host`: `npm run predeploy && npx gh-pages -d build -t true`,
`dev`: `vite dev`,
`build`: `vite build`,
`predeploy`: `npm run build`,
}

The positive is that you need to write only one line - "npm run git" to do all the things I would want to do every time. That's like saving three lines of code every time!


Life hack 2:Add this site to a custom domain

My website's domain is not davidstrasak.github.io/Porfolio, but rather davidstrasak.net.

I do not want to go into all the topics that go through adding a custom domain to a page hosted on GitHub pages, but I want to show how can you automatically add the custom domain when using gh-pages.

You see, if you try to use gh-pages with a custom domain, your custom domain will be reset at every upload of the server.

That is because the custom domain is stored inside a file in the build folder. This file is called CNAME.

So I figured out that if I create this CNAME file inside the build folder every time after building the page, the custom URL will be set automatically. That can be done through this line.

`build`: `vite build && echo davidstrasak.net > build/CNAME`,

This code is all you'll need to automate that last annoying step of adding the custom URL of the website into GitHub pages.


If you've read this so far, you can now go and create a website that you can call your own! Design it how you want and use all the svelte frameworks you can find!

Because what could go wrong?