Docusaurus Pro - Advanced Features for My Personal Blog

After setting up my basic Docusaurus blog in my previous post, I wanted to take it to the next level with some professional features. ✨

Moving Beyond the Basics

When I first started with Docusaurus, I was impressed by how quickly I could get a clean, functional blog running. But as someone who writes a lot of technical content with mathematical equations, diagrams, and code snippets, I needed more sophisticated tools.

Here's what I've added to transform my blog from good to great:

KaTeX Mathematical Notation

As a Control Systems researcher, mathematical equations are a huge part of my work. KaTeX integration was absolutely essential for me.

Implementation

// docusaurus.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

const config = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
        blog: {
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
      integrity: 'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
};

Usage Examples

Now I can write beautiful mathematical equations inline like $f(x) = x^2 + 2x + 1$ or in display mode:

$$\begin{aligned} \dot{x} &= Ax + Bu \\ y &= Cx + Du \end{aligned}$$

Pro tip: I learned the hard way that you need to add spaces around subscripts and special characters to avoid parsing errors by MDX:

# ❌ This will cause errors
$$J_{t\to t_f}$$
$$J^{t\to t_f}$$

# ✅ This works perfectly
$$J _ { t \to t_f}$$
$$J ^ { t \to t_f}$$

Algolia Search Integration

Nothing beats having a powerful search function for a technical blog. Algolia's DocSearch is incredibly smooth and provides instant, contextual results.

Configuration

// docusaurus.config.js
themeConfig: {
  algolia: {
    appId: 'YOUR_APPID',
    apiKey: 'YOUR_APIKEY',
    indexName: 'YOUR_INDEXNAME',
    contextualSearch: true,
    searchParameters: {},
    searchPagePath: 'search',
  },
}

Google Analytics & Search Console

Understanding how people interact with my blog helps me create better content. I've integrated both Google Analytics and Search Console for comprehensive insights.

Google Analytics (gtag)

// docusaurus.config.js
plugins: [
  [
    '@docusaurus/plugin-google-gtag',
    {
      trackingID: 'YOUR_TRACKINGID',
      anonymizeIP: true, // Privacy-friendly!
    },
  ],
],

Google Search Console

// docusaurus.config.js
themeConfig: {
  metadata: [
    {
      name: 'google-site-verification',
      content: 'YOUR_CONTENT',
    },
  ],
}

Mermaid Diagrams

For visualizing system architectures, flowcharts, and research methodologies, Mermaid integration is a game-changer.

Setup

// docusaurus.config.js
themeConfig: {
  mermaid: {
    theme: {light: 'neutral', dark: 'forest'},
  },
}

Example Usage

graph TD
    A[User Request] --> B{Authentication}
    B -->|Valid| C[Process Request]
    B -->|Invalid| D[Return Error]
    C --> E[Generate Response]
    E --> F[Send to User]

Enhanced Syntax Highlighting

As someone who works with multiple programming languages and MATLAB, having proper syntax highlighting is crucial.

Prism Configuration

// docusaurus.config.js
themeConfig: {
  prism: {
    theme: prismThemes.github,        // Light theme
    darkTheme: prismThemes.dracula,   // Dark theme
    additionalLanguages: ['matlab', 'bash'],
  },
}

Supported Languages

Now I can showcase code in various languages with beautiful highlighting:

MATLAB (essential for my control systems work):

function [K, S, e] = lqr(A, B, Q, R)
    % Linear Quadratic Regulator design
    [S, e] = care(A, B, Q, R);
    K = R \ (B' * S);
end

JavaScript (for web development content):

const processControlSignal = (reference, feedback) => {
  const error = reference - feedback;
  return pid.compute(error);
};

Bash (for deployment scripts):

#!/bin/bash
yarn build
yarn deploy
echo "Blog deployed successfully! 🚀"

🌐 Multilingual Foundation

While I primarily write in English, I've set up the infrastructure for future multilingual content:

// docusaurus.config.js
i18n: {
  defaultLocale: 'en',
  locales: ['en', 'zh-Hans', 'ja'],
  localeConfigs: {
    en: { htmlLang: 'en-US', label: 'English' },
    'zh-Hans': { htmlLang: 'zh-CN', label: '简体中文' },
    ja: { htmlLang: 'ja', label: '日本語' },
  },
}

🚀 Performance & SEO Optimizations

Beyond features, I've focused on performance and discoverability:

Archive Page

I've enabled a dedicated archive page at /blog/archive for better content organization and discovery.

🔧 Development Workflow

With all these features, my content creation workflow has become incredibly smooth:

1. Write in Markdown with LaTeX math notation
2. Preview locally with yarn start
3. Push to GitHub for automatic deployment
4. Monitor performance through Analytics
5. Optimize based on search console insights

What's Next?

Looking ahead, I'm excited to further enhance my blog with these upcoming features:

• Giscus GitHub Discussions: Enable readers to comment and discuss posts using GitHub, fostering a collaborative community.
• Sitemap Generation: Improve SEO and site discoverability by automatically generating a sitemap for search engines.
• OpenAPI Integration: Document and showcase APIs directly within the blog for technical transparency and developer engagement.
• Custom React Components: Add interactive and dynamic elements to posts, such as live demos, calculators, or visualizations.
• Progressive Web App (PWA) Support: Make the blog installable and accessible offline, delivering a seamless app-like experience.

Stay tuned as I continue to push the boundaries of what's possible with Docusaurus!

Wrapping Up

These advanced features have transformed my Docusaurus blog from a simple static site into a powerful platform for technical communication. Whether you're a researcher, developer, or technical writer, these tools can significantly enhance your content creation capabilities.

---

Have questions about implementing any of these features? Feel free to reach out through any of the channels listed on my about page.