Notion Markdown

Posted on  by 



See full list on markdownguide.org. On desktop Any non-database Notion page can be exported as a Markdown file.

Any non-database Notion page can be exported as a Markdown file. Here's how:
  • Click on the ••• icon at the top right of any Notion page you want to export.
  • Click Export. A window will pop up at the center of your screen asking what format you want to download and whether to include sub-pages.
  • Choose Markdown & CSV from the dropdown. Switch on Include subpages if you want to download pages contained within the page as separate files.
  • Click Export to automatically download a zip file containing a Markdown version of your Notion page(s). You can open these files as plain text with Markdown syntax. It'll look something like this when you open it with an app like TextEdit or Notepad:
  • Tap the ••• icon at the upper right of your screen.
  • Scroll down and tap Export.
  • Choose Markdown & CSV from the menu labeled Export format.
  • Tap Export and the share menu on your device will pop up, from which:
    • You can send the file to a nearby computer via AirDrop on Mac.
    • You can copy and paste the download link into your mobile browser to start the download.
    • You can paste the download link into your notes for later.
  • You'll also receive an email from Notion with a link to download the file.
  • ••• menu. What's the deal?
    Export might be turned off for your workspace. Admins can turn off this option in the Security & SAML tab of Settings & Members to keep workspace data internal.
  • If a file is very large (depending on the number of sub-pages included), we may send you an email with a download link rather than automatically starting a download. This is not always the case. No email will be sent if you were able to download the file right away.
Something we didn't cover?Message us in the app by clicking ? at the bottom right on desktop (or in your sidebar on mobile). Or email us at team@makenotion.com ✌️

Lately, I decided to create this static blog using the great GatsbyJs. Of course, a question quickly arose: what data source am I going to use to populate it?

I really like Notion, I use it for note-taking, internal business documentation and I'll probably be using it to write my blog posts, so why not use it directly as a content manager?

Notion

After searching the web for this idea, I came across a blog post by Tony Faieta:

I decided to iterate over what he did.

Specs of the Project

  • I would like to have a root Notion note with a list of sub-notes that corresponds to all my blog posts. The root note is like the index of my blog.
  • I would like my blog to import locally the notes from Notion.
  • I would like my blog to import locally the images of the notes.
  • I would like any video link to display well.
  • I would like my blog to regenerate a static website each time:

    • I make a change on the code
    • every day
    • when I manually ask it to

Importing Notes From Notion

To get the data from Notion, the most flexible tool I found is the notion-py python library. It allows getting notion note modelized as an array of blocks, each block being a text line, a title, an image, a list item, etc.

Notion Markdown

I found markdown to be the best format to import Notion notes because the Gatsby plugin gatsby-transformer-remark handles it very well and have itself a plugin to display all kinds of videos. Also, using markdown allows me to backup the posts easily.

After a bit of hacking, I've made the following script: get-blog-posts.py

It uses two environment variables, NOTION_TOKEN and NOTION_ROOT_PAGE_ID which are respectively your notion token and the root page id.

The notion token allows the library to access the private notes of your notion account, here are the instructions to find it.

To get the page id of your root page it's easy. If the link is https://www.notion.so/Blog-83f4047341534d6bb846b1f561a13173, the id is 83f4047341534d6bb846b1f561a13173.

The script will download any image URL. It will also convert any text line starting by to a markdown frontmatter metadata.

Let's say you have this in your Notion note:

In markdown it will become:

The cover image of the page will also be downloaded and the path will be added in the fronttmater:

The script stores the imported blog posts in the content/blog/ directory. Then I tell the Gatsby remark plugin to generate the pages using the markdown files. At this point, the blog is running.

Continuous Deployment

I want to deploy on Github pages. To do this manually, we can use the npm package gh-pages like this gh-pages -d public. This is nice, but I prefer to automate this part.

I use a 'workflow' made with Github Actions.I create a deploy.yml file in the .github/workflows directory of my repository:

In the on: section:

  • schedule tells to run this on a specific interval, here every day at midnight UTC.
  • workflow_dispatch allows you to have a button on your GitHub interface to manually trigger the deploy.
  • push allows you to trigger the deploy on a specific branch push.

Then the script does the following deploy steps:

Notion Markdown Manager

  • it creates a virtual machine with the latest ubuntu
  • it setups python 3.8
  • it adds pipenv to install the same versions of the python packages as in development
  • it gets the code of the repository
  • it sets the environment variables and runs the commands to import the blog posts and build the static website
  • it deploys on GitHub pages
MarkdownNotion Markdown

And we're all set. We can now create our blog posts inside Notion. When we are done editing the post, we can move the note in the root note and either wait the next day to publish it or go in the GitHub interface to ask a rebuild and the blog gets updated. I really enjoy this workflow because there is very little friction to go from a idea to a blog post.

Notion Markdown Github

Notion

The source code of this blog is available here https://github.com/ArnaudValensi/ArnaudValensi.github.io

Notion Markdown Vs

Thank you for reading and tell me in the comments what is your preferred way to edit a blog.





Coments are closed