Skip to main content

Docs Only Mode

How to remove the /docs path

How to remove the /docs path from the URL. Official Docs

We will be editing the file docusaurus.config.js for this entire documentation. Or in my case docusaurus.config.ts.

Lets Change the directory to the root of the website.

cd /var/websites/"HomeLab Docs"/
note

Your directory will likely be different

Modifying the docusaurus.config.ts File

Lets open the file with Nano

nano docusaurus.config.ts
note

I am using typescript but you may be using javascript make sure you use the correct file extension or you will create a new file.

Scroll down until you see this snippet of code

  presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: './sidebars.js',
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
theme: {
customCss: './src/css/custom.css',
},
}),
],
],

Add routeBasePath: '/', // Serve the docs at the site's root above sidebarPath: './sidebars.js',

My finished changes to docusaurus.config.ts file

It should look like this

  presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
routeBasePath: '/', // Serve the docs at the site's root
sidebarPath: './sidebars.js',
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
theme: {
customCss: './src/css/custom.css',
},
}),
],
],

Now scroll down some more and find

      footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Documented Tutorial',
to: '/docs/category/documented-tutorials-',
},
{
label: 'Examples',
to: '/docs/category/examples-',
},
{
label: 'Jellyfin Extras',
to: '/docs/category/jellyfin-extras-',
},
{
label: 'Arr Self-Hosting',
to: '/docs/category/arr-self-hosting',
},
{
label: 'Videos',
to: '/docs/category/videos-tutorials',
},
],

Change '/docs/*', to '/', for every link

It should look like this

      footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Documented Tutorial',
to: '/category/documented-tutorials-',
},
{
label: 'Examples',
to: '/category/examples-',
},
{
label: 'Jellyfin Extras',
to: '/category/jellyfin-extras-',
},
{
label: 'Arr Self-Hosting',
to: '/category/arr-self-hosting',
},
{
label: 'Videos',
to: '/category/videos-tutorials',
},
],

Now save and Exit

info

Save with CTRL+X

Rebuilding the website

Now rebuild the site

npm run build


Hi, how can I help you?