Embed an Iframe in GitHub Pages
Question: After you create an interactive chart or map, how do you embed the live version in a website that you control?
Here’s the full three-step answer that combines lessons from the Embed on the Web chapter introduction and the two previous tutorials:
First, create a web page that supports iframe embed codes. If you don’t know what that means or don’t yet have a personal website, go back to the previous tutorial, Create a Simple Web Page with GitHub Pages, or see the video and step-by-step instructions below.
Second, copy or create an iframe code from your data visualization. Go back to the previous tutorial, Copy an iframe code from a Google Sheets interactive chart, or see the video and step-by-step instructions below.
Third, embed (or paste) the iframe code into your website. The video and instructions below show how to paste an iframe from a Google Sheets interactive chart into a simple web page with GitHub Pages.
The goal is to embed the iframe code from a Google Sheets interactive chart, which resides on a Google web server, into your GitHub Pages web site. The result will be similar to the one below:
TODO: Convert to code-chunk iframe: https://docs.google.com/spreadsheets/d/1YgBWYm9nTGlCuyqSwU3SDb7xk-SMSPgjfYq5iLqL0nQ/pubchart?oid=200651442&format=interactive
Sign up for free GitHub account, then sign in, at https://github.com.
Create a new repository (think of it as a folder that contains your project).
Name your repository (or “repo”), and select Initialize this repository with a README. Optional steps: add a description and select a license.
Scroll down and click the green button to Create your repo, which will appear in a new browser tab, with this URL format:
In your GitHub repo, click on Settings tab, scroll down to GitHub Pages, select master branch as your Source, then Save. This publishes the code from your repo to the public web.
When the Settings page refreshes, scroll back down to GitHub Pages to see the new link to your published website, which will appear in this format:
Right-click and Copy this link to your published web site.
At the top of the page, click on the repo name to return to the main level.
Click the README.md file to open it in your browser, and click the pencil symbol in the upper right corner to edit it.
Inside your README.md file, paste the link to your published web site, and type any text you wish to appear. The .md extension refers to Markdown, an easy-to-read markup language that GitHub Pages can process and display as HTML.
Go to a data visualization you have created, such as a Google Sheets chart, select Publish > Embed, and copy the iframe code. This line of HTML code displays the interactive visualization website inside your personal website.
Scroll down and click Commit to save your edits.
When your GitHub repo page refreshes, click on the new link to go to your published web site. BE PATIENT! Your new site may not appear instantly. Refresh the browser every 10 seconds. You may need to wait for a few minutes for a new site to appear the first time, but later changes will be much faster.
- A published README.md file will display an HTML iframe code, unless you add other HTML files (such as index.html) to your repository.
Remember that GitHub Pages is designed to create simple web pages and sites. See other web publishing tools mentioned in this chapter to create more sophisticated web sites.