I recently built a developer tools collection website. Ran into a lot of issues along the way, but also learned a ton. Here's my experience with the tech stack and implementation.
Background
I got tired of needing various online tools while coding - JSON formatter, Base64 converter, hash generator, etc. Had them all bookmarked in different places, couldn't find what I needed quickly.
So I decided to build my own. One place with everything I need.
Tech Stack
Frontend: Vue 3 + TypeScript
Why Vue 3:
- Composition API feels natural
- Great TypeScript support
- Mature ecosystem with good component libraries
// Tool definition example
export const tool = defineTool({
name: 'Hash Text',
path: '/hash-text',
description: 'Generate MD5, SHA256 hashes',
keywords: ['hash', 'md5', 'sha256'],
component: () => import('./hash-text.vue'),
});
Build Tool: Vite
Vite's dev experience is really good:
- Fast hot reload
- Simple config
- Quick builds
Deployment: Cloudflare Pages
Why Cloudflare Pages:
- Free tier is enough
- Global CDN acceleration
- Automatic HTTPS
- Easy deployment
Issues I Encountered
- SPA SEO Problem
This was the biggest issue. Vue SPA returns the same HTML for all pages. Search engine crawlers see empty shells.
Solution: SSG pre-rendering
I wrote an SSG script that generates independent HTML for each tool page:
function generateHtml(page) {
let html = indexHtml;
// Replace Title
html = html.replace(/
[^<]*<\/title>/, <code><title>${page.title}</title></code>);
<p>// Replace Meta Description<br>
html = html.replace(/<meta name="description" content="[^"]*"/, <br>
<code><meta name="description" content="${page.description}"</code>);</p>
<p>// Replace Canonical URL<br>
html = html.replace(/<link rel="canonical" href="[^"]*"/, <br>
<code><link rel="canonical" href="https://agentsaitools.com${page.path}/"</code>);</p>
<p>return html;<br>
}</p>
<ol>
<li>Canonical URL Issue
At first, all pages had canonical pointing to homepage, causing sub-pages to not be indexed.
Solution: Ensure each page's canonical points to its own URL.</li>
<li>Internal Link Issue
Ahrefs audit found many pages had no internal links (orphan pages).
Solution: Add related tools recommendation and complete tool list on each page.
Architecture
src/
├── tools/ # Tool definitions
│ ├── hash-text/
│ │ ├── index.ts
│ │ └── hash-text.vue
│ └── ...
├── pages/ # Page components
├── layouts/ # Layout components
└── components/ # Shared components</li>
</ol>
<p>scripts/<br>
└── ssg.mjs # SSG pre-render script</p>
<p>SEO Optimization</p>
<ol>
<li><p>Structured Data<br>
Each tool page has its own JSON-LD:<br>
{<br>
"<a class="mentioned-user" href="https://dev.to/context">@context</a>": "<a href="https://schema.org" target="_blank" rel="noopener noreferrer">https://schema.org</a>",<br>
"@type": "WebPage",<br>
"name": "Hash Generator",<br>
"description": "Generate MD5, SHA256 hashes online",<br>
"url": "<a href="https://agentsaitools.com/hash-text/" target="_blank" rel="noopener noreferrer">https://agentsaitools.com/hash-text/</a>"<br>
}</p></li>
<li><p>Breadcrumb Navigation<br>
{<br>
"@type": "BreadcrumbList",<br>
"itemListElement": [<br>
{"position": 1, "name": "Home"},<br>
{"position": 2, "name": "Crypto"},<br>
{"position": 3, "name": "Hash Generator"}<br>
]<br>
}</p></li>
<li><p>Meta Tags<br>
Each page has independent:</p></li>
<li><p>Title</p></li>
<li><p>Description</p></li>
<li><p>Canonical URL</p></li>
<li><p>OG tags</p></li>
<li><p>Twitter tags<br>
Performance Optimization</p></li>
<li><p>Code splitting - Lazy loading by route</p></li>
<li><p>CDN acceleration - Cloudflare global nodes</p></li>
<li><p>Asset compression - Terser for JS</p></li>
<li><p>Caching strategy - Long-term cache for static assets<br>
Cost<br>
Item<br>
Cost<br>
Domain<br>
$12/year<br>
Hosting<br>
Free<br>
CDN<br>
Free<br>
SSL<br>
Free<br>
Total<br>
$12/year<br>
Summary<br>
Learned a lot from this project:</p></li>
<li><p>SPA SEO issues need SSG solution</p></li>
<li><p>Structured data is important for SEO</p></li>
<li><p>Internal link structure affects indexing</p></li>
<li><p>Performance optimization is ongoing<br>
If you're working on a similar project, I hope these experiences help.<br>
Source code: <a href="https://github.com/ruoyexipan/it-tools" target="_blank" rel="noopener noreferrer">https://github.com/ruoyexipan/it-tools</a></p></li>
</ol>
Top comments (0)