Skip to main content

Configuration

info

Check the docusaurus.config.js API reference
for a complete list of all available options.

CodeHarborHub is powered by Docusaurus. Its configuration is centralized in a single file: docusaurus.config.js. This file defines your site’s metadata, theme options, plugins, and deployment settings.

Keeping a well-maintained config helps contributors focus on docs and code while still allowing full customization.

Syntax to declare docusaurus.config.js​

The configuration file runs in Node.js and can export either:

  • a config object, or
  • a function that returns a config object (sync or async).
info

The docusaurus.config.js file supports:

Constraints:

  • Required: use export default /* your config*/ (or module.exports) to export your Docusaurus config
  • Optional: use import Lib from 'lib' (or require('lib')) to import Node.js packages

Examples:

docusaurus.config.js
export default {
  title: 'CodeHarborHub',
  url: 'https://codeharborhub.github.io',
  baseUrl: '/',
};
docusaurus.config.js
module.exports = {
  title: 'CodeHarborHub',
  url: 'https://codeharborhub.github.io',
  baseUrl: '/',
};
docusaurus.config.ts
import type {Config} from '@docusaurus/types';

export default {
  title: 'CodeHarborHub',
  url: 'https://codeharborhub.github.io',
  baseUrl: '/',
} satisfies Config;

Async configs allow you to dynamically import ESM-only modules:

docusaurus.config.js
export default async function createConfig() {
  const somePlugin = await import('remark-plugin');
  return {
    title: 'CodeHarborHub',
    url: 'https://codeharborhub.github.io',
    baseUrl: '/',
    plugins: [somePlugin.default],
  };
}

Key Configuration Sections​

Site metadata​

Define global site information:

docusaurus.config.js
export default {
  title: 'CodeHarborHub',
  tagline: 'Learn. Build. Grow.',
  url: 'https://codeharborhub.github.io',
  baseUrl: '/',
  favicon: 'img/favicon.ico',
};
  • title – Shown in the browser tab and search engines.
  • tagline – Used in meta tags and the homepage hero.
  • url & baseUrl – Base domain and subpath for deployment.
  • favicon – Path to your site’s icon.

Deployment configurations​

If you plan to deploy to GitHub Pages:

export default {
  organizationName: 'CodeHarborHub', // GitHub org/user
  projectName: 'codeharborhub.github.io', // Repository name
  deploymentBranch: 'gh-pages',
};

See Deployment for full instructions.

Theme, plugins, and presets​

List all themes, plugins, and presets to extend functionality:

export default {
  plugins: [
    '@docusaurus/plugin-content-blog',
    '@docusaurus/plugin-content-pages',
  ],
  themes: ['@docusaurus/theme-classic'],
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {sidebarPath: './sidebars.js'},
        blog: {showReadingTime: true},
        theme: {customCss: './src/css/custom.css'},
      },
    ],
  ],
};

💡 Use shorthands for convenience:

plugins: ['content-blog', 'content-pages'],
themes: ['classic'],

You can also load local plugins:

import path from 'path';

export default {
  plugins: [path.resolve(__dirname, './plugins/customPlugin')],
};

Custom fields​

Add project-specific data under customFields:

export default {
  customFields: {
    repoUrl: 'https://github.com/CodeHarborHub/codeharborhub.github.io',
    discordLink: 'https://discord.gg/',
  },
};

These values can be accessed inside React components via siteConfig.

Accessing Configuration in Components​

Use the useDocusaurusContext hook to read config values:

import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function FooterInfo() {
  const {siteConfig} = useDocusaurusContext();
  return <p>© {new Date().getFullYear()} {siteConfig.title}</p>;
}

Customizing Babel​

Docusaurus transpiles source code with Babel. To customize Babel, create a babel.config.js in your project root:

npm install --save @docusaurus/babel
babel.config.js
export default {
  presets: ['@docusaurus/babel/preset'],
};

Restart the dev server for changes to take effect.

Tips for CodeHarborHub​

  • Keep SEO fields (title, description, keywords) updated for better visibility.
  • Use environment variables (process.env) for secrets like analytics keys.
  • Store commonly reused links (GitHub, Discord) in customFields to update them in one place.

🎯 With a well-structured docusaurus.config.js, you can manage site-wide settings, themes, and plugins easily, making CodeHarborHub scalable and contributor-friendly.