How to Create a Blog in Notion with Super

I. Introduction

• Explanation of tutorial topic and what will be covered

II. Blog template in Notion

• Overview of blog template in notion and its features

III. Blog template Properties

• Discussion of properties that can be added to blog template for organization and customization

IV. Category database: Organize blog posts

• Explanation of how to create a category database to organize and sort blog posts

V. Generate blog index for each category

• How to generate a blog index page for each category

VI. Blog database template

• Steps to create a blog database template

VII. Blog homepage and synced block navbar

• Explanation on how to create a homepage and synced navigation bar for the blog

VIII. Super website example

• Showcase of a website created using Super and its features

IX. Super's website builder

• Overview of Super website builder and its tools

X. How to setup a Super website

• Step-by-step guide on how to setup a website using Super

XI. Super page management

• Management of pages created on super website

XII. Super themes & navigation

• Discussion of themes and navigation options available on Super

XIII. CSS tips: background & text

• Tips on how to adjust background and text using CSS

XIV. How to find CSS components

• Method to locate CSS components for customization

XV. CSS tips: adjust Callout

• Tips on how to adjust the appearance of callout using CSS

XVI. CSS tips: font size

• Tips on how to adjust font size using CSS

XVII. CSS tips: adjust Quote

• Tips on how to adjust the appearance of quotes using CSS

XVIII. CSS tips: hide singular Block

• Tips on how to hide a single block using CSS

XIX. Outro

• Wrap-up and resources for further learning.

‍

Today, I'm going to take a template inside of Notion that illustrates something like a skeletal blog and I'm going to convert it into a website using a program called Super. Super allows Notion users to customize their Notion pages. You can customize things like the background color, text color, font type, and you can also customize using CSS and HTML. So, what we can do is call this Notion page or this Notion setup the back and blog editor, and then the front-end is on Super where all of the readers can view and navigate the website.

Yes, there is a free option in Super that you can use right now and get started designing your Notion page. Let's just get right into it.

Firstly, let's take a look at the blog starter template that is in the description down below. On the left-hand side is a sidebar. I have a picture at the top and some links to categories. On the right-hand side, I have some blog posts. If I were to click through to one of them, I also have that sidebar in here as well and I have a little footer.

You'll also notice that I have categories. This is a relation property to a categories database. There are two different ways you can tag items inside of databases with either a select property like this one, or with a relation property.

Now, in this template, I have two different databases. I just have categories and essays or blog posts and they are labeled essay index and category index. Those are the original databases that you don't want to delete if you want to use this template. So, let's go into the index for essays and go into an example of a page. I just want to give you a quick rundown of all of the properties here.

Date property, the date it's published. Category relation, going to my categories database. A status drop-down menu which is a select property describing at what point in a pipeline this blog post is in. Below that, I have a summary, a featured checkbox and a cover image file and media's property.

Body of the page, I also have that sidebar. It's the same sidebar you'll see at the front page and a footer, one for categories, one for essays. Speaking of, let's look at the categories database that's labeled category index.

In each category, you have the title, a nice icon and in the body of the page, a linked database to essays, the other database. So, if I were to click on essay index, it'll send me to the original essay index. So, I have it linked here. I have it filtered every essay with the category relation. I can say all essays with the category that contains technology and the status is published will go here. Again, your viewership will only be able to see published material. The only property here is that relation going back to essays, which is hidden. If you don't know how to hide properties, it's just right-clicking on a property and going to hide property inside of either one of these databases.

If I were to create a new category, there will be an option for a new category template. I'll edit it here. So, we have new category, which is the title of this template, inside that linked database to the essays and the filter looks very similar. We have categories except categories this time is containing the title of the template. What will happen whenever you choose the template is this contains new category will change for instance to technology or whatever page you're in and the status is published of course.

This is doing the same thing, except it is giving me a little section to the right hand side for writing the content and giving me that sidebar. This is also in a synced block, and I'm going to go over how that works.

But what these templates are doing inside of these databases is giving you a nice blueprint to get started and get writing right away without having to worry about the design of the page. Cool, let's go back to the home page and take a look at how everything is set up before going over to super.

Again, we have the sidebar on the left and essays on the right. Remember there was a property called featured and that was a checkbox. So the link database here that is linking from the original in my page's toggle is filtered to show only featured as checked. You can add more link databases here and drag this around. You can also change the filter.

So as for the synced blocks, to trigger a synced block it is in your menu. If you're not aware it's a synced block it'll give you this red outline in your block. Now, everything in these synced blocks will update wherever else the synced block is.

