Hosting static files for an interactive graphic within your site

Let's say you've built an interactive project/graphic and instead of it being a standalone project with its own navigation, look and feel (details on handling those) you want it to be part of a specific article or page. No problem.

What you'll need:

• A GitHub Account (they're free!)

In this example we'll use a graphic made with Tumult Hype, but the same steps work for any html file that has static dependencies (e.g. images files, css or javascript).

---

One-time Setup:

Create a repository just for holding static files.

1. Click 'new repository' on GitHub. (make sure the name has no spaces, check 'initialize this repository with a README')
2. Create a new branch called gh-pages. (this name must be exact)
3. Now when you go to Settings you'll see the public url for this repository
   
   That url will be important later.

---

Uploading a project to GitHub

Once you are done with a project you can upload the static files to the GitHub repository's gh-pages branch. (The html file does not need to be uploaded)

• In the Hype example below you would upload (aka commit) the entire test.hyperesources folder
  
  
  
• Your resources are now available online at the url githubUsername.github.io/repositoryName/folderName
• You can repeat this step for every graphic you want to add to your site. You don't need to create a new repository every time but can add new folders to this repository. (Must always be on the gh-pages branch.)

---

Preparing your html code

• Open the html file in a code editor
• Find the script tag referencing the hype src. Change the url to the one from GitHub, e.g. githubUsername.github.io/repositoryName/folderName
• Copy the entire file

---

Adding the graphic to CEO

1. Check out the article, page or section you want to put the graphic on
2. Use Embed
3. Paste in the entire html file
4. Done!

These instructions are specific for a Tumult Hype file, but can be applied to any case where you have custom html that needs to reference css, images or js files. The files need to live somewhere on the internet and you can use the GitHub repository on the gh-pages branch for this.

If you have any questions, please contact us.