Our own website ·
This website: a fast, search-ready studio site on Cloudflare Workers
How we built hadesstudio.dev with Next.js on Cloudflare Workers: prerendered pages, structured data on every page and a contact form with no third-party email service.
The site you are reading is a small project, and you can inspect all of it yourself. View the source, run a Lighthouse audit, or submit the contact form.
Goals
- Load fast on a phone over a slow connection
- Give search engines everything they need to understand each page
- Cost almost nothing to run
- Let us publish articles and case studies by adding a Markdown file
What we built
Prerendered pages
Every page is rendered at build time and served from Cloudflare's network. The only code that runs per request is the contact form endpoint.
Search fundamentals on every page
- A unique title, description and canonical URL per page
- A sitemap and robots file generated from the content
- Structured data: organization, service, FAQ, article and breadcrumb markup
- A generated social sharing image
- Semantic HTML with one top-level heading per page
Content as Markdown
Articles and case studies are Markdown files in the repository. A build step converts them to HTML, so no content is fetched or parsed when a visitor loads a page.
A contact form without an email provider
The form posts to an endpoint on the same Worker, which validates the input and sends the inquiry through Cloudflare Email Routing. There is no third-party email service and no API key to manage. A hidden field and a minimum fill time filter out automated submissions.
Problems we ran into
Moving from a conventional Node.js host to Workers surfaced three issues worth knowing about:
- No file system at runtime. Our first version read content files on each request. We moved that work to build time.
- Prerendered pages and form actions. Form submissions to a prerendered page were being answered from the page cache, so the form logic never ran. We moved the form to its own endpoint.
- Static files with an .html extension were redirected to a path without the extension, which broke search engine ownership verification. We changed the asset handling to serve them at their exact path.
Results
Measured with Lighthouse on mobile settings during development:
- SEO: 100
- Accessibility: 100
- Best practices: 100
- Performance: 94 to 98, depending on the page
You can run the same audit on any page of this site to check the current numbers.
Technology
Next.js, React, TypeScript, Tailwind CSS, Cloudflare Workers, Cloudflare Email Routing.
We build client sites and web applications the same way. See custom web app development or start a conversation.