My attempted overview of options for making websites with Notion does not go into the mechanics of how to setup a site with Notion, so I’m going to post a couple of short walkthroughs of the process here. I’ll demonstrate with both Super and Potion. For Super, I’ll share how I setup my course catalog. With Potion, a natural choice would have been to take you behind the scenes of this blog, but this did involve a little bit of customization that might be a bit distracting, so I’ll just make something quick from scratch for this post.
Doesn't look like it's for non-geeks like me 😄 or you may prove otherwise. However, if you can record a 10 min video setting up a basic one, that'll have a greater impact, I believe, if it's already not there.
— Swaprava Nath (@swaprava) September 12, 2021
The Overall Process
For either framework, this is typically a three-step process:
Setup your content in Notion. You can start from scratch, or use one of the templates provided by Super or Potion that feel like a closest match to what you want your website to eventually look like.
Enable sharing to the web from within Notion — this will generate a link for you.
Copy this link into Super or Potion.
At the end of step 2, in fact, you already have a URL that you can share with anyone and, depending on how the content is laid out in Notion, can already look like a decent website.
What step 3 allows you to do, however is:
Add some styling with CSS.
Add custom code snippets (useful, for example, if you want to add things like Google Analytics).
Be assured that the webpage is good in terms of SEO, performance, etc.
If using Super, you can selectively password-protect pages (coming soon to Potion, where you can presently password-protect your whole site if you want to).
Have automatically generated user-friendly URLs for the individual pages, and if on Potion, you get nice preview images for all your pages as well.
A few optional steps that you might want to consider:
- By default, both Super and Potion will give you a test subdomain to work with. Eventually, you might want the website to be available from your own domain. This is just a matter of adding a couple of A-records and typically can be done from wherever you registered the domain:
- You might want to add custom styles to make the website render uniquely — so you move beyond the standard look-and-feel of a Notion page if you so wish. You could do something on your own here, but the simplest thing is to just borrow the styling from one of the existing templates and tweak it if you want.
- Insert code for Google Analytics (or similar). As an aside, if you are looking for analytics that is user-friendly and privacy-conscious, I’d recommend Fathom.
A Course Catalog with Super
This content is deprecated because I’ve moved this domain out to a different setup now. So please ignore the links, and hopefully the steps are still useful in principle!
Let’s apply this process to an actual website now! I’ll demonstrate how I setup the website at neeldhara.courses. Incidentally, if you want a quick overview without some details that will be specific to my website, you might want to watch the video made by @robhope and pointed out by @traf.
Here's a little run through by @robhope on creating a site @super_:https://t.co/SCMdDMRfBd
— traf (@traf) September 12, 2021
Back to the setup for neeldhara.courses. You can check out the page on Notion here, but I’ll describe some pieces of it below. First, recall Step 1:
I started with the Super template HQ. It looks amazing and is apparently free to use — at least at the time of this writing 😀
Duplicate this template into Notion. If you like, you can duplicate it twice — one, a copy that you actually work on, and the other could be a copy that you don’t edit but just keep handy in case you need to go back to the original for reference.
The first thing I did was to get rid of most of the content, and just retained this section:
which, incidentally, will render like this once connected to Super:
Now the next step is to replace the generic content with yours:
Since I’m just starting out, I have added the three courses that I’m teaching this term and they all show up. Eventually, these courses will be filtered out based on the current timing, so that only the current ones show here and the rest get pushed to an archive — which I’m yet to build. But the filter would look something like this in Notion:
And for each of those entries, I’d go and setup the course home pages with the content that I have in my typical course homepages. The nice thing about Notion is the wide array of content types that lets you format things nicely. Here are a couple of sections from within Notion:
One thing worth pointing out for this particular setup — for each course, the class plan is just a Notion database, where the columns are:
- Name (text)
- Week (single-select with 12 options; one for each week of the course)
- Module (a checkbox property)
- Description (text)
and the rows either correspond to an overview of a whole week or just one individual lecture, tagged with the week that it happened in.
On the course’s homepage, I display this database set to a Gallery view, and filtered to only those entries where the Module option is unchecked. These are intended to be overview pages. This is what it looks like in Notion:
and this is what it will end up looking like on the website, once you’ve gotten to the end of Step 3:
Further, overview page simply displays the same database again, this time in a list view filtered by the appropriate week:
Check out the views in Notion and the rendered version side-by-side:
You might wonder about the blockquote in the Notion view right at the top of the page. That’s a feature of the HQ template — anything that goes into that first blockquote renders as page navigation on top. I think this now a bit obsolete with Super’s new features on navigation bars, but I still find it handy and use it on most pages. 👍
So that’s all of Step 1, getting all your content inside Notion. I’d say this is really the bulk of the process. The process is iterative, so you don’t need literally all your content in before you can move on. However, getting an indicative amount thrown in is, I think, useful.
Once you’re done with this bit, up next:
This is very easy to do, it’s just a toggle on the top-right corner of your Notion app:
Now for the final step to have everything come together:
This is again quite straightforward, head to Super and just share your page’s public URL, give it a name, and optionally set it up to sync with your domain if you have one.
Given that we’re using a particular Super template, you would also need to remember to insert the CSS to make the site look as advertised above 😅
So remember to add this on the custom code section of your Super dashboard:
<link rel="stylesheet" href="[https://sites.super.so/hq/style.css](https://sites.super.so/hq/style.css)">
If you do just this and are literally following along your site may still look a little different from mine, which is probably because I tweaked the CSS a bit to incorporate fonts of my liking (the fonts in the screenshot are from Google fonts — Andika New Basic and Shadows into Light Two).
You might want to take care of some minor things at this stage, such as adding a favicon, a site description that will show up on Google searches, inserting any code you need to for analytics, and so forth.
The very first time that you setup your site, you may need to wait for a bit for it to build and render. But after this first time, any edits you make on Notion are reflected automatically on your website — you may need to give it a minute or two, it’s not instantaneous, but trust that the changes will show up. Clear your cache if they don’t even after a couple of minutes.
Super generates pretty URLs automatically for all your pages, but because of the slightly peculiar setup I have, involving a particular nested structure and filtered views, I’ve been doing my pretty URLs manually. For example, to go to the second module of Week 5 in the competitive programming course, the URL is:
https://neeldhara.courses/competitive-programming/week-05/mod-02This can be setup quite easily from inside the Super dashboard, and once it’s done once, it’s done for good.
So, that’s about it! I’d like to think I covered most major aspects, but if anything is unclear, ping me @neeldhara on Twitter and I’ll be sure to update this appropriately 🙂
The Manim Examples Collection with Potion
For the Potion example, I’d like to build out a quick page with latest tweets from @manim_community. Manim is a community-maintained Python library for creating mathematical animations, and the twitter handle pulls in a lot of great examples.
So, for step 1, which is to get our content in Notion, I start with a blank slate and populate it with some content:
For Step 2, I simply make this page public, and you can see the Notion version here.
For Step 3, I add this page to Potion and just follow step 4 on this page to set this up with a lovely template made by Dr. Gil Pradana (@gildy). This just amounts to copy-pasting some CSS code into the Snippet Injection section of your Potion dashboard. This template treats horizontal line breaks as breakpoints to create cards, and the headings translate into the highlight boxes that you can see from this preview.
https://twitter.com/gildy/status/1403680404092035075?s=20
After connecting my domain, here’s what the website looks like this
And that’s basically it! You have a fully functional page now. 🎉 Changes you make in Notion will reflect instantaneously on Potion!
You might wonder if there is a way of setting things up so that new tweets from the Manim community handle show up automatically on this website. In principle, this should be possible with a little help from tools like automate.io, Zapier, or Integromat — they can watch for new tweets and append them to the page you are working on, although I’m not sure how to set it up so that they respect the two-column layout that I have here. I figure tweets could also be added to a database and shown with a gallery view instead, but the gallery previews will typically not pick up embedded content, so you might have to go via an intermediate service like Tweetpik or Pikaso instead so you have screenshots for display.
So this was Potion - you can probably see the many ways in which Potion and Super are similar to setup. By the way, the templates on these platforms are not mutually compatible — so watch out for the fact that they will not automatically work on the other platform if you are looking to migrate. As far as I can see, neither service has an importer for the other built yet.
That said, I hope you have fun making your website with Notion with whatever platform you choose to use! 🎉
