Before I migrated from Ghost to BeeHiiv, I wanted to keep my newsletter's landing page, it got me around 1.5k subs from HN because it was unique - so I knew I need to keep it.
To achieve this I managed to use Cloudfalre, and here is how you can too.
Basically, we will create a subdomain for the landing page:
- unzip.dev/ β join.unzip.dev - my new home page.
- unzip.dev/* - my main website for the newsletter (on BeeHiiv).
This tutorial assumes you also want to use your root domain on BeeHiiv instead of www.yourdomain.com
Step 1 - Connect your domain to BeeHiiv.
- First I added my domain unzip.dev.
- After verifying, add it to the Web Domain section.
Step 2 - Open a Cloudflare account
- Register to Cloudflare move your registrar's DNS Nameservers to CloudFlare.
Step 3 - Deploy your new home page
I used vercel.com and next.js. For that I added a CNAME to vercel for join.unzip.dev.
Step 4 - Patching CLoudflare
We want to hijack the requests to the root path. For that I had to add the following Cloudflare rules:
- For the archive page I had in Ghost (optional).
- For the posts, in Ghost there are at: unzip.dev/[slug] on BeeHiiv they are at unzip.dev/p/[slug].
- For the homepage I added a redirect from
/
tojoin.unzip.dev
(on vercel).
Bonus www -> root
To redirect all www. to root you have to add the following record:
- Add the following bulk redirects:
-
AAAA
forwww
with the value100::
otherwise cloudflare will not run the bulk rules.
API for landing page
To be able to subscribe people via my external landing page, I've added a cloudflare worker as follows:
export default {
async fetch(request, env, ctx) {
// Allow everyone to post to here via CORS
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST",
"Access-Control-Allow-Headers": 'Content-Type'
};
// A hack to fix the OPTIONS response for CORS
if (request.method === "OPTIONS") {
// Handle CORS preflight requests
return new Response(null, {
headers: {...corsHeaders}
})
}
const publicationId = 'pub_YOUR_PUBLICATION_ID';
// Extract the subscription details from the request body
const requestBody = await request.json();
const { email } = requestBody;
// Create the subscription
const response = await fetch(`https://api.beehiiv.com/v2/publications/${publicationId}/subscriptions`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${env.BEEHIIV_KEY}`, // Replace with your actual bearer token
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
reactivate_existing: true,
send_welcome_email: true, // Always send the welcome email
utm_source: 'join.unzip.dev',
utm_medium: 'web',
referring_site: 'join.unzip.dev',
}),
});
if (!response.ok) {
throw new Error('Failed to create subscription');
}
return new Response("Subbe", {
headers: {
...corsHeaders,
},
});
}
};
At this point every time someone visits /
they will be 301ed to join.unzip.dev (seeing my amazing landing page). Otherwise, they will be redirected to BeeHiiv to see the posts themselves.
I hope this helps other's that want to customize their BeeHiiv landing page.
Top comments (0)