Hosting static websites in Learn

If you’ve had some experience building static websites before, you might be interested to know that it’s possible to host a site in Learn.

See an example of a website that’s easily hosted within Learn

The example site uses a file structure like this:

It’s relatively simple to upload this kind of site to your course’s folder in the Content Collection. Then you can link to the index.html file from within your Learn course, and you’ll get a nice-looking site like the one above that’s only available to students on a particular course.

How to get started

First, you’ll probably want to get FTP-like access to your course’s folders in Learn’s Content Collection. You can read more about this in our article Setting up Web Folders in Learn.

You’ll also want to get started with some kind of framework so that you’re not building your site completely from scratch. We used Foundation to create our example site, because it creates responsive sites and the default settings are all pretty good.

If you like the look of our example site, feel free to take it. All you need to do is right-click / view source, and use the HTML as a template for your own content. You’ll also need to add this extra CSS file and put it in the CSS directory.

A few limitations

On a regular static site, you might make the site banner and the navigation as two separate files, site-banner.php and navigation.php, and then have them appear at the top of each page using a PHP include.

That way, if you change the title of your site, or want to add a new item to your navigation, you only have update one file.

Unfortunately, if you’re hosting a site on Learn, you won’t be able to use PHP. However, you can use jQuery to make these elements appear.

How to make site elements appear with jQuery

(1) Include this bit of code at the bottom of every page, just before the closing </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

This loads the jQuery library, and lets you use its bag of tricks on your site.

(2) Upload a file called navigation.html to your site.

Here’s the file I used to make the navigation for the example site

(3) Wherever you want the content of navigation.html to appear, write this:

<div id="mymenu"> </div>

4. At the bottom of your page, after where you loaded the jQuery library but before the closing </body> tag, add this:

<script>$('#mymenu').load('navigation.html');</script>

Acknowledgments

A huge thank you to Dr Hannah Rohde, who showed how a Foundation site can be a great home for course content, and also to Dr Simon Fokt, who explained how hosting sites on Learn is possible.