This Website!

This website started out from inconvenience. All my ideas and projects were on this organizational program called Notion. So eventually the idea popped into my head that it would be quite convenient if I could turn my Notion pages directly into HTML for the website.

Now, Notion does have it’s own built in website publisher, but I didn’t want to use that for two main reasons.

  1. I wanted to use my own domain name.
  2. I wanted to be able to style and customize the pages.
  3. I didn’t want to pay extra to remove the Notion Watermark.

So I decided to utilize the export as markdown function in Notion, and turn that into HTML suitable for this website.

I created a python program which:

  1. Reads all the markdown files
  2. Defines page titles and URLs
  3. Rewrites the links between pages
  4. Rewrites image and video links
  5. Extract page metadata
  6. Renders an HTML page using Template files and a json file which links those templates to specific pages.
  7. Builds a search index.
  8. Copies and process assets.

This essentially turns Notion into a CMS for me to use. If I ever want to change the content, all I need to do is write it in Notion, re-export, run it through the python program, and move the export into the pocket-of-stuff Github repo.

Search was one of the hardest things to implement, and it uses Lunr.js. When building the website, the built script creates a file called search-index.json. The browser then loads that index and uses Lunr.js to search for content.

Try out Notion, its well designed, easy to use, and completely free with most features.