Slug Determines Page Path

When creating a new page, Stackbit asks you to choose a slug for the page. The slug determines the URL for that page. Learn more about how slug values map to URLs.

New page modal screen

The example in the image above would lead to a page content file created at content/pages/original-page-path.md.

Renaming a Page File

The URL of a page can be changed by renaming or moving the page's content file. Continuing the example above, if the page's content file was located at content/pages/original-page-path.md, that page would be available at /original-page-path on your website.

You can use the code editor to rename the content file. Right click on the file to bring up the context menu.

Code editor context menu

Choose rename. Then rename the file and click OK.

Code editor rename dialog

You can nest content files within the content/pages directory to add segments to the URL path. For example, if you moved a page to content/pages/about/company.md, the path to the page would be /about/company on your website.

Common Pitfalls

Renaming page URLs can be risky, especially if they have been previously available on your live site. Here are a few common pitfalls to be aware of when moving pages:

Filename as a Unique Identifier

The path to the page's content file is a unique identifier that Stackbit uses to tie content objects together. It's a good practice to give your content a search for a reference to the previous file path and update it appropriately.

For example, let's say you changed the path to a blog post from content/pages/blog/post-one.md to content/pages/blog/hello-world.md. A good next step is to search throughout the code for references to the original path (content/pages/blog/post-one.md) and update them to reflect the new path (content/pages/blog/hello-world.md), otherwise those references will be broken.

Your content may also be linking to the previous page's path. If you don't update those links, your users will see a 404 error instead of the page you've moved.

This can quickly be adjusted with a find-and-replace action in the code editor.

Another option is to redirect traffic from the previous URL to the new URL. If using Netlify (the default hosting provider), follow their guide for more information.