OSI Global — Website Refresh

Frontend: Astro, Vue
CMS: Keystatic, Markdoc
Infrastructure: GitHub Pages, GitHub Actions
Integrations: HubSpot CRM

What we built

We ripped out OSI Global's legacy WordPress installation and replaced it with a lightning-fast static site. To hit strict performance targets, we scaffolded the core project in Astro and built interactive client-side components with Vue. We host the staging and production environments on GitHub Pages, deploying automatically via CI pipelines.

The core requirement was a seamless content editing experience without the bloat of a traditional database. We implemented Keystatic, which stores all content—pages, blogs, and SEO metadata—directly in the GitHub repository. The marketing team edits content through a clean UI, while authors format blog posts in Markdoc. We migrated their entire historical blog archive and set up native Astro image optimization to automatically handle all inline post media.

The tricky part was the product catalog. OSI handles a massive volume of B2B hardware SKUs. We split their global data tables by manufacturer to keep page generation fast. Then, we built a custom Vue catalog interface featuring free-text search and advanced filtering. Buyers browse inventory, build a quote cart, and submit requests that we route instantly into HubSpot.

To keep prices and inventory accurate, we bypassed manual data entry entirely. We built a custom sync button inside Keystatic that pulls fresh catalog data directly from Google Sheets into the site's data layer.