Appearance
Site Maintenance Guide
This site is built on VitePress, but it uses a custom "Auto-Sidebar" logic to make your life easier. You do not need to edit specific config files for every single page you create.
The Golden Rule
Filesystem = Structure. If you want to change the order of the sidebar, you change the filename on the disk.
1. Adding a New Page
To add a new topic to an existing section (e.g., Architecture), simply create a Markdown file in that folder.
The Naming Convention: We use a Number-Name format to control the sort order.
01-Core-Architecture.md(Appears 1st)02-Etcd-Datastore.md(Appears 2nd)99-My-New-Topic.md(Appears last)
Action:
- Create
docs/architecture/07-My-New-Topic.md. - The Sidebar will automatically strip the
07-and dashes, displaying it as "My New Topic".
2. Moving or Renaming Pages
If you want to move a page from Workloads to Operations:
- Move the physical file:
mv docs/workloads/04-Autoscaling.md docs/operations/ - Rename it to fit the new sequence:
mv docs/operations/04-Autoscaling.md docs/operations/08-Autoscaling.md - Restart the dev server (sometimes required for structure changes):
npm run docs:dev
3. Adding a New Section
If you want a brand new folder (e.g., docs/certifications), you must do one configuration step because we manually define the order of sections.
Step A: Create the folder and file. mkdir docs/certificationstouch docs/certifications/01-CKA-Prep.md
Step B: Edit docs/.vitepress/config.mts. Add your new section to the sections array:
typescript
const sections = [
{ dir: 'foundations', title: 'Linux Foundations' },
{ dir: 'architecture', title: 'Architecture' },
{ dir: 'certifications', title: 'Certifications' }, // <-- Add this
// ...
]4. Editorial Style Guide
To maintain the "Premium Journal" look, use these HTML snippets.
The Question Header (H1) Used for the main title of every page.
html
<h1 class="q-header">How do I fix a CrashLoopBackOff?</h1>The Drop Cap (First Paragraph) Used for the opening summary.
html
<p class="editorial-dropcap">
This is the first letter that will be huge.
</p>