Create a static webpage using Github and Plotly

4 min readMay 25, 2021

As a data scientist, you often create visualizations that tell a story about your data. But you may feel limited by the fact that these visualizations live exclusively in your macbook’s jupyter or python file. Perhaps you’ve tried exporting them as jpg files using matplotlib, but that just feels insufficient. There’s a better way: create a static website using Github Pages, and populate it with html files of your data visualizations using plotly.

Start off by creating a new github repository. You can use this one as a template if you like; it has all the examples used in this blog post. Make sure that you fork it first, using the button at the far right, like this:

After forking, you’ll have a new version of the same repo within your own github space.

In the folder called “docs” in your repo, there isa simple file called index.html with the following code (or you can create your own if you’re familiar with html). This will create a very simple web page.

<!DOCTYPE html>
<html><body>
      <h1>First Analysis</h1>
      <h2>Description of analysis goes here</h2>
            <p>Lorem ipsum dolor sit amet</p></body>
</html>

After taking a look at index.html it’s time to deploy our static web page. At the top of your repo, find the “Settings” tab and look for Github Pages (they recently moved it!). You’ll find it in the left-hand nav bar; just click on “Pages” like this:

You should see the following:

Update “Source” so that it deploys “main” branch from the“docs” folder, as follows. Don’t skip this step! It’s a common mistake to accidentally deploy from “main” but the file you need (index.html) isn’t located there.

Once you click “save” you should see a message like this one:

Click on the URL — your simple web page should appear!

Now let’s make some improvements. First, let’s add some CSS styling using a bootstrap template. Then, save a simple jpg to your docs folder — one you’d like to use as the icon for your browser tab. Give the browser tab a title. Add the following code starting at line 3 of your index.html file, just above body :

<head>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"><title>1st Analysis</title>
      <link rel="shortcut icon" type="image/jpg" href="python-logo.png"/>
   </head>

Back in the body of the webpage, you can add another jpg or png with a static image. Make sure that the image is saved inside of your docs folder — the simplest way to do this is the github upload tool, but once you become proficient at git, you’ll find there are much better ways to do this.

For a static jpg you use the following code in the index.html file:

<img src="piechart.jpg" alt="pie chart" width="100%">

You can even link to a picture that’s not saved in your repo, if you want:

<img src="https://www.bestcat.com/assets/images/bestcat/In_That_Box.jpg" alt="cat in a box" height="500">

If you have an html image that you’d like to add, the code is a little different. For example, take the html piechart file which you’ll find already available in our example repo - you can add it to the body portion of index.html by using an iframe, like this:

<iframe src="piechart.html" width="100%" height="500" style="border:1px solid black;">  </iframe>

You might also want to add a link to your github repo at the bottom of your static webpage, as follows:

<a href="https://github.com/plotly-dash-apps/101-static-website-example">code on github</a>

You should be able to see these updates to your github page as soon as you commit the changes to the repo.

Generating a new image using python

But what if you want to create your own image? I’ve included an example python notebook that you can imitate in our repo, here.

Fire up the notebook. The first time you use it, you may have to do the following installs:

! pip install plotly
! pip install kaleido

Now you can generate a plotly visualization and visualize it inside the notebook:

import plotly.graph_objs as go
labels = ['Breakfast','Lunch','Dinner','Snacks']
values = [6,12,18,4]
data = go.Pie(labels=labels, values=values, hole=.3)
fig = go.Figure([data])
fig.show()

It will generate a figure like this:

You can save your image as a static jpg or an interactive htmlas follows:

fig.write_html("piechart.html")
fig.write_image("piechart.jpg")

Finally, let’s add these new files to our static webpage as we discussed earlier.

That’s enough to get you started! This is just a simple example. Read more about github pages and plotly visualizations to become an expert.

Create a static webpage using Github and Plotly

Generating a new image using python

Written by Austin Lasseter

No responses yet