---

Table of Contents

• 1. Sveltkit project setup
  • Create a project
  • Change adapter to adapter-static.
  • Install Mdsvex and configure.
• 2. Github Pages setup.
  • Create a repository.
  • Set git remote in the sveltkit application you made in the previous step.
  • Install gh-pages.
  • Add deploy command in package.json file.
  • Run the deploy command
• References

1. Sveltkit project setup

Create a project

npm create svelte@latest app

Change adapter¹ to adapter-static².

To use SveltKit as a static site generator(SSG)³, use adapter-static.

Install with

npm i -D @sveltejs/adapter-static

Then add the adapter to your svelte.config.js:

import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config  {
    kit: {
        adapter: adapter({strict: false})
    }
}
export default config

By default, adapter-static checks that either all pages and endpoints (if any) of your app were prerendered, or you have the fallback option set. This check exists to prevent you from accidentally publishing an app where some parts of it are not accessible, because they are not contained in the final output. If you know this is ok (for example, when a certain page only exists conditionally), you can set strict to false to turn off this check.

Install Mdsvex and configure.

Install with

npm i -D mdsvex

Add configuration file for mdsvex⁴. Name it mdsvex.config.js

import { defineMDSveXConfig as defineConfig } from 'mdsvex';
const config = defineConfig({
	extensions: ['.svelte.md', '.md', '.svx'],

	smartypants: {
		dashes: 'oldschool'
	},

	remarkPlugins: [],
	rehypePlugins: []
});
export default config;

Then add the mdsvex preprocessor to svelte.config.js with the configuration defined above.

import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';
const config = {
	extensions: ['.svelte', ...mdsvexConfig.extensions],
	preprocessors: [mdsvex(mdsvexConfig)]
};

export default config;

2. Github Pages setup.

Create a repository.

Create a repository and name it username.github.io, where username is your username(or organization name) on Github. If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

Set git remote in the sveltkit application you made in the previous step.

git remote add origin https://github.com/username/username.github.io

Install gh-pages.

npm i -d gh-pages

Add deploy command in package.json file.

{
	"scripts": {
		"deploy": "vite build & gh-pages -d build -t true"
	}
}

Run the deploy command

npm run deploy

References

• https://github.com/mvasigh/sveltekit-mdsvex-blog
• https://mdsvex.pngwn.io/docs#highlight
• https://kit.svelte.dev/docs/adapters#using-adapters
• https://github.com/sveltejs/kit/tree/main/packages/adapter-static
• https://mdsvex.pngwn.io/docs