Convert GitHub Pages Link to iframe

#StandWithUkraine - Stop the Russian invasion

Join us and donate. Since 2022 we have contributed over $3,000 in book royalties to Save Life in Ukraine & Ukraine Humanitarian Appeal & The HALO Trust, and we will continue to give!

In Chapter 9: Embed on the Web, we discussed the benefits of displaying interactive content from a primary site and making it appear seamlessly in a secondary site. You also learned how to convert very long Datawrapper and Tableau Public embed codes into shorter iframe tags when needed, so that you can embed them more easily on a secondary website.

The same concept applies to GitHub Pages. When you publish a code template for a chart or map (or any content) on GitHub Pages, it generates an online link that you can convert into an iframe tag, using the same principles as above, to embed it on a secondary website. Follow these steps:

For any GitHub repository you have published online, go to its Settings page and scroll down to copy its GitHub Pages web address, which will appear in this general format:

https://USERNAME.github.io/REPOSITORY

Convert it into an iframe by enclosing the link inside quotation marks as the source, and adding both start and end tags, in this general format:

<iframe src="https://USERNAME.github.io/RESPOSITORY"></iframe>

If desired, improve the iframe appearance on the secondary site by adding any of these optional attributes, such as width or height (measured in pixels by default, or percentages), or frameborder="0" or scrolling="no", in this general format:

<iframe src="https://USERNAME.github.io/RESPOSITORY" width="100%" height="400" frameborder="0" scrolling="no"></iframe>

Tip: Either single-quote (') marks (also called an apostrophe) or double-quote (") marks are acceptable in your iframe code, but be consistent and avoid accidentally pasting in curly-quotes.

Now you are ready to paste your iframe into your preferred website, using methods described in Chapter 9, to display your interactive chart or map template from published repository using GitHub Pages.

Now you should have a better sense of how to edit and host code repositories on GitHub. The next section describes how to enhance your GitHub skills by creating new repos and uploading your files. These are essential steps to create a second copy of a code template or to work with more advanced templates in the next two chapters.