Notion just updated its publishing feature with a few customization options that bring it a little bit closer closer to being a legitimate website builder and the easiest way to get a website up and running. And they labeled it "Notion Sites." But even with these new capabilities, a Notion Site still looks like Notion, which undermines your ability to present yourself with distinction and professionalism. But with those incremental improvements comes an enormous hidden benefit that gives you full control over the styles and scripts and all the code for your published Notion pages.
So I'm going to walk you through the new Notion Sites, then dive into that big hidden benefit. that lets you transform this ordinary Notion page into this exceptional professional website.
And that Notion page, along with the stylesheet that transforms it, is available to members of Notion A-to-Z. If you're not a member of Notion A-to-Z, we'd love for you to join us so you can make the most of Notion.
When you publish a Notion page from the Share menu, it gets a notion.site URL, where anyone can view it like a web page.
You can choose to make it discoverable by search engines or set the public URL to expire.
And with the launch of Notion Sites, we can now:
But above all, Notion Sites allows us to use a custom domain name, or a subdomain of your primary website. That has the obvious benefit of hiding the Notion brand and making it more of your own web property, but the big hidden benefit is that you can run it through Cloudflare, which gives you full control of the site beyond Notion's native options, which remain limited.
You've probably noticed dystopian moments when all major website seem to crash at the same time. That's almost always an issue with Cloudflare, because most legitimate websites run through it. All of my sites run through it. And if you work with websites or domains in any capacity, yours should, too.
Cloudflare's sort of a middleman between web browsers requesting websites and the servers responding to those requests. By controlling those requests and responses, Cloudflare provides a wide assortment of benefits, including enhancements to the performance and security of websites.
And on top of those standard upgrades, Cloudflare can actually modify the content of websites returned by servers. And that gives us full control of our Notion Sites. We can add a custom stylesheet that completely transforms the site's appearance. That's all I did to my professional page, and what we'll walk through momentarily.
But we could also add JavaScript to perform custom actions or install third-party apps, like chatbots or ecommerce features.
To tap into Notion's new compatibility with Cloudflare, you'll want to have at least an elementary understanding of a website's front-end fundamentals, especially CSS for defining your custom styles.
If you need to fill some gaps in your knowledge, this is an excellent learning opportunity. A foundational understanding of HTML, CSS and JavaScript will give you a whole new perspective of the web. You'll know what's happening under the hood of apps like Notion, Zapier and Webflow so you can use them to the fullest and, in many cases, save tons of money by doing what they do yourself.
And you know, these days, any time I want to learn a new topic, I go to the almighty Claude or ChatGPT. Let me know in the YouTube comments if you need help crafting your prompts or hit any roadblocks as you polish your HTML, CSS and JavaScript skills.
Let's walk through the steps for adding a custom stylesheet, which is really the greatest benefit of this capability. We'll use my site as an example.
First, you'll want to connect your domain to Cloudflare:
Websites, you'll click Add a site, then follow the steps for updating your domain's nameservers wherever its registered.Then you'll connect your Notion Site to the domain:
Share menu.Manage all domains.New domain and Custom domain.DNS section of your site in Cloudflare.www.name provided by Notion.Proxy status. That allows Notion to verify the configuration.Live, you want to enable the proxy so it will manage requests and responses.Then you want to get your stylesheet live before it's even populated. Just a blank CSS file. You'll see why momentarily.
There's not a dependable way to host it within your Notion Site, so it'll need to live somewhere else.
site.notion.vip, I might use assets.notion.vip with R2.assets.notion.vip/style.css.Then you'll create a Worker, which is one of Cloudflare's most powerful features. It allows you to run JavaScript on requests from web browsers and responses from servers as it intercepts them.
You can copy and paste my code, but JavaScript is such an essential skill that opens so many new doors. If you don't already know it, I strongly encourage you to take a simple introductory course, then use this for practice.
Workers & Pages. Click that, then Create.Edit code.<head>.Settings and Triggers.And that just leaves us to the fun of transforming our site as we compose our stylesheet.
And obviously, this is where you'll need to know CSS. But like JavaScript, it's an empowering skill, and this is a terrific learning opportunity.
What I like to do is, when visiting the site:
Sources tab.And after a good amount tinkering that's tedious but gratifying, you will have transformed your site from a run-of-the-mill Notion page to a striking professional website.
Ask me any questions that emerge along the way, duplicate my sample site and stylesheet as a guide. It's available to members of Notion A-to-Z, along with the Bulletproof framework and all my other resources for making the most of Notion.