Small helper which scans your Svelte routes folder and generates static sitemap.xml
npm install svelte-sitemap
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
``bash`
npm install svelte-sitemap --save-devyarn add svelte-sitemap --dev
> Use this library as a postbuild hook in your package.json file.
File: package.json
`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.
> 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:
`typescript
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
| 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 |
> Let's say we want to ignore all admin folders and subfolders + just one exact page pages/my-secret-page
`bash`
npx svelte-sitemap --domain https://www.example.com --ignore 'pages/my-secret-page' --ignore '/admin/'
> 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.
> × 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:
`bash`
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:
`diff
-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: ['
}
};
export default config;
`
> × 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 :/
Give a ⭐️ if this project helped you!
Or if you are brave enough consider making a donation for some 🍺 or 🍵 ;)
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.
I welcome you to customize this according to your needs ;)
Pull requests for any improvements would be great!
Feel free to check issues page.
`bash`
git clone git@github.com:bartholomej/svelte-sitemap.git
cd svelte-sitemap
yarn
yarn start
#### Run demo locally
You can find and modify it in ./demo.ts file
`bash``
yarn demo
- 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
Copyright © 2024 Lukas Bartak
Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)
All contents are licensed under the [MIT license].
[mit license]: LICENSE