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.
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,
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
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.
(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: