Alright, picture this: you’ve got this brilliant idea swirling in your head, you’re pumped up and ready to go. You even went ahead and snagged the perfect domain name. Now, you’re just a few clicks away from entering your credit card details and paying for website hosting.
But hold up, there’s a tiny voice in your head whispering doubts. Will this be another one of those “Coming Soon” pages that just gathers dust for years without any action from you? Trust me, I’ve been there… many a times.
Or maybe, you’re brimming with ideas and have all the time in the world to dedicate to your project. But let’s face it, building a website takes time. In the meantime, you’ll want to start collecting email addresses and start sharing your exciting venture with everyone you know.
That’s where a “Coming Soon” page becomes your secret weapon. It’s a crucial step in launching a new website or service. It lets your audience know that something awesome is brewing, even if it’s still simmering behind the scenes.
But here’s the annoying part – you have to pay for hosting that page every month. Ugh, right?
Well, guess what? I’ve got a little secret for you. There’s actually a free way to host your “Coming Soon” page using Cloudflare. Yes, you heard me right!
By harnessing the power of Cloudflare Workers, you can host your page for absolutely free with minimal setup. And if you keep reading, I’m going to teach you how.
🙋♀️ Just So You Know
There are account plan limits for Cloudflare Workers. Learn more about Cloudflare Workers limits on Cloudflare Docs.
What are Cloudflare Workers?
Cloudflare Workers are a serverless platform that allows developers to deploy and run their code globally. This means your code can be executed closer to users, improving performance and reducing latency. And it’s a really good use case for serving static pages, such as coming soon pages that have minimal overhead.
And it’s pretty easy to set up!
Here’s a step-by-step guide on how to make it happen.
But before we dive in, let’s assume you’ve already signed up for a free Cloudflare account and your nameservers are pointed to Cloudflare.
Step-By-Step Guide
Step 1: Access Your Account
Login to Cloudflare.
If you have multiple accounts, select the correct account to access.
If you only have one account, skip this step.
Step 2: Navigate to “Workers & Pages”
Step 3: Click the “Create Worker” Button
If you already have an existing Worker, you will not see the screen below, but you will see a “Create application” button. Click that, and then you’ll see the screen below where you can click the “Create Worker” button.
Step 4: Name Your Worker Script
In the “Name” text field, label your worker script.
For example: coming-soon-page.
Don’t worry about the Code preview. We’ll modify this shortly.
Click the “Deploy” button.
Step 5: Click the “Edit Code” Button
Step 6: Copy and Paste Worker Code to worker.js
First, click the “Preview” tab, and then replace the default code in the Cloudflare Workers editor (worker.js) with the code below.
Below is the code to copy and paste in the worker.js.
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coming Soon</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f3f3f3;
color: #333;
}
h1 {
font-size: 4em;
margin-bottom: 0.5em;
}
p {
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
<path fill="currentColor" d="M5.52 20.596V15.46q0-.404.189-.768q.19-.363.537-.58l1.196-.783q.175 1.754.454 3.036q.279 1.283.906 2.91l-3.283 1.321Zm4.051-1.788q-.606-1.535-.934-3.145q-.33-1.61-.33-3.276q0-2.645.902-4.86q.9-2.214 2.791-3.927q1.89 1.713 2.791 3.928q.901 2.214.901 4.859q0 1.661-.329 3.268q-.328 1.607-.934 3.153H9.57ZM12 12.5q.633 0 1.066-.434q.434-.433.434-1.066t-.434-1.066Q12.633 9.5 12 9.5t-1.066.434Q10.5 10.367 10.5 11t.434 1.066q.433.434 1.066.434Zm6.462 8.096l-3.283-1.302q.627-1.627.906-2.919q.278-1.292.453-3.046l1.197.802q.348.217.537.58q.19.364.19.768v5.117Z"/>
</svg>
</div>
<h1>Coming Soon</h1>
<p>Get ready for something exciting!</p>
</div>
</body>
</html>
`;
return new Response(html, {
headers: { 'content-type': 'text/html' },
})
}This is just a simple coming soon page to show you what can be done, but go ahead and get creative and build what you want to your liking.
💡 Pro Tip
If you want to replace the rocket icon, simply replace the SVG code (lines 37-39) in the above worker.js. The existing rocket icon is from Google’s Material Symbols & Icons.
Step 7: Click the “Deploy” Button, and then the “Save and Deploy” Button
Step 8: Go Back to “Workers & Pages”
Go back by clicking “<- coming-soon-page” link above the worker.js.
Step 9: Click on “Websites”
Step 10: Click on Your Domain
Step 11: Click on “Workers Routes”
Step 12: Click on the “Add route” button
Step 13: Route Traffic Through Your Worker
Enter the following in the “Route” text field.
*.yourdomain.com/*Make sure to replace “yourdomain.com” with your actual domain.
Then, select the Worker you created earlier, ‘coming-soon-page’, and click “Save”
Note: As soon as you click “Save”, your coming soon page will be accessible when visiting your domain.
Step 14: Test Your Worker
Open this URL in your browser to see your “Coming Soon” page in action.
Conclusion
Hosting a “Coming Soon” page using Cloudflare Workers is a straightforward process that leverages serverless technology for high performance and scalability. Plus, it’s free! By following the steps outlined above, you can quickly get a placeholder page up and running while you work on your full site.
You can also create a Worker for a maintenance page. This is a good way to inform your users that your website is undergoing maintenance.
