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"/
Your directory will likely be different
Modifying the docusaurus.config.ts File
Lets open the file with Nano
nano docusaurus.config.ts
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
Save with CTRL+X
Rebuilding the website
Now rebuild the site
npm run build
💬 Recent Comments