📻 — Build a Custom Landing Page for Your Community Using Notion & Cloudflare — 100% Free!

This is your Community, Daily.

Reading Time: ~ 7 min.

Hey yenizens!

I did a fun, quick experiment last night and realized that I should quickly turn it into a tutorial! Ready to go? Here’s what you’ll need:

  • ~10-15 minutes of realfocus — there are small details, so pay attention!

  • Cloudflare account

  • Notion account

  • A URL (e.g. yeniverse.com or yenizen.com)

So, what do you get out of this?

You’ll get a:

  • Lightning-fast, Notion-based landing page for your community or project built on Cloudflare’s worldwide http:// cacheing system. Dope af.

  • A pretty permalink / url! No gross and long URL to manage for yourself and for your community.

  • SEO-optimized + Google Fonts + scripts made easy by Stephen Ou!

Want to the see the result of this quick tutorial? That’s easy!

It’s our very own YENIVERSE — give it a spin:

And don’t forget to check out the sweet (& pretty) permalink:

Instead of this:

There’s a clear winner here folks!

And the code I’ll provide will make it a tad-bit more SEO-friendly / optimized:

So, you’re going to this, right?!

Taking a little bit of time to polish your project and/or community’s web-presence is always a good idea and the wonderful thing about this entire thing is that it will cost you $zero dollars in implementation cost!

The power of a decent CMS (Content Management System via Notion) for your landing page design and content delivered through the internet via the world-class architecture that is Cloudflare…

… why exactly are you NOT going to do this again?

[Of course, you will be paying a yearly domain registration fee, but that’s on you, not me. L(° O °L) ]

Remember, if you’re going to compete in an increasingly-busy and noisy community-centric world, you’re going to want to keep your own internal bar as high as you can, especially if you’re going to go big with a multi-product play like a Community-centric B2B SaaS:

Alright, are you ready? Got your sweet new domain handy?

Okay, let’s do this.


Step 1: Create a Notion Account

This step is pretty straight-forward:

  1. Head to notion.so

  2. Create an account

  3. Design your page

  4. Set the right share settings

In terms of design you’ll want to consider adding the following, especially if you’re building a new community:

Building Your Community “Operating System” or Playbook

Think of this as a “wiki” for your community — a landing page that serves to communicate the who, the what, the how, and the why (among many other things).

If you’re running a paid community it could include information around pricing or if you’re running a podcast or vlog or whatever else you want…

… you can kind of do it in Notion.

Where I’d start is with establishing the “default” operating system that shares “your why” as well as any rituals / behaviors and perhaps even a Code of Conduct which can help communicate who you’re trying to attract and help other folks self-select themselves out!

Remember, this is your community culture! Many other great community-building frameworks to help guide you along this particular path.

Use graphics when you can (I use Canva, another free tool!), animated .gifs if appropriate — make this your little place on the internet for your new community members!

The point is this: Make them feel at home.

Now, just to be clear, you can always come back to the design part! Let’s keep moving forward and getting all these technical parts out of the way for now — create an account, create a new page, call it something random, and then let’s press on!

You don’t need anything more than this, to be honest:

Finally, you’ll want the right share settings:

Turning on “Share to web” is really all you’ll need right now — we’ll come back to copying that link shortly…

… ready for the next step?


Step 2: Create a Cloudflare Account, Add Domain, Manage DNS Records

Okay, that’s a bit of a mouthful up there, but, it’s also very straight-forward and you don’t have to know what all of that means…

🤣

First, create Cloudflare account. Then, add the domain:

Then, choose the “Free” plan. Then, it’ll spin for a bit… don’t get scared:

Then you’ll see this screen which might freak you out… don’t worry, I GOTCHUFAM — I never let my yenizens down!

You literally want to copy what you see above EXCEPT replace “yeniverse.com” with whatever amazing domain you’re planning on using!

Adding a new one looks like this (and if you have a bunch of other records, it’s fine if you keep them except delete the any “Type A” record) — watch:

Okay, next step… that wasn’t that bad, right?!

Well, that kinda depends, because, this is the only part that I won’t be able to fully help you as you’re going to need to change the NAMESERVERS where you registered the domain.

