//pragmatic leaders

Build a Journalling Website

Reading time
3 min
Section
Section C : Project Management & Organization
3 min left0%
build a journalling website0%
3 min left

Image Tools: Noise, Super, Popsy A simple guide to building a journalling website with Notion and Super.so In the evolution of digital tools and tools for code and no-code, sometimes you need something so intuitive that it can just help you to organize your ideas and thoughts so simply and intuitively that it helps your ideas just flow simply and clearly. In this tutorial, we will create a personal blog with Notion through which you can write your thoughts, news, and plans, and then we will turn this personal blog into a nice website. Image Untitled.png

About this tutorial 😎 We will create a personal blog by using Notion to start a workspace to organize content in blocks and “Super” to turn “Notion” pages and workspaces into a website. Tools: Notion, Super

Why? > Imagine having your own personal workspace with all your to-do lists, organized content, articles database, and even your best quotes with images and web links. And imagine that you can turn this organized content into a neat website that you can share online with the public on invited users. Didn't you get excited to start the journey of creative blogging? > Let’s get started.

Skills you will learn - Using Notion blocks and pages - Turning the Notion working space into a professional website with Super

Steps Before you start watching this video and learn what amazing things you can do with Notion. - Step 1: Choose a suitable name for your web blog and create your own logo (You can have a look at the logo files in the “Related Articles” section to help you choose the name and design the logo quickly). - Step 2: Go to the “Super” website and click on ‘’Template’’ and select what works for your purpose and preferences. A free and premium section of Templates is available. EX4_CWN_2.gif - Step 3: After choosing the right template, choose ‘’Duplicate’’ EX4_CWN_3.gif - Step 4: Choose ''Duplicate'' to your Notion space. Then, choose ''share > share to web'' and we keep the code because we'll need it later. EX4_CWN_4.gif - Step 5: Go back to Super and create a new account and then choose ''New site''. You will be asked to enter the name of the site and the “Notion” site link. (Note: The name of the site is optional) The “Notion” site link is the code we got in Step #4 after choosing ''share to web''. - Step 6: Your website is ready! You can make adjustments and see them on the website. We go to the ''Instruments'' tab at the beginning of the template in Notion. Then we choose ''code'' and copy it. EX4_CWN_6.gif - Step 7: Go back to super and paste the code into the code tab. - Step 8: Now you can make any adjustments to Notion and add photos and videos as well as pages and articles. You’ll see that every edit we make to the Notion appears on the website once we update it. All you have to do now is go deep into Notion's properties and features to make your website more professional. EX4_CWN_8.gif - Step 9: You can start customizing your website look with the settings that appear on the “Super” website including changing the Site Favicon. EX4_CWN_9.gif - Step 10: To connect the website to a valid domain we should subscribe to the paid plan and then choose ‘’Custom Domain’’ from Domain's tab and complete the steps. - Step 11: You can edit the user interface professionally through the code tab > body & CSS by writing some simple codes. You'll find more advanced details about this exercise in the upcoming Bootcamp. Congratulations! You have a beautiful and distinctive personal blog through which you can share your thoughts with others. Check the link here to see the end result of the blog.