When I started my digital marketing project, I decided to build a custom e-commerce website from scratch for a hypothetical Ayurvedic brand called Shuddhi.
Instead of using a heavy CMS like WordPress or Shopify, I built the site using pure HTML, CSS, and vanilla JavaScript. This gave me complete control over the code and allowed me to implement advanced technical SEO from the ground up.
Here is a breakdown of the tech stack, the technical challenges I faced, and how I optimized the site for search engines.
🛠️ The Tech Stack
- Frontend: Semantic HTML5, CSS3 (custom branding), Vanilla JS.
- Hosting/Deployment: Vercel (connected via GitHub for continuous deployment).
- AI Coding Assistant: Cursor (which massively sped up the HTML generation).
- Design: Canva (for generating product mockups and brand assets).
🚧 Technical Challenges & Fixes
1. The Vercel Edge Cache Issue
Early on, I made changes to my canonical tags in the code, but the live site wasn't updating. I discovered that Vercel was serving a cached version from the Edge network. I had to learn how to bypass the build cache and force a fresh deployment to ensure Google was reading the most up-to-date HTML.
2. Fixing Canonical Tags
As a new domain, avoiding duplicate content was critical. I wrote a script to ensure every single page (index.html, shop.html, journal.html) has a self-referencing canonical tag pointing to the https://www.shuddhi.space/ domain.
3. Implementing Structured Data
To get Rich Snippets in Google search results, I injected JSON-LD schemas directly into the of the HTML files:
- LocalBusiness schema to link the site to the Google Business Profile.
- Product schema to display prices and stock status.
- FAQPage schema to target "People Also Ask" search results.
📈 The SEO Strategy
To prove the site worked, I wrote a highly researched, science-backed article about the benefits of copper water bottles.
I wanted to ensure this content ranked well and was safe for AI search engines (like ChatGPT and Perplexity). So, I created a custom llms.txt file and updated the robots.txt to explicitly allow AI crawlers to read the content.
🚀 The Final Result
If you want to see the final product (and the science article I wrote to test the SEO), you can check it out here:
👉 [Copper Water Bottle Benefits: What Science Really Says](https://www.shuddhi.space/copper-bottle-benefits-science.html)****
Building a site from scratch and optimizing it technically has been an incredible learning experience. If you are building a static e-commerce site, my biggest tip is to focus on your core web vitals and structured data early.
Have you ever built an e-commerce site without a CMS? Let me know your experience in the comments!
Top comments (1)
The edge cache lesson is the one I'd underline. On a small business site, fixing the code and still seeing the old page live is confusing — and customers and Google see the stale version too. The Product schema with price and stock is smart as well. That's the part that actually helps someone deciding in search, not just ranking for its own sake.