Making a blog from Notion & Github Pages

Posted on Mon, Jun 8, 2020 web

Hi there! This blog was made from converting almost all elements from a Notion page (.JSON) cache into a static webpage served by Github Pages. The bulk of the work is done by Alex Wang's Notablog. is a faster alternative but I haven't used it. Go try and see which one you like more! Update: That project is dead, apparently. Notablog still the best for now


Notion's personal plan went free recently, which means people will inevitably figure out a way to make websites with it and some kind of CMS in-between. The problem is that depending on what you use it for, Notion isn't exactly a good solution for 1:1 content mirroring with speed in mind:

old reddit > new reddit btw

Sure enough, when I tested one of my Notion pages with Google's PageSpeed, its scores plummeted to the depths of performance hell.

This is a terrible way to build a website, so let's look at Notablog: Link


For full instructions, please look at the repo itself. I'll post a short version here from the README


Make sure you have Node.js v12.0.0 or higher. Check with command node -v

Your website is ready!

The content of notablog-starter/public/ should be uploaded to a server, or any static hosting service. In my case, I use Github Pages. Go ahead and set up the repo according to their guide. I use git-bash for version control, as an aside.


Don't forget you can also use, Netlify or simply self-host.

What each box does

Column nameProperty typeDesc
titleTitleThe page title.
tagsMulti-SelectTopics related to the page.
publishCheckboxDetermine if a page should be rendered.
inMenuCheckboxDetermine if a page should appear in the navigation bar.
inListCheckboxDetermine if a page should appear in the article list.
templateSelectSpecify which template to use for the page. Available template names depend on the theme you use.
urlTextA string to be used as the filename and the URL of the generated page. It should not contain / and \. If it's empty, the id of the page is used.
descriptionTextShort intro of the page. Styles are working.
dateDateUser customizable date, convenient for importing posts from other platforms or adjusting the order of posts.

Editing the theme


If you want to change elements of the site, notablog.css and theme.css are the two files you should be looking at. Be sure to edit the ones that are in the notablog-starter/themes/pure-ejs/assets/css folder, not the ones in your "public" folder


Below is how I edit and upload my blog posts

git add -u OR git add <file>
git commit -m "Fixed etc..."
git push


Performance turned out to be pretty good:


If you want to change anything related to the html/css, head to notablog-starter/themes and tweak the files inside

And that's all it is - this post is long-winded, but the gist of the workflow is above. The longest step is just setting up your repo and if you're familiar with git and Github in general, you should be fine.

Please contribute to the Notablog project if you want to see more things added in the future!

Or you can just use - I've heard great things about it!


10/01/21: Added theme edit section