svelte-sitemap

Svelte sitemap.xml generator

Small helper which scans your Svelte routes and generates sitemap.xml

• Designed for SvelteKit adapter-static with prerender option (SSG)
• TypeScript, JavaScript, CLI version
• Useful options for customizing your sitemap
• Support for submiting sitemap to Google Search Console
• Support for Google sitemap index. Useful for large sites (more than 50K pages)
• Also compatible with Vercel hosting
• Workaround for this official SvelteKit issue

Install

npm install svelte-sitemap --save-dev
# yarn add svelte-sitemap --dev

Usage

Use this library as a postbuild hook in your package.json file.

File: package.json

{
  "name": "my-awesome-project",
  "scripts": {
    "postbuild": "npx svelte-sitemap --domain https://myawesomedomain.com"
  }
}

It scans your routes in build/ folder and generates build/sitemap.xml file.

Alternative usage: TypeScript or JavaScript method

Sometimes it can be useful to call the script directly from JavaScript or TypeScript. Of course there is also this option, but in most cases you will need the CLI method as a postbuild hook.

File my-script.js:

import { createSitemap } from 'svelte-sitemap/src/index.js';

createSitemap('https://example.com', { debug: true });

And now you can run your script like this: node my-script.js

⚙️ Options

Option	Description	Default	Example
--domain, -d	Use your domain [required]	-	-d https://mydomain.com
--out-dir, -o	Set custom build folder	build	-o dist
--additional, -a	Additional pages outside of SvelteKit	-	-a my-page -a my-second-page
--ignore, -i	Ignore files or folders	[]	-i '**/admin/**' -i 'my-secret-page'
--trailing-slashes, -t	Add trailing slashes	false	--trailing-slashes
--reset-time, -r	Set lastModified time to now	false	-r
--change-freq, -c	Set change frequency Option	-	--change-freq daily
--help, -h	Display this usage info	-	-h
--version, -v	Show version	-	-v
--debug	Show some useful logs	-	--debug

🙋 FAQ

How to exclude directory?

Let's say we want to ignore all admin folders and subfolders + just one exact page pages/my-secret-page

npx svelte-sitemap --domain https://www.example.com --ignore 'pages/my-secret-page' --ignore '**/admin/**'

Ping Google Search Console

Every time I deploy a new version, I want to inform Google that there is a new update.

See this discussion with very useful tips.

Error: Missing folder

× Folder 'build/' doesn't exist. Make sure you are using this library as 'postbuild' so 'build/' folder was successfully created before running this script.

• Make sure your output folder exists. If it has other name than the default build, you can use the outDir (--out-dir) option.

Vercel apdatper

• If you are using Vercel hosting and adapter-vercel you'll probably want to use it like this:

npx svelte-sitemap --out-dir .vercel/output/static --domain https://www.example.com

Or check out other solutions and join the discussion.

Cloudflare adapter

• If you're using @sveltejs/adapter-cloudflare to deploy your app to Cloudflare Pages, you'll need to add some options to your adapter in svelte.config.js:

-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-cloudflare';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
-       adapter: adapter()
+       adapter: adapter({ routes: { include: ['/*'], exclude: ['<all>', '/sitemap.xml'] }})
    }
};

export default config;

Error: Missing html files

× There is no static html file in your 'build/' folder. Are you sure you are using Svelte adapter-static with prerender option?

This library is intended for the static adapter and prerender option (SSG). So if there are no static files, then my library will not work for you :/

⭐️ Show your support

Give a ⭐️ if this project helped you!

Or if you are brave enough consider making a donation for some 🍺 or 🍵 ;)

🕵️ Privacy Policy

I DO NOT STORE ANY DATA. PERIOD.

I physically can't. I have nowhere to store it. I don't even have a server database to store it. So even if Justin Bieber asked nicely to see your data, I wouldn't have anything to show him.

That's why, with this library, what happens on your device stays on your device till disappear.

🤝 Contributing

I welcome you to customize this according to your needs ;)

Pull requests for any improvements would be great!

Feel free to check issues page.

Developing and debugging this library

git clone [e-mail]:bartholomej/svelte-sitemap.git
cd svelte-sitemap
yarn
yarn start

Run demo locally

You can find and modify it in ./demo.ts file

yarn demo

🙏 Credits

• svelte-sitemap is workaround for this official SvelteKit issue
• Brand new version is inspired by Richard's article
• Thanks to @auderer because his issue changed the direction of this library

📝 License

Copyright © 2024 Lukas Bartak

Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)

All contents are licensed under the MIT license.