Ugh.

You’ll see a screen like this:

I registered this domain on iwantmyname.com (my fav!) and in their admin panel, I changed the nameservers — you’ll have to do a similar exercise with your own domain registrar.

Cloudflare has a helpful guide here but I’ll show you the entire workflow (with validation!!) in one video below.

What you’ll see / steps taken:

  1. Confirmation of the nameservers that Cloudflare identified that need to change.

  2. Deleting existing nameservers and adding (copy/pasta) Cloudflare nameservers to my iwantmyname dashboard.

  3. Saving the changes via registrar…

  4. … and then refreshing Cloudflare to confirm.

  5. Optimizing performance (check all of them)

  6. Done. It can be actually quite quick!

Here it is:

Note: It may take up to a few hours or even a day depending on the domain name extension or country of origin. If you end up having to wait, just pause, go design your Notion Landing Page, and check back in a few hours.

👩🏻‍🎨

Whoot.

One final step that isn’t entirely necessary — but useful — is to confirm the change on your registrars side too. For instance, you can see that the domain has Cloudflare’s nameservers:

We’re almost done…

… hang strong with me.


Step 3: Confirm Email, Create Worker

You will now have to confirm your email address (so do that above) and you should also see a confirmation email re: adding domain to Cloudflare:

This is a little bit confusing, to be honest, as there have been a few times where this onboarding got reversed on me (maybe A/B testing?!) and so I had to visit a few of the top-line navigation to figure things out.

I hope that doesn’t happen with you.

So, confirm that email, login again, and now you should see a happy notice:

Now, we’re going to get into a bit of code… so, don’t be scared.

Head to “Workers” and then “Manage Workers”:

Then, add a customer worker subdomain — I called my “yenstrong”:

Choose the “Free” plan and keep on moving! Next, click “Create a Worker”:

You’ll then see this and you’re going to delete everything in that left window:

And now you have two options:

  1. Copy / paste my code below…

  2. Use @stephenou cool generator!

I literally found Stephen’s stuff half-way through my tutorial! He’s made it easy but the form can act a bit weird at times — I’ve tried his and it works fine.

Here’s my copy and paste — might be faster, no hassle — while changing out the values below:

  • MY_DOMAIN

  • SLUG_TO_PAGE

  • PAGE_TITLE

  • PAGE_DESCRIPTION

Cool? Put it below:

Got it? You sure? It’s okay if you’re still confused. Ping me on Twitter if you have any issues around this part. Click “Save”… then we’re almost there…

Whoot.


Step 4: Create Route, Profit!

We are literally in the home-stretch!

You’re going to want to head back to the main admin / dash, click “Workers” and then “Add route” as-seen above and then add your domain…

… one more time:

Make sure you do it exactly as I’ve done above! It should be yenizen.com/* with the asterix (*)!!

Okay, hit “Save”… and we’re in business.

That’s it! We’re done!

Now, if you wait (up to a few hours or up to a day) you should be able to visit your new domain.com and it should auto-magically redirect (with a PRETTY URL) to your Notion Landing Page.

👏🏻

You did it. Yeni thinks your hot shit (cause you are)!

Here’s our YENIVERSE using Stephen’s script with light / dark modes:

That’s not too bad!


Where to Go From Here…

Obviously, you could take this landing page in a number of different directions but here are a few high-level tips and considerations that might help you make the best, next call:

  1. Use this entirely free / optimized landing page to test-drive early-customer acquisition and community development! Adding polls, surveys, and more to engage directly with you growing list of folks. This is part of The #commsaas Way™!

  2. Build out multiple pages and link different domains to pages / sub-pages — there’s no reason you could use this for dozens of domains — but don’t get too crazy!

A few final notes:

  • If you get really popular, then, you may have to pay for the service: It’ll be $5.00 per month.

  • Cloudflare can go up and down at a moment’s notice — I wouldn’t necessarily put “production” material here if up-time is an important part of your promise to your customers.

  • It’s all free and open-source, so, use it with caution! There’s no support and you don’t get a refund.

Lovely. Have a good time folks and please let me know what you build!