I recently launched a developer tools website called AgentsAITools. It's a collection of 90+ free online tools for developers - JSON formatter, Base64 encoder, hash generator, JWT decoder, and more.
This isn't a "how I made millions" post. It's about the technical decisions, mistakes, and lessons from building a real product.
Why I Built It
I was tired of bookmarking 15 different websites for basic developer tasks. Every time I needed to format JSON or encode Base64, I'd open a different site with different UIs, different ads, and different levels of quality.
So I decided to build my own.
The Tech Stack
Frontend: Vue.js 3 with TypeScript
Build Tool: Vite
Hosting: Cloudflare Pages (free)
CDN: Cloudflare
Domain: $12/year
Total cost: $12/year. That's it.
The SPA Problem
The biggest issue I ran into was SEO. Vue.js creates a Single Page Application (SPA), which means all pages share the same HTML. When Google's crawler visits /json-formatter and /hash-text, it sees identical HTML.
This is a disaster for SEO. Google thinks all your pages are the same content.
Solution: SSG (Static Site Generation)
I wrote a script that generates static HTML for each tool page. Now each page has:
Unique
tag<br>
Unique <br>
Unique <br>
Proper JSON-LD structured data<br>
function generateHtml(page) {<br>
let html = indexHtml;
<p>// Replace title<br>
html = html.replace(/</p>
<title>[^<]*<\/title>/, <code><title>${page.title}</title></code>);
<p>// Replace description<br>
html = html.replace(<br>
/<meta name="description" content="[^"]*"/,<br>
<code><meta name="description" content="${page.description}"</code><br>
);</p>
<p>// Replace canonical URL<br>
html = html.replace(<br>
/<link rel="canonical" href="[^"]*"/,<br>
<code><link rel="canonical" href="https://agentsaitools.com${page.path}/"</code><br>
);</p>
<p>return html;<br>
}<br>
The Canonical URL Trap<br>
Another issue: all pages had canonical URLs pointing to the homepage. This tells Google "these pages are duplicates of the homepage."</p>
<p>Fix: Each page's canonical must point to itself:<br>
/json-formatter/ → canonical: <a href="https://agentsaitools.com/json-formatter/" target="_blank" rel="noopener noreferrer">https://agentsaitools.com/json-formatter/</a><br>
/hash-text/ → canonical: <a href="https://agentsaitools.com/hash-text/" target="_blank" rel="noopener noreferrer">https://agentsaitools.com/hash-text/</a><br>
Internal Linking<br>
Ahrefs audit showed many pages had no internal links (orphan pages).</p>
<p>Solution: Add a "Related Tools" section and "All Tools" list to every page. Now each page links to 90+ other pages.<br>
Results After 3 Months<br>
Google indexed all 93 tool pages<br>
500+ daily visitors from organic search<br>
...（中间省略 3028 字）...<br>
Add to Build Process<br>
{<br>
"scripts": {<br>
"build": "vite build && node scripts/ssg.mjs"<br>
}<br>
}<br>
Key Lessons<br>
Canonical URLs must point to themselves - Not to the homepage<br>
Each page needs unique meta tags - Title, description, keywords<br>
Add structured data - JSON-LD helps search engines understand your content<br>
Test with Google's Rich Results Test - Verify your structured data<br>
Results<br>
After implementing SSG:<br>
All pages indexed by Google<br>
Unique titles in search results<br>
Proper canonical URLs<br>
Rich snippets in search results</p>
Top comments (0)