From Basic WordPress to Comprehensive Hugo Framework
This weekend, I undertook what turned out to be one of the most productive web development sessions I’ve had in years. In roughly half a day, I went from a few basic WordPress pages that said nothing particularly useful to a comprehensive, professionally structured website with multiple project showcases, automated content generation, and even a second site for my experimental Life Stream program.
The Starting Point: WordPress Limitations
My previous simonhuggins.com was the typical case of a developer’s personal website - a basic WordPress installation with a handful of pages that hadn’t been updated in months. It had the usual suspects: an about page with outdated information, a contact page, and maybe a blog post or two from 2023. Nothing that truly represented the work I’d been doing or gave visitors any real insight into what I offer.
The Hugo Foundation
I’d been working with Hugo for various projects and appreciated its performance and flexibility. For this rebuild, I started with the excellent PaperMod theme but knew I wanted something more distinctive. I created a custom orange and dark color scheme that felt more personal and professional than the standard themes available.
The theme customization became the foundation for both this site and the Infinikan site I’d create later. Here’s the core color system I developed:
| |
Enter Kilocode: AI-Powered Development
The real game-changer was using Kilocode with Claude Sonnet 4. Instead of spending weeks gradually building content and functionality, I was able to:
Rapid Content Collation
With Kilocode’s help, I gathered information from various sources I’d accumulated over the years:
- Previous website content scattered across different platforms
- Project documentation from GitHub repositories
- Professional experience details from my CV and LinkedIn
- Notes about ongoing work and consulting projects
Scripted Framework Development
What started as a simple Hugo project evolved into a sophisticated framework with:
- Automated content generation from JSON data sources
- Python scripts for processing and transforming content
- Custom Hugo shortcodes for reusable components
- Integration with my existing FTP deployment system
FTP Deployment Integration
I already had a deployment framework built for A2 Hosting that only uploads changed files. Integrating this with the new Hugo setup meant I could:
- Build locally with
hugo - Deploy only changed files via FTP
- Maintain version control with Git
- Keep deployment costs minimal with my long-term hosting provider
The Portfolio Transformation
The most dramatic change was the portfolio section. I went from having essentially no public showcase of my work to comprehensive project pages covering:
- Storizzi Consulting Practice: My SAP Commerce Cloud and AI consulting work
- CopyBake AI: The product copy generation tool I developed
- Multiple GitHub Projects: From Spotify schedulers to Chrome extensions
- UsefulWebTools.com: A collection of web-based utilities with automated content management
Each project page includes technical details, business impact, and links to live demos or repositories where appropriate.
The Infinikan Connection
Having built this comprehensive framework over the weekend, I realized I could leverage it for the experimental program I’d been planning. I’ve been working on something called “Stream” for about five years now - a life management system that’s finally reached a state where I could use it with other people.
The Hugo framework made it trivial to create infinikan.com for the Life Stream program. Using the same foundation, custom shortcodes, and deployment system, I was able to:
- Create a focused site for the program
- Implement ADHD-friendly design principles
- Add email integration for program inquiries
- Maintain consistency with my professional site
Stream and Kanban Integration
The Stream work represents five years of developing a life management approach that works particularly well for people with ADHD. I’m currently building a hierarchical Kanban system that dovetails perfectly with the Stream methodology.
For now, I’m using Trello as the “beta platform” to test concepts and workflows before building the dedicated tooling. This approach lets me validate the system with real users while I continue developing the integrated solution.
Technical Highlights
Automated Content Generation
I created Python scripts that read JSON data and generate Hugo-compatible content. This is particularly useful for the web tools section, where I can maintain a single data source and automatically generate formatted content with proper categorization and links.
Custom Hugo Shortcodes
Several reusable components make content management much easier:
- Collapsible sections for ADHD-friendly progressive disclosure
- Email integration components for pre-filled contact forms
- Automated tool listings with categorization and filtering
ADHD-Friendly Design
Based on my own experience and research, I implemented:
- Progressive information disclosure
- Clear visual hierarchies
- Collapsible sections to prevent cognitive overwhelm
- Consistent navigation patterns
The AI Collaboration Process
Working with Claude Sonnet 4 through Kilocode was remarkably effective. The AI understood context across multiple files and could:
- Suggest architectural improvements
- Generate consistent content across related pages
- Help debug Hugo template issues
- Maintain consistent tone and style throughout the site
This wasn’t just “AI writes content” - it was genuine collaboration where I provided direction, context, and feedback while the AI handled implementation details and maintained consistency across the entire project.
What’s Next
This weekend’s work created the foundation for several upcoming projects:
Content Development
- Mining my previous websites for interesting historical content
- Creating articles from early tech career memorabilia
- Building out the poetry and writing section
- Consolidating several old sites into this unified platform
Audio Content
I’m planning to experiment with audio versions of articles and poetry - essentially creating a podcast-like feed without the traditional podcast format. This could be particularly interesting for the writing content.
Quality Improvements
- Fixing broken links (especially around time scheduling content)
- Improving SEO and discoverability
- Adding more interactive elements where appropriate
Lessons Learned
AI as a Development Partner
Using AI effectively for web development isn’t about replacing human creativity - it’s about augmenting it. Claude Sonnet 4 excelled at maintaining consistency, handling repetitive tasks, and offering architectural suggestions, while I focused on strategy, design decisions, and content direction.
Framework Thinking
Building the Hugo framework first, then applying it to multiple sites (simonhuggins.com and infinikan.com) proved much more efficient than building each site individually. The shared components, styling, and deployment infrastructure saved significant time.
Content-First Development
Having the AI help organize and present existing content revealed gaps and opportunities I hadn’t noticed. The process of creating comprehensive project pages helped clarify my professional narrative and identify areas for future development.
Download the Theme
If you’re interested in the Hugo theme foundation I created, you can download it here. It’s built on PaperMod with custom orange styling and includes examples of the shortcodes and components I developed.
The theme isn’t a polished commercial product - it’s the working foundation I created for these sites. But it might serve as a useful starting point if you want to build something similar.
This article represents exactly the kind of authentic, technical content I wanted this new website to showcase. No hyperbole, no fictional metrics - just a genuine account of a productive weekend building something useful with modern tools.
Contact: If you’re interested in similar website development work or want to discuss the Life Stream program, reach out at simon@simonhuggins.com.