For instance, this is my original synced block so it's important to keep this one here inside of blog starter original this page. Going to that essay template, what I did was copy and paste this synced block into my template. Now, whenever I add something to a synced block like this and go back to my original block or any other place I have the synced block, it will update like this. So sync blocks are really nice if you are creating a website if you want to keep that consistent design especially if you want footers or sidebars.

Now, if you're using super, the header bar is something that you can customize in the program, so you don't really have to worry about that. I recommend getting all of the block types that you would like to use in your website in maybe a sample page before going over to super so you have all those elements there to help you figure out the design of everything.

This is going to be my example. You could also just do like a plain landing page, and I'm going to show you an example really quickly of a landing page. This is my about me page and this is already a super website, so this is my website.

This is everything inside of super. All of those links in the caption translate to links in the image. I also have a little widget in the middle here. This is from indify.co. It's a great website for widget resources. There's also another thing you can use called super builder.

This is something you can duplicate into your workspace, actually, click the workspace you want to duplicate it into and you can get started creating some example notion pages. So if you're not interested in my template and you don't know how to go about designing on the notion side of things, this is a great tool to use. Once it is duplicated, go to builder and over here you'll see a call out with an example of a website page, and all of these elements are coming from the pre-made components that super provides in this builder.

So let's delete this example page first, go to create a new page, and everything in this white space, you can add components to. All the component library items are here for.

At the top, I could put in a pricing item. Firstly, I just need to duplicate because you do want to keep the original in there. And then drag the copy to that white space. Maybe I'll also add a footer, this mega footer. I'm going to duplicate and drag the copy. Maybe keep some white space between each component and then I'm going to highlight everything, go to the block menu, turn into text. Now you have everything set up for you and you can go ahead and start customizing it.

Of course, you do need to delete these title headers. When you're ready, just convert this call out into a page and drag this page into your workspace. I can also make sure that this page is full width and you have yourself a nice page example. Let's go back to the blog template.

I'm going to go up to the share button first and make sure I share my front page to the web. There are other options below, allow for editing probably don't want that. Maybe you want to allow comments, allow duplicate as template. I'm going to toggle that off and search engine indexing for right now. Let's turn it off because it is not a launched website yet. So once you share the front page, all pages inside are also public like this one. If I go to share, it is public because it's based on blog starter. If I want to restrict access just to this page but keep everything else public, I can by going to share and toggling share the web off and restrict access. You'll see an "i" at the top that's crossed out. Now if I want to publicize it again, just reverse restore.

Let's go over to Super. After copying this link after signing up for Super, you're going to be greeted with this page. You can go to new site, let's call this blog starter. And that URL you copied is going to go right here. Here it is, it looks a lot like the notion page, but we're going to design it to look different.

So on the left-hand side, we have some options to get started like pages. These are all of my pages that are within my home page. With these pages, I can edit the code of just individual pages. I can edit the SEO, and I can make it password restricted. Also up here, what I really like is the options, you sync URLs which automatically generates pretty URLs for each page. The next thing we can do is look at the theme and the first option here is color theme. I can choose dark mode, doesn't look amazing, neutral kind of like that without that image of course, and blackout. Of course, there are other ways to customize your page which we're going to go through in this video with CSS. Below that, we have a custom navbar. This is the first thing I want to do with this site. I want to add a header, so we have our sidebar that's everywhere in this website on the side via that synced block, but I also want some navigation at the top. So navbar type, let's make it simple. I can add a page that's already in my website. I can link to a page, and I can actually look for the pages.

Currently, I have a few options to link to. First, I'm going to do a link to my Twitter. It shows up at the top. I am going to add a new link, maybe to my YouTube channel, and the third to my blog.

I can label this more, but for now it's good as is. I can also change this blog starter text to an image or keep it as text. Additionally, I can adjust the font size and style.

I can also change the background color. I probably wouldn't want to change the text color, but I can if I want to. I can also change the height and visible scroll, or turn this feature off. If I turn it off, the text wouldn't be visible until you went to the top of the page. If I turn it on, it will scroll with you. I can also add a shadow, which I really enjoy. So, I will add a small shadow and change the color to a darker gray. It'll give me a little shadow up there. That's how you can just get started without even using CSS.

Now, let's take a look at some options for databases. If you're using databases inside of your website, it's good to check out this section. So, let's go into one of these database entries. At the top, is where our properties would show. Right now, it's not showing, but I want to enable that, save and reload. And I'll get my visible properties.

