Notion Power Up> Labs Home
Publish Notion to your Website
🌍

Publish Notion to your Website

Although Notion let's you share pages publicly, the end result is sub-optimal and slow. Sure, you can also export Notion pages to HTML and upload them, but if you need to modify anything, it's a lot of work each time.

What we want is:

1. Setup a Publishing Profile

From the Power Up menu (when logged in), select the "Publish Website" option

Then click on the "Create Publisher" button

Give the profile a name and provide the link to the page in Notion to start from (this will be the index page)

Next, provide the SFTP login details for your website / server

Click on the "Test Connection" button to check the connection

If everything worked, you should get a directory listing of files.

NB: Make sure your directory is correct as files will likely get overwritten.

If you would like, you can also provide a custom header and footer to be applied to all pages

Lastly, click the "Save" button to save your publishing profile

2. HTML Hints & Tips

Here are some useful CSS styles I've collected to make Notion's exported HTML look a little more like the original. You can include them in the header if you wish (optional):

<style>
a > img { pointer-events: none; }
article { margin-top: -2em; }
.page-cover-image { width: 100vw; min-width: 98vw; position: relative;
    margin-left: -49vw; left: 50%; z-index: -1; }
h1 { padding: 5px 0; }
h2 { padding: 4px 0; }
h3 { padding: 3px 0; }
h4 { padding: 2px 0; }
h5 { padding: 1px 0; }
figure.image { text-align: left; }
</style>

Also, don't forget that you can put your Google Analytics tracking javascript in the footer. It's your site after all 😀

3. Publish

Now you're ready to publish your Notion content.

Pre-flight Warning

Now that we got that out of the way, we're really ready to publish.

Back on the Publish Website page, click on the "Publish" link next to your publishing profile

Have fun watching as Power Up spiders your content and sends the files to your server

Post-flight Warning

4. DONE

That's all there's to it. You should now be able to see your Notion content on your server and access the site however you had configured it.

This blog is the perfect example:

This blog was written in Notion and published using Power Up for Notion by Globi. Easy one-click publishing of your Notion content.