wr8: Create a Notion Website & Blog with Better SEO

Introducing wr8

wr8 lets you create a website in Notion with better SEO. It is a customized version of nextjs-notion-starter-kit, based on NotionX. You can set it up within 10 minutes if you have accounts on Notion (obviously), GitHub, and Vercel.

https://www.producthunt.com/posts/wr8

↑ Product Hunt upvotes are much appreciated! Last updated on Jan 14, 2023.

🚀

wr8 lets you create a website in Notion with better SEO. It is a customized version of nextjs-notion-starter-kit, based on NotionX.

The wr8 website template is minimal and SEO-focused, a combo many bloggers and writers prefer. You can set it up within 10 minutes if you have accounts on Notion (obviously), GitHub, and Vercel. Additionally, you can add any analytics scripts you prefer.

Why wr8?

wr8 was born out of curiosity and necessity. I wasn't happy with any of those paid Notion to Website services. I come from an SEO background. Hence I created wr8 to show you how we can bring the full power of SEO to Notion-powered websites. We need complete control over the SEO of inner pages and specific HTML fields (like Yoast does with WordPress).

Better content and SEO give you a competitive edge. It makes sure you get good results in SERP. With wr8, I believe your Notion powered website can directly compete with any SEO-opimtized blog out in the wild.

So, how does it work?

Well, it's simple. You write in Notion, add images, and set SEO parameters. That's about it. The website (custom domain) renders in real-time. React, and Next.js does the heavy lifting. Plus, you have control over the front end hosted on GitHub.

Full features

React Notion-X features. Thanks to Travis Fischer for creating one of the best React renderers for Notion.

nextjs-notion-starter-kit features. wr8 template is a remix of this starter kit. It covers basic SEO as well.

Improved SEO (supports separate title tag for the home page, custom title tag, meta description, published date, and updated date schema for inner pages.)

Minimal design. I firmly believe wr8 version is ideal for text-based blogs, technical blogs, and anyone who wants to write fearlessly.

Prerequisites

✅

Duplicate my Notion page, which comes with the correct table structure required to deploy and build this template.

✅

Create an account on GitHub.

✅

Create an account on Vercel.

☑️

Purchase a custom domain. Not mandatory while setting up, though. You could create a subdomain.vercel.app or subdomain.wr8.in for testing and staging purposes. I'll show you how to point a custom domain in the next section.

Get started with wr8.

✅

STEP 1: Find your Notion page ID

Note down your page ID in the browser's URL bar after duplicating mine. 7167d2cf133a4875b7e23caf545ee402 is the page ID in my case. Ensure your Notion page is set to public as well.

✅

STEP 2: Fork the wr8 repo on GitHub Visit this page and fork the repo.

✅

STEP 3: Adjust the site.config.js in your repo The rootNotionPageId is set to mine. You've to replace it with yours from STEP 1. You may change other site info values also.

✅

STEP 4: Adjust the inner page IDs in site.config.js Vercel won't build the site if it’s incorrect. It'll display a "Notion page not found" error instead. Find the corresponding page IDs by opening the inner pages on Notion. Check the active page URL and copy the ID. Replace mine with yours.

Example: 588031c1e65d4dfa9d58e2492c9c1b7e is the page ID of Blog.

✅

STEP 5: Import Git Repository to Vercel and deploy the site Visit https://vercel.com/new

Once imported, set a project name and deploy the site.

It would take a few minutes to build the site. And upon completion, vercel would generate a subdomain for the new build.

You can change it within the domains setting of the project.

☑️

STEP 6: Set custom domain (you can do it later) Visit the project settings and switch to the Domains section. Here you can add a custom domain name of your choice.

If you decide to add custom top level domain, Vercel will provide you with an A record and a CNAME DNS record. Visit your domain registrar and map those accordingly.

☑️

OPTIONAL: Free wr8.in subdomain Feel free to point your Vercel project to example.wr8.in of your choice. This feature is available on request. The wr8.in domain registration is valid till 2032, so you're in safe hands for at least ten years.

Other things to keep in mind

While wr8 is supposed to work out of the box after initial deployment, you could take full control of the front end by customizing the forked repo. Make it your own! Here are some of the key things to keep in mind.

✅

