Notion2Gatsby

Disclaimer : This repository is forked from Arnaud's repo. His repo is not being maintained, so I modified some codes to make it work.

Notion2Gatsby is a convenient tool to transform your notion pages to fancy Gatsby site.

• Because it is in very early development, so I welcome any kind of suggestion and feature requests.

Demo

Setup

Install dependencies

You need a Github account, and attach your SSH key to the account, if you want Notion2Gatsby automatically setup your new repo for hosting Github pages.

A command below will install Github CLI and make you login to Github via CLI. After that, interactive shell will prompt you to generate a new repo for your Notion2Gatsby.

bash ./install.sh

Setup params.json file

In the root of the repo, you will find example.json. Copy this file and rename as params.json, as Notion2Gatsby takes this filename as a default. A structure of this file is as below:

{
  "template_repo": "https://github.com/Indosaram/notion2gatsby.git",
  "blog_title": "MY BLOG",
  "description": "THIS IS MY BLOG",
  "author": "TEST",
  "github_username": "MY_USERNAME",
  "target_dir": "/Users/indo/code",
  "notion_user_id": "example@exmple.com",
  "notion_token": "MY_NOTION_TOKEN",
  "notion_root_url": "https://www.notion.so/MY_PAGE_URL",
  "google_analytics": "U-XXX",
  "google_adsense": "ca-pub-xx"
}

Name	Description	Required
template_repo	A url of template repository.	*
blog_title	A title of your blog, and the repository name. All whitespace will be converted with _.	*
description	A short description of your blog
author	Author name
github_username	Github username. i.e. Indosaram (Not email address)	*
target_dir	A directory to clone the template repository. You may modify this entry according to your OS running.	*
notion_user_id	NOT USED
notion_token	A secret token to grant Notion2Gatsby access permission to your notion page.	*
notion_root_url	A url of root page	*
google_analytics	Google analytics identifier
google_adsense	Google adsense identifier

If an entry is not marked as 'required', you don't have to fill up that entry. However, you should leave it as it is! Do not delete the entry.

To get your notion token, please refer this page.

Setup Notion page

You should make a page structure as following:

root
├──article
├──article
...

From root page, Notion2Gatsby will read subpages accordingly. Next, you must share your page via web. Notion2Gatsby only requires read-only permission.

(Optional) Create a repository

You can always host this Gatsby template on your own repo. However, If you want Notion2Gatsby handle creating a repository for you, then run-

bash ./run.sh

It will setup;

• a clean repository with gatsby template.
• a script which will trasform your notion pages to posts.
• Github secrets to access your notion

Now go to the repo created, then you can see your blog running in shortly.

Writing your articles

Before continue, you may want to refer Markdown style preview page, so you can choose what components from Notion to use.

Cover image

Notion2Gatsby requires an article having a cover image. If an article does not have one, build stage will fail.

H1 tag

<h1> tag is reserved for page title. Search engine bots will find this tag as a page title, so it is highly recommended to avoid using this tag other than the title. In addition, if you use <h1> tag, because a table of contents(toc) will include only from <h2> to <h3>, the strucutre will be ruined.

Development

This repo assumes Python version equals to 3.8, but you can try it with your own python version. (I've only tested Python 3.7~3.9) If so, you may want to edit Pipfile's python_version entry with your python version.

To run locally

WIP