Create a static webpage using Github and Plotly

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.

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 :

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:

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

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:

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

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:

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

It will generate a figure like this:

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store