Analytics PostHog: You may add the following script to components/PageHead.tsx. Paste it right before closing </Head>. Find the Project API Key here.


<script dangerouslySetInnerHTML={{__html: `
  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('wr8script',{api_host:'https://app.posthog.com'});
`}} />

GA: If you prefer Google Analytics, add the following GA script to components/PageHead.tsx. Paste it right before closing </Head>. Replace G-53XJKCMZDH with your Measurement ID.


<script
        async
        src="https://www.googletagmanager.com/gtag/js?id=G-53XJKCMZDH"
      />
      <script
        dangerouslySetInnerHTML={{
          __html:
            "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-53XJKCMZDH')"
        }}
      />

Do the same if you are using Fathom, Plausible, etc.

✅

Social Media

You can add or remove social media handles in site.config.ts. Starts at line 21. These will be linked in the footer section.

✅

The /public folder

The files added to /public folder can be universally linked as example.com/file-name.extension. It contains the favicons and site icons as well. You should replace mine with yours. The default page icon and cover images also loads from this folder (check site.config.ts, starts at line 29). You may replace these URLs down the road.

✅

The inner pages

These pages are only visible to the search engine via the sitemap.xml. It's up to you to decide how to link those pages to the public.

For example, you can link some of those pages to the Navigation menu, which can be done editing the site.config.ts. I’ve mentioned this in the step 4 of getting started.

✅

The blog page

I've put the blog database inside an inner page (Blog) in Notion. So example.com/blog will list the latest posts. You may put this database block to the index page if you prefer that.

✅

Cover images

To keep things minimal, I've hidden cover images by default in CSS. However, the metadata is intact and will work well everywhere on the web. Test: https://www.opengraph.xyz/url/https%3A%2F%2Fwr8.in%2Fabout Remove the display: none; from styles/notion.css if that's against your preference.

✅

SEO Parameters for individual pages and posts

I’ve assigned certain Database properties to render as the title tag, meta description, published date, and modified date. Fill those fields correctly. The Slug property is optional. You can use it if you like.

SEOTitle = <title>input</title> MetaDescription = <meta name="description" content="input"> SEOCreatedDate = <meta property="article:modified_time" content="input converted to ISO 8601 date format"> SEOUpdatedDate = <meta property="article:published_time" content="input converted to ISO 8601 date format">

✅

Custom title tag for home page

You can set a custom title tag for the index page inside site.config.ts. Look for line 15. seotitle represents the title tag for the index page. If you don’t fill it, the fallback <title> will be your site.name.

✅

Submit sitemap to Google Search Console

The sitemap file is available here https://example.com/sitemap.xml. You can submit it to your Google Search Console. https://example.com/feed is available for use as well.

✅

Hide notion blocks

We can customize the style for each block individually. If you're familiar with CSS, you can understand the CSS hack I've done here. The.notion-collection.notion-block-b9e782b880dc400096ac80db1c6e5b55 represents the block that lists my inner pages on w8.in. I didn't want to show that Notion Database collection in public. So I chose to hide with display:none; in styles/notion.css. I encourage you to play with CSS and customize it further.

✅

More styling

Tweak /components/styles.module.css, styles/global.css, and /styles/notion.css according to your preferences. You should look into styles/notion.css in most cases.

An example portfolio gallery

This is a sample Database. You may customize it as you like.

👾

Portfolio

👩🏽‍💻

Designer portfolio

Description for designer portfolio

Sep 26, 2022

website

Showcase

Contact me if you're using wr8 to power your website or blog. I'd be happy to list your site here.

Name	Category	URL
wr8	website template	https://wr8.in
ㅤ	ㅤ	ㅤ

🚫

Warranty: Sorry. wr8 comes with no warranty whatsoever. I'm not a full-time developer and am not well versed in React. I've shown you what you can do with wr8. Take it up a notch if you like.

👾

Donations: I didn't create the original React renderer. You can fork the wr8 repo and do whatever with it. And if you really enjoy using wr8 out of the box, donations are appreciated. Alternatively, you could consider buying my music to show support. I make synthwave and electronica in general. Thank you.

🛠

Need help? If you are not a developer and require help beyond this project's documentation, please reach out. I'll hook you up with my brother, who's a full-time developer.

👀

Inner pages (hidden with CSS)