How I Host For Free

Now then! If you’ve stumbled upon this article, it means you’re curious about how I run this fancy website without spending a single brass farthing. Being a tight Yorkshireman, I’m all about saving money where I can – and if there’s a way to get summat for nowt, I’ll find it. So, let me take you through the no-nonsense approach I use to build and host this site for free. No fluff, just the good stuff.

The Basics: Headless and Proud

This website is built with a headless architecture. What does that mean? Simply put, the front end (what you’re looking at) and the back end (where the content lives) don’t know each other from Adam. They communicate via APIs, like two blokes shouting across the street. It’s modern, fast, and just how I like it – lean and mean.

Here’s the tech stack:

• Nuxt 3

• Storyblok CMS

• Vercel

• Formspree

Let’s break it down.

Step 1: Building with Nuxt 3

Nuxt 3 is like a good Yorkshire pudding – light, versatile, and satisfying. It’s built on Vue.js and allows you to create blazing-fast websites with server-side rendering (SSR) or static site generation (SSG).

Here’s how I set up Nuxt:

Install Nuxt 3 with Yarn

As a Yarn man, I’ll not touch npm with a barge pole. Here’s the command to get started:

This will create a project folder and set up all the gubbins you need. Once it’s done, navigate to your new project:

Run the development server:

And there you have it – your website running locally. Easy as pie.

Step 2: Managing Content with Storyblok

Storyblok is my CMS of choice. It’s headless, user-friendly, and comes with a free tier. Perfect for tight Yorkshire budgets.

Setting Up Storyblok

1. Sign up for a free account at

2. Create a new space. Think of it as your digital attic where you’ll store all your content.

3. Install the Nuxt Storyblok SDK:

4. Add your Storyblok credentials to the

5. Create components in Storyblok and map them to your Nuxt components. Here’s a quick example of fetching data:

Step 3: Static Hosting on Vercel

Once the site is built, I deploy it to

Vercel

, which offers free static site hosting. It’s fast, reliable, and has a proper Yorkshire-friendly free tier.

Deploying to Vercel

1. Push your project to a GitHub repository.

2. Head to Vercel and connect your GitHub account.

3. Select your repository and follow the prompts.

4. Set the build command to:

5. For the output directory, use:

And Bob’s your uncle – your site is live!

Step 4: Forms with Formspree

Contact forms are essential, but they can be a faff to set up. Enter Formspree – it’s simple and free (up to 50 submissions per month, which is plenty for me).

Setting Up Formspree

1. Create a Formspree account and a new form.

2. Use their endpoint in your HTML:

No backend required. Form submissions go straight to your email.

Why This Setup Works for Me

This approach is simple, modern, and cost-effective. The headless architecture makes the site fast, while Vercel, Storyblok, and Formspree provide reliable services for free. It’s all about getting maximum bang for your (non-existent) buck.

And there you have it – a Yorkshireman’s guide to hosting a website without spending a penny. Go on then, give it a try! And if you have any questions, don’t be shy – drop me a line via the Formspree form. Cheers!