# How to Embed an Observable Notebook in A Hugo Blog

Hongtao Hao / 2020-11-02

Embedding an Observable notebook in a Hugo blog post is no different than embedding it in a stand alone webpage . Also, you can read this tutorial on Observable Jekyll . Although it used Jekyll as an example, it’s exactly the same for Hugo.

# Direct embedding through iframe #

You can embed a visualization on ObservableHQ directly through an iframe. I talked it about how to do it here .

This is the result:

<iframe width="100%" height="534" frameborder="0"


If you don’t want the logo at the bottom, or that you think the loading is too slow, you have to embed it manually, which is what I am going to talk about in this post.

# Manual embedding #

This part is almost exactly the same as embedding in a stand-alone webpage . However, since in a Hugo blog post, the head and body are already defined, you don’t need to define the head and don’t need to manually write <p>...</p>, for which you can simply use Markdown (which is why Hugo is invented…).

You should know that within a Hugo blog post, you can still (and herhaps need to) write <div>...</div, directly include a stylesheet with some CSS, and incldue the <script type="module">. You can see the source codes of this blog post here .

The below is what it looks like to manually embed this Observable notebook of mine.

Dataset:

# Full width #

If you want the visualization to be full width, it’s very easy to do so. Follow the instructions in this tutorial . Wrap the target visuzliation within a div that is classed (What? It’s not a verb?) fullwidth (or any name you prefer), and define fullwidth this way1:

.fullwidth {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}


1. It’s not my creation, but the codes from this tutorial . ↩︎