cancel
Showing results for 
Search instead for 
Did you mean: 
rurban
Community Participant

Using Github for course content

Jump to solution

I'd like to put core components of my class under version control in Github.  That way I can track changes from semester to semester, "fork" a class, etc.  I did install the LTI tool, but that just creates a page for the whole repo.

In theory I should be able to share things from my Github repo to Canvas using iFrames,  (How do I embed a lesson inside a Canvas course? | Canvas Instructor Guide | Canvas Guides ).   But when I use an iFrame,  I just see a blank page. (using different URLs of my own,  or directly using the examples in this document, and a few from other discussions here).

In the Rich Content Editor, it will draw a placeholder box for the iFrame, but still can't see content.

I guess this is two questions.

1. Anyone else using Github in this way?

2. Any ideas what I'm doing wrong with iFrame?

<p><iframe src="https://github.com/musebrarian/LIS5703-Info_Org" width="100%" height="640"></iframe></p>

Tags (2)
1 Solution

Accepted Solutions
awilliams
Community Champion

So to recap, my suggestion if you want nice looking pages displayed in your iframe, use Github Pages.

1. Go to https://pages.github.com

2.  Click "Project Site"

3. Follow the instructions there to create your gh-pages branch and create your first page

4. Embed your new Github pages page into your Canvas content page using an iframe with code something like:

<iframe src="https://musebrarian.github.io/<project-name>/<page-name>" width="100%" height="600"></iframe>

Now you can use all the Github power of version control on those pages plus have them embedded into your Canvas course and have them update in Canvas when you change them in Github.

View solution in original post

20 Replies
kona
Community Coach
Community Coach

 @rurban ​, this is a really interesting idea! I'm going to share it with the Canvas Developers​ group in the Community to see if any of them have experience or knowledge about what you're trying to do.

dhulsey
Community Champion

This might be a secure content issue. In case it is, stefaniesanders​ has a great document on dealing with it: External or "insecure" content: Strategies for helping students cope​. Of course, the better solution is if Github supports https, and if so, using a secure url for your iframe will work.

rurban
Community Participant

Dallas,

Github is using https.

Hmm, the code I had in my original post seems to be gone now.  See LIS5703-Info_Org/LIS5703_reading.md at master · musebrarian/LIS5703-Info_Org · GitHub

(I'm just kicking the tires with this idea right now, so sample content).

Stefanie
Community Team
Community Team

 @rurban ​, I just wanted to point out that the guide link you posted in your original post links to the old (well, downright ancient) Canvas guides, and the instructions in that guide refer specifically to embedding links to the old Canvas Guide lessons in Canvas pages. Having said that, the general rules laid out in that old lesson should apply. You should be able to use simple code like this to embed your content in an iframe:

<p><iframe src="[insert URL here]" width="100%" height="640"></iframe></p>

...which is code I've used successfully hundreds of times in the past. Today, however, I can't get it to work, no matter what https: URL I put in the space....so it seems that whatever you're doing wrong, I'm doing as well. :smileyplain:

I'd welcome any ideas.

awilliams
Community Champion

I haven't found a total solution for you yet but so far the most progress I've made is with gist-it.appspot.com - Embed files from a github repository like a gist

rurban
Community Participant

Looping back around.

I'm not seeing a shield when I load the page with the github iFrame.

No, I'm not seeing the shield either,  @rurban and that's probably because it's https: content.

awilliams
Community Champion

Ok so I was able to create an html file following the instructions from the above site that would generate a somewhat formatted version of your markdown file, however it was not able to process all of the markdown.

The html file I created for you looks something like this:

<html><head><title>GitHub Canvas Embed Test</title></head>

        <body>

          <script src="https://gist-it.appspot.com/http://github.com/musebrarian/LIS5703-Info_Org/blob/master/LIS5703_readi..."></script>

        </body>

</html>

Then I uploaded that file to my sandbox course and used the instructions in Embedding Flash (SWF) Animations in Canvas modified slightly to point to our newly uploaded html file.

This gave me an iframe on a page that looked something like this:

Screen Shot 2015-12-04 at 12.55.03 PM.png

It's not perfect yet, but I'm not sure how much further down this path I could go. I am wondering if using GitHub Pages might not work out better...

awilliams
Community Champion

Embeding from Github Pages is way easier and looks much nicer.

Content page code example:

<p><iframe src="https://facebook.github.io/react/" width="100%" height="600"></iframe></p>

Looks like this:

Screen Shot 2015-12-04 at 1.00.07 PM.png