Going back into Notion, you'll see that we do have just those two visible. We've gone over some of the basic places to start. Let's go into code injection and over to CSS. If you want to know more about CSS and how to get started with Super and code injection, I recommend using Super's newly launched documentation page. It's really great. And if you go down to code snippets in the documentation, it gives you a lot of places to start. For example, changing the default text color, background color, and stuff like that. Also, converting callout links into buttons. I have a text edit document to allow you guys to look at this code a little bit closer and bigger because I had a hard time zooming in here.

So, the first thing I'm going to do is change the background color. That's just with this root style item golden root color bg default and then the text color text default. Then, you can go into those individual highlight colors that Notion has. So, if you don't like that newest Notion color palette update, you can change them here. I'm just going to copy and paste that over here into the CSS.

This is the global site code. You'll notice that the background did change. Now, the global site code is for everything, of course, and you can go into individual pages and customize those. In fact, this header here that we just made, I want to change the background color. So, I'm just going to highlight this background color, save, navbar, down to background color. It looks nice.

If you're wondering how I am finding these style items, what I mean by that is for instance, root or dot Notion dash callout, which is allowing me to customize all of the callouts. If you use Google Chrome, you can go into the body of your page, right click and click Inspect. Go to this little arrow up at the left-hand side and you can select different components in your website like this callout. Click on it and down here in this section, you can find a lot of these.

Like dot notion slash call out, that's how I know this will affect all of my call-outs. Back to code, let's take a look at maybe getting rid of this upper section of a what is called a collection. I want to get rid of the title and this line. Down here I have dot notion collection header display none. Now I'm going to get rid of that line. That is notion collection gallery because I'm using a gallery view and border top none. All this will be available to copy and paste in the template. Nice, it's looking really minimal now, which is exactly what I want.

Let's figure out these callouts on the side. By the way, what I'm doing here is linking to my pages. I'm linking to those categories. And if we go back into Notion, you'll see what I mean. I can trigger the at symbol and then search for that page I want to link to, like productivity. Now it links me right to it. That's what I have inside of these callouts.

And back to Google Chrome, I'm going to adjust that a little bit. I don't really like the margins. I don't like the padding here, I want to shorten that. I have three different or actually four different things I want to add. I have notion callout.notioncallout, just adjust the padding and then I want to adjust the margin inline. That's the margin coming in this way. I want to bring this over a little bit, and also the padding for the link. So dot notion page dot notion link is that link we just created with the at symbol that's what it's directing to. And then I want to display none for notion call out icon.

So let's look at a before and after. This is the before and this is the after. All right, the next thing I want to do is figure out maybe the font size. So we can adjust the font size. If we go into one of these blog posts here. I like the font size as is, but I'll show you how to change it. It's just html font size and I think the default is 16. You can change it to anything else like 12. It's a bit small. This looks really nice so far.

I want to figure out these quote blocks though, because these quotes have a border to the left-hand side. That rain is really coming down. I hope you can hear me properly, but these quotes have a bar here that I want to get rid of, and I want to center the text. Make it a little bit bigger, give it some padding. Let's go back in here and go to quotes. I'm making sure text align center, border left none, font size 28. That's making it much bigger and font family still is the same. I probably don't need that, but bold, padding top and padding bottom. I'm also increasing. Let's look at the difference. This is exactly what I wanted. It's really bold, some people may not like that. It's centered, and of course, you can just change center to left or just get rid of it entirely and it'll go back to aligning to the left. Take a look at that so far.

I like everything inside of an individual page. Let's look at the home page. Okay, so the last thing I want to do is hide everything inside of here. This is a little bit of a mess, and my viewers aren't supposed to see that toggle anyway. So you can hide individual blocks and even customize individual blocks. First, you've got to go back into Notion though. You've got to

You've got to go to the block you want to hide. Go to copy link, paste. Everything after this hashtag you want to copy and then go back.

And use this piece of code: #block and everything you just copied, .notion toggle summary. Paste that in there and I'm gonna go back actually, copy that. And replace this ID with that one.

You'll notice that that toggle has disappeared now. Not all toggles have disappeared, just that one. And you can still access it on notion side. I am going to leave all relevant links down below. I'm going to leave everything that I've mentioned in the description box and maybe some stuff in the top comment as well.

Let's go right into the outro, Super is really popular right now and I really recommend using it if you are trying to build a website with notion. And like I said at the beginning of the video, there is a free option to check out all the features it has. I'm going to provide a lot of resources and links down in the description for you guys to check out to help you build your website if you're interested.

Anyway, I'll see you guys the rest of the week on Twitter and next time with a new video. I'll see you then.

‍