🏠 back to Observable

Gatsby static blog template with content from observable

Hi all,

I have built a minimal template of a Gatsby blog/website that allows you to author posts in Observable. It’s taken me quite a while to make it work, so I thought it may be useful to others.

You can find the site readme/code here and you can see the notebooks in action here e.g. here




I’m now using this template for my personal website, and thought others may be interested in a fully-fledged example - see here

1 Like


Thanks for the great examples! I’m trying to follow your setup and use a similar workflow (observable + gatsbyjs + github pages) but I can’t seem to import my notebook into Gabsy after yarn install-ing.

The notebook I want to add is here.

I’ve gone through the “Download code” followed by:

yarn add @observablehq/runtime@4
yarn add https://api.observablehq.com/d/b98216c7af6b40c2.tgz?v=3

and then in my Gatsby code

import {Runtime, Inspector} from "@observablehq/runtime";
import define from "@horatiubota/romanias-population-from-1992-to-2017";

but the import kept failing with an Unexpected token 6:217 error which wasn’t very helpful. So I created a simple react app with npx create-react-app test-app just to check if I can import the notebook in react directly, but that also fails with:

SyntaxError: /node_modules/@horatiubota/romanias-population-from-1992-to-2017/b98216c7af6b40c2@220.js: 

Support for the experimental syntax 'importMeta' isn't currently enabled (6:219). 

Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.

Adding the @babel/plugin-syntax-import-meta to webpack.config.js leads to:

Module parse failed: Unexpected token (5:219)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

The notebook I’m trying to embed contains two file uploads and the error messages listed above seem to be referring to parts of the code where the file uploads happen. Did you managed to successfully embed a notebook with file uploads in your gatsby blog?

Hiya. Yeah, I’ve run into the same problem. Didn’t look in too much detail in afriaid, I solved it just by hosting the file elsewhere

Thanks for the quick reply!