05. Removing the Tutorial and Organizing Menus

1. Delete the default tutorial

Location	Deleted
docs/	tutorial-basics/, tutorial-extras/, default intro.md
Root	Entire blog/ folder
src/pages/	index.js, index.module.css, markdown-page.md
src/components/	HomepageFeatures/

Keep src/css/custom.css and static/.

2. docusaurus.config.js changes

  presets: [
    [
      'classic',
      ({
        docs: {
          routeBasePath: '/',          // serve docs as the site home
          sidebarPath: './sidebars.js',
          showLastUpdateTime: true,    // show last-updated date at the bottom of each doc
        },
        blog: false,                   // disable the blog
        theme: {
          customCss: './src/css/custom.css',
        },
      }),
    ],
  ],

Navbar:

        items: [
          {type: 'docSidebar', sidebarId: 'securitySidebar', position: 'left', label: 'Security'},
          {type: 'docSidebar', sidebarId: 'itSidebar', position: 'left', label: 'IT'},
          {
            href: 'https://github.com/InseokJeon-Sec/SecureNomad',
            label: 'GitHub',
            position: 'right',
          },
        ],

3. sidebars.js

Each folder under docs maps to one sidebar.

sidebars.js

const sidebars = {
  securitySidebar: [{type: 'autogenerated', dirName: 'security'}],
  itSidebar: [{type: 'autogenerated', dirName: 'it'}],
};

export default sidebars;

4. Document structure at this point

docs/
├── intro.md                         # Home page (slug: /)
├── security/
│   └── overview.md
└── it/
    ├── overview.md
    └── docusaurus-setup/            # IT > Docusaurus Setup
        ├── _category_.json
        ├── 01-environment.md
        ├── 02-create-project.md
        ├── 03-github-repository.md
        ├── 04-github-pages-deploy.md
        ├── 05-site-structure.md
        └── troubleshooting/
            ├── _category_.json
            └── 01 ~ 08 one doc per error

5. Structure rules

Navbar               ← docusaurus.config.js + sidebars.js
  └ Sidebar          ← top-level folder under docs (security, it)
      └ Category     ← subfolder (collapsible menu)
          └ Document ← .md file

Category name / order: _category_.json

docs/it/docusaurus-setup/_category_.json

{
  "label": "Docusaurus Setup",
  "position": 2,
  "collapsed": false,
  "link": {
    "type": "generated-index",
    "description": "Build log"
  }
}

Field	Meaning
label	Name shown in the menu
position	Order (smaller comes first)
collapsed	Whether it starts collapsed
link.generated-index	Auto-generates a page listing child docs when the category is clicked

Document name / order: front matter

---
title: XSS (Cross-Site Scripting)
sidebar_label: XSS
sidebar_position: 1
---

Adding a navbar menu

1. Create at least one doc in docs/<new-folder>/ (an empty folder breaks the build)
2. Add newSidebar: [{type: 'autogenerated', dirName: '<new-folder>'}], to sidebars.js
3. Add {type: 'docSidebar', sidebarId: 'newSidebar', position: 'left', label: 'Menu'}, to navbar.items in the config

:::tip Naming rules

• Use lowercase letters and hyphens for folder and file names (they become URLs)
• Set display names with label, title, and sidebar_label
• Number prefixes such as 01- are for ordering and are removed from URLs automatically
• Moving a folder changes its URL, so set slug in front matter for docs whose URL must stay fixed :::

6. Update routine

npm start          # preview while writing (localhost:3000)
npm run build      # check for errors before pushing

Then Commit to main → Push origin in GitHub Desktop. Changes appear on the site 2–3 minutes later.