Building an Interactive Terminal for My Hugo Blog

May 20, 2025
#hugo #web-development #blog
coding

The Journey Begins

When I decided to create my personal website, I wanted something unique that reflected my love for technology and development. A static Hugo blog was perfect for the foundation, but I wanted to add something special - an interactive terminal component that visitors could actually use.

Why a Terminal?

The idea came from my daily workflow. As a developer, I spend most of my time in terminals, typing commands, and navigating through systems. What if I could bring that experience to my website? Not just as a visual gimmick, but as a functional interface that visitors could interact with.

The Technical Challenge

Building an interactive terminal in a static site presented several interesting challenges:

1. Framework Choice

I started with plain JavaScript, but quickly realized I needed something more robust. After experimenting with Preact, I settled on React with TypeScript for type safety and better component management.

2. Build System

Vite became the obvious choice for building the React component. Its fast compilation and excellent TypeScript support made development smooth and efficient.

3. Integration with Hugo

The biggest challenge was integrating a modern React component into a static Hugo site. The solution was to:

  • Build the component as an IIFE bundle
  • Include it in Hugo’s static files
  • Initialize it with inline JavaScript in the base template

The Implementation

The terminal component consists of two main parts:

TerminalWindow Component

Handles the modal display for command output, with:

  • Click outside to close
  • Escape key to close
  • Terminal-styled appearance

Terminal Component

Manages the interactive input with:

  • Real-time typing with cursor following
  • Command parsing and execution
  • State management for typed text

Fun Features Added

Beyond basic navigation, I added some entertaining Easter eggs:

  • sudo rm -rf /* - Shows a friendly “Nice try! 😄” message
  • whoami - Returns “web-user”
  • pwd - Shows “/home/coryrenard.com”
  • date - Displays current date/time
  • echo [text] - Echoes back any text

The Result

The final implementation provides a seamless experience where visitors can:

  • Type commands naturally
  • Navigate between pages using cd commands
  • Use cd .. to go back (browser back button)
  • Explore fun Unix-style commands
  • Get immediate visual feedback

Lessons Learned

This project reinforced several important principles:

  1. Start Simple: Begin with basic functionality and iterate
  2. Choose the Right Tools: React + TypeScript + Vite was the perfect combination
  3. User Experience Matters: The terminal feels natural and responsive
  4. Have Fun: Easter eggs and playful responses make the experience memorable

What’s Next?

The terminal is just the beginning. I’m considering adding:

  • More sophisticated command parsing
  • File system simulation
  • Custom commands for different sections
  • Command history and auto-completion

The interactive terminal has become more than just a navigation tool - it’s a conversation starter and a reflection of my development philosophy. It shows that even static websites can be dynamic and engaging.

Try typing help in the terminal to see all available commands!