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