Archer Finch Legal is a marketing website for a fictional intellectual property law firm. The site has fully optimised metadata, perfect Lighthouse scores (minus a single point for mobile performance), and a 0.8-second Largest Contentful Paint, all while using WordPress as a content management system.

A containerised setup eliminates hosting costs while improving security and allowing content editors to preview changes instantly on a local network. An additional Payload CMS integration offers a smoother editing experience for teams ready to move beyond WordPress.

Built with Next.js, React, Payload, WordPress, Mailgun, Docker, and Vercel.

Motivation

As many of my projects are pretty niche, I wanted to demonstrate that I could create a typical marketing website to generate leads for a business.

I also wanted to demonstrate how WordPress could be integrated with Next.js, enabling dramatic performance improvements without transferring any content to a new CMS.

Finally, I wanted to create a user-friendly DevOps system so I can build top-quality websites for clients, friends, and family, allowing them to handle updates themselves, avoid monthly hosting fees, and give them the best chances of internet success.

/wp-admin/services

Architecture

This website uses three separate components:

• Next.js App Router for the main site
• Headless WordPress (for services content)
• Payload CMS (for articles and team members)

During the build, the main site imports articles from both CMSs and downloads all images, and then Next.js creates a static version of the site.

The result is a modern, high-performance site with no CMS exposed to the public internet.

Benefits of Next.js

If you’re not familiar with it, Next.js is the full-stack framework built on top of React, with some incredible features:

Static generation with dynamic capabilities

• Pages are pre-rendered as static HTML at build time
• Visitors receive this optimised static version first
• React then loads in the background and imperceptibly takes over the page
• A single-page application feel without the SEO drawbacks
• Dramatically reduced bounce rates from slow page loads

Intelligent image optimisation

• Images are automatically resized, optimised, and served in modern formats with fallbacks
• A comprehensive <srcset> lets browsers choose the smallest suitable file
• Optional blurred placeholders show content previews while the page loads

Zero cumulative layout shift

• Properly handled images and optimised fonts keep the content in place as it loads

These features work together to create superfast, SEO-friendly sites that deliver excellent user experiences.

Next.js has a steep learning curve but rewards the investment by enabling web applications that excel in both user experience and business metrics.

Benefits of this system

Enhanced security model

• CMS admin interfaces are never exposed to the public internet
• Content editing is only available on the local machine or network
• Significantly reduces potential attack vectors

Zero hosting costs

• Both CMSs run as local Docker containers with no hosting fees
• Static deployment on Vercel's generous free tier means no site hosting costs
• Could potentially handle tens of thousands of daily visitors before hitting the 100GB-per-month bandwidth limit

Flexible implementation options

• WordPress can, of course, be deployed separately for remote editing if needed
• Payload CMS can integrate directly into the main site at /admin if desired

This architecture delivers enterprise-level performance and security without ongoing costs.

/admin/media

Design

Design is art with a job, and this website’s job is to get people to click “Contact us” so that Archer Finch Legal can make more money.

With this in mind, I created a design from scratch, focussing on principles I learned from some of my favourite books.

Building a Story Brand

• The homepage immediately communicates what the company does and the problem they solve. "When you confuse, you lose.”
• Position potential clients as the heroes of their own success stories. The main image is of a happy young architect holding his intellectual property, not a picture of the lawyers or the office building, which would be positioning the company as the hero.
• Writing highlighting the potential risks of inadequate intellectual property protection creates subtle urgency without exaggeration.
• Information architecture that focuses on helping visitors answer the question, “Will this company be able to help me with my intellectual property problem?”.
• Authority-building testimonials with photos, attribution details, and specifics on how the company fixed an intellectual property problem.
• At least two Calls to Action on every page, encouraging visitors to send a message.

archer-finch-legal.vercel.app

Letting Go of the Words

• Content written for the web, with very short paragraphs, simple language and scannable text structures.
• “You are here” markers on every page, such as breadcrumbs and active menu links.

