Notion Embeds Using Github Pages

Robust & Free

Oct 27, 2020

I’ve recently started exploring Notion as a platform for knowledge capture/management. Juggling a deluge of information across an array of sources (e.g. personal/family logistics, 1-1 summaries, meeting notes, personal projects, running analytics, web links, memes, etc.) and being able to make any sense of this seemingly disparate, ostensibly independent panoply of information by identifying inter-relationships and deriving meaning seemed like the next logical step, moving from accumulating “information” to generating meaningful “knowledge.” I have no relationship with Notion other than that of a user.

Browsing the /r/Notion subreddit, you see lots of people showing their Notion dashboard setups and the one consistent question that arises is how to embed a weather widget (for example) into their own pages. Notion allows the embedding of widgets into pages, but for some widgets (e.g. weatherwidgets.io), you can’t take the generated embed code and insert directly into Notion. This tip covers that scenario.

Existing Solution

My anecdotal perception of Notion users based on the subreddit is that most are non-technical. As such, the existing solutions seem to cater to that audience, but are generally janky (e.g. htmlsave.com) and unreliable from my personal experience. A user in a comment thread mentioned that all this could be done using Github Pages but then declined to provide detail to another user who asked for instructions. These are the missing instructions.

Better Solution

The weather widget from weatherwidgets.io seems to be the best regarded widget available, so this post covers integrating one of their widgets into your Notion page.

Generate the Embed File

go to weatherwidgets.io and configure the widget
1. click on the “Themes” tab and select the “Blank” theme (to eliminate default border)
2. make other style adjustments under “Settings,” “Options,” and “Customize”
3. generate the embed code by clicking “Get Code” and “Copy to Clipboard”

replace the designated section of the template file (below) with the generated code and save as a file with the “.html” suffix

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body { 
      background-color: #2f3437; <!-- set this value to match your background color (#2f3437 is the default "dark" theme color) --> 
    } 
  </style> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Notion Widget Embed Template</title>
</head>
<body> 

<!-- REPLACE WITH EMBED CODE CONTENT --> 

</body>
</html>

Setup Github Pages

create or login to your Github account
create a new repo with a default README (no need to modify/edit this file at any point unless you wish to)
make sure this is created as a “public” not “private” repo
once the repo has been created, click on the repo settings and navigate to the “GitHub Pages” section under the default view “Options”
enable github pages for the repo and select the “main” branch with “/root” (if you don’t see the “main” option, you created the repo without the default “README” file; delete the repo and start again at step 2.2
1. do not choose a theme
2. custom domains are not in scope of this guide
once created and the page refreshed, navigate back to the “Github Pages” section and copy the link to your newly published website. It’ll look like: YOUR-USERNAME.github.io/YOUR-REPO-NAME

add a default “index.html” page (required for sites served from “/root”). You can copy this generic template:

<!doctype html>
<html>
<head>
  <title>Placeholder Title</title>
</head>
<body>
  <p>Nothing to see here... move along.</p>
</body>
</html>

now you have 2 files: i) the actual embed code we created in “Generate the Embed File” step 1.1 → 1.2; and ii) the default “index.html” file
1. either via command-line (via clone, add, commit, push) or the web interface, push these files to your repo
if your embed file was named “notion-weather-embed.html”, you can now concatenate that filename after the website URL for your Notion-compatible embed URL: YOUR-USERNAME.github.io/YOUR-REPO-NAME/notion-weather-embed.html

Hope this helps someone with their Notion setups. Enjoy!