Changing the (blog) articles path

Updated on

In this guide, we will change the path of the blog from /all-articles to /blog.

The path of the blog is defined in the allArticlesPath variable in site.settings.js. By default, it is set to /all-articles.

Here's what we need to do:

  1. Change the allArticlesPath variable in site.settings.js to /blog
  2. Rename the /app/all-articles folder to /app/blog
  3. Optionally, update any links to /all-articles to /blog

Heads up!

In site.settings.js you'll also see a variable called blogPath. This is the path where Shipixen looks for .mdx blog posts under /data. It is not the path of the blog itself. By default, it is set to '', meaning any .mdx files under /data will be treated as blog posts.

1. Change the allArticlesPath variable in site.settings.js to /blog

Open /data/config/site.settings.js and change the allArticlesPath variable to /blog.

/data/config/site.settings.js
const { metadata } = require('./metadata');

/** @typedef {import("siteSettingsInterface.ts").SiteConfig } */
const siteConfig = {
  ...metadata,

  blogPath: '', // Best for SEO is to have articles under the root path.
- allArticlesPath: '/all-articles',
+ allArticlesPath: '/blog',
  ...
};

2. Rename the /app/all-articles folder to /app/blog

This is where the blog page components are located by default. We need to rename this folder to /app/blog.

It is common to have linked to the blog from either the header navigation, the footer links or search bar. If you have done this, you will need to update the links to /blog.

Updating the header navigation

Update the articles link in headerNavLinks.ts to /blog.

/data/config/headerNavLinks.ts
export const headerNavLinks = [
  { href: '/', title: 'Home' },
  { href: '/pricing', title: 'Pricing' },
  { href: '/about', title: 'About' },
- { href: '/all-articles', title: 'Articles' }
+ { href: '/blog', title: 'Blog' }
];

Update the articles link in footerNavLinks.ts to /blog.

/data/config/footerNavLinks.ts
export const footerLinks = [
  {
    columnName: 'Company',
    links: [
      { href: '/', title: 'Home' },
      { href: '/pricing', title: 'Pricing' },
      { href: '/about', title: 'About' },
-     { href: '/all-articles', title: 'All articles' }
+     { href: '/blog', title: 'Blog' }
    ]
  },
  ...
];

Update the articles link in searchLinks.ts to /blog.

/data/config/searchLinks.ts
export const searchLinks = [
  ...
  {
    id: 'all-articles',
-   name: 'Articles',
+   name: 'Blog',
    keywords: '',
    section: 'Navigation',
-   href: '/all-articles'
+   href: '/blog'
  }
  ...
]