Universal Principles of UX

• Large font size throughout. Appropriate font sizing improves accessibility, reading comprehension, time-on-site metrics, and user conversion rates across all age and ability demographics.
• Every page communicates what the business does, including 404 pages, which get a lot of traffic on most websites.
  Most visitors to most websites don’t enter via the homepage, and many will never see the homepage at all. Never miss an opportunity to explain how your business can fix someone's problem.

/articles/deleted-content

These principles guided every design decision, leading to a visually appealing site that is likely to be effective at converting visitors into clients.

Additional features

Contact form

• The site uses a single API route and Mailgun to handle contact form submissions
• Honeypot field for anti-bot protection without hostile CAPTCHAs
• Elegant form input validation with Zod and React-hook-form
• It's lazy-loaded, as it’s the most JavaScript-heavy component on the website - enabling a sophisticated experience without slowing down the Largest Contentful Paint

This red message only appears if you fill out the email input incorrectly and then move to the message input - it won't annoy users while they're typing.

Skip to main content button

• Accessible to screen readers but visually hidden unless in focus

/team

SEO optimisation

• Comprehensive, optimised metadata for every page
• Individual open graph images for each service, article and team member

Privacy-first analytics

• Simple Analytics integration for data collection without cookies
• Eliminates the need for a cookie consent banner that would annoy users, increase bounce rates, and reduce conversions

Challenges

Containerising the Payload CMS was my biggest development challenge, as I needed to preserve all the content I had already added using a local PostgreSQL instance.

I wanted to do this because it aligns with my long-term plan of developing a fully containerised setup so that I can create websites for other people that they can edit and deploy themselves without scaring them with code or the terminal.

It also simplified the development process, allowing me to preview the site locally by pressing "Resume" in the Docker Desktop menu instead of spinning up three terminal tabs.

It was difficult to migrate the data from a local PG instance to a containerised one and then configure it to connect correctly with the containerised Payload server.

I managed this by reading up on Docker Compose - a powerful tool I’m excited to explore further.

Results

I’m very proud of the website I’ve created, and it has some impressive metrics:

• Easy content management - Payload CMS offers a particularly elegant editing interface
• Zero-cost deployment and hosting - the entire setup hasn't cost me anything at all
• Perfect Lighthouse scores for desktop, with only a single point deduction for mobile performance

Next steps

I have achieved everything I set out to do with this project and am very happy with the results.

A few more front-end features will finish it off nicely:

• GSAP scroll trigger animations
• Some graphic flourishes to make the site feel more designed

I'm happy with the design, but there's room for more personality and flamboyance.

However, this project has inspired me to work on a grander scheme.

There are so many websites that I would love to build for people, but the considerable complexity of getting everything set up for another person is a significant barrier.

Devising a sophisticated website deployment system that allows people to set up and maintain a custom website without technical knowledge will be highly worthwhile.

Here’s what I’m aiming for:

No-code containerised CMS with CI/CD pipeline

1. I build a website for a friend/family member/client
2. They install Docker Desktop, create a Vercel account, and buy a custom domain
3. I send them a shell script/ batch file/ simple Electron app that installs the website locally
4. They add/edit content through the Payload interface
5. The container periodically backs up the database and media files automatically, and on-demand
6. When ready, the user visits /publish and clicks a "Publish" button that:
   • Builds the site locally using the updated content
   • Deploys the pre-built site to a staging environment and displays the link
   • Displays the link to the Vercel project page, where they can promote the new build to production with one click
7. I connect the site to their custom domain
8. They don’t need any assistance from me ever again, though, of course, I’m happy to help if needed

Docker Desktop will be a local no-code server for my friends, family, and clients.

This solution - with a bit of determination - will allow people to have a high-performance website they can manage themselves without any coding knowledge or complex configuration.

Plus - if you’re nice to me - it won’t cost you a penny.