Many of the sites we create in our domains are installed via a cpanel tool because they have complex file structures and often require database set ups. But there are quite a few website themes that are all self-contained HTML/CSS/Javascript files that we can upload directly to our domain with the File Manager.

If you are a person who likes to tinker in HTML and web creation “by hand” you can easily add these sites to your domain using the same File Manager tool we used to fix our Front Entrance Built in Site Publisher kit and also used for replacing the background image in a site created with Site Publisher.

This activity walks you through the steps to put a self-contained web site within a directory of your site.

From cpanel look under Files, and open the File Manager tool. Use the left side navigation to open your public_html directory, this is the directory that corresponds to the web site that is the same address as your main domain name.

While public_html is open, from the top menu click +Folder, which lets us create a new directory.

The interface for creating a New Folder, a form field for New Folder name has "me" entered in it. New Folder will be create in: lists "/public_html"

In this case, we want choose it to be a directory named me (or any other directory/url name you desire). While I may have one site running from my own domain at http://extendlabs.ca the one I make a folder for at http://extendlabs.ca/me is a completely separate site.  On StateU.org, a domain at https://gadgets.stateu.org/ the folder made in the corresponding location will be available (for the time my account is active) at https://gadgets.stateu.org/me.

For this activity, you will use a self-contained version of a web site that has been packaged as a zip file- download it now  and save the ZIP file (it does not need to be expanded). FYI this template, Eventually, is one of several high quality Creative Commons licensed themes from HTML5up.

In the File Manager click Upload and select the eventually-extend.zip file you have saved on your device. Once uploaded to your me directory, select the zip file, and click Extract from the File manager menu to place all the web files in the right location.

If all went well, you should have a web site like http://extendlabs.ca/me running under your own domain, from the directory you created.

This theme animates a series of 4 images in the background, maybe you would like to change the images to ones of your own choosing. Open the images directory to reveal four files- bg01.jpgbg02.jpgbg03.jpg, and bg04.jpg. You can then find your own images to use in the background, and rename them these exact names.

Open the images subdirectory and use the File Manager Upload button to add all the ones you wish to replace (check the box for “Overwrite existing files.”

If you swap all files, you will have your own images appearing in the background, the slowly will slide by right to left in the background. But what about the text on screen? Go up one level back to the me directory, and select the main content file index.html. You can then click Edit if you don’t mind seeing HTML code or HTML Edit for a visual editor. From here you can change the header and body text, and even the social media links in the footer. A better practice might be to download the index.html file, edit locally on your device, and then re-upload to replace the original.

The template creates a site like http://extendlabs.ca/me  but in your own domain, you can quickly change it to fit your interests. Our Gadgets site on StateU might look like this, with four different images that move slowly behind the text.

 

The point here is knowing how and where to upload files within your domain to make a stand alone site.

What can you upload? Almost any web content that can be run from static files.

Example for "Adding a Self Contained Site with File Manager":
http://extendlabs.ca/me/

Complete This Kit

After you complete this kit please share a link to it and a description so it can be added to the responses below. You can add it directly to this site.

Add A Response

Guides for this Kit

Have you created a helpful guide or do you know one that might help others complete this kit? You can share a guide if it is available at a public URL. .

Add a Guide

0 Responses for this Kit

2 Guides for this Kit

  • HTML5 Up!
    shared by Alan Levine

    Some of the best static website themes (all HTML/Javascript/CSS) and all are licensed Creative Commons. Knowledge of HTML needed to customize.

  • What is a Static Website? (Dev)
    shared by Alan Levine

    An overview of the definition of static websites from Wikipedia with extra notes to explain that with JavsScript, these sites do not necessarily “display the same information for all users.”

Creative Commons License
This work by Alan Levine as part of the EduHack project is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Leave a Reply

Your email address will not be published. Required fields are marked *