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

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 domain name.

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

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 http://extendlabs.ca/ the one I make a folder for at http://extendlabs.ca/me is a completely separate site.

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 (link for eventually-extend.zip) and save the ZIP file. FYI this 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 on your computer. 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.jpg, bg02.jpg, bg03.jpg, and bg04.jpg.

To replace one of these with your own image, first select one, say bg1.jpg, then click Delete from the top menu. Now click Upload to choose an image from your computer to replace it, say froggy-five.jpg. Once this new file has been uploaded to the images directory, select it, and click Rename to change the file to be bg01.jpg.

If you swap all files, you will have your own images appearing 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.

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

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

Complete This Activity

After you do this activity, please share it so it can appear with other responses below. If your response exists at a public viewable URL, you can add the information directly to this site.

Add A Response

7 Responses Completed for this Activity

  • Once again – for fun (Irene Stewart, @IrenequStewart)

    I re-did this exercise as a way to remind myself of the possibilities. I liked seeing that editing the index.htm was easy from within CPanel on Reclaimed Hosting.

  • A Self Contained Site (Kim Carter, @Kcarte02)

    I came back to do this activity because I wanted to learn how to change the font on my landing page. In the mean time I did swap out the pictures. One is my own which is way to big and I will need to fix later. It is becoming a little bit easier to… Read more »

  • Haven't gone this old school in a while… (Chris Aldrich, @chrisaldrich)

    I created a sub-folder on my sub-domain and uploaded a simple templated HTML5/CSS website to create a simple calling card page at http://sp.chrisaldrich.net/me/. I couldn’t bring myself to replace the picture of the little kid with the gaping mouth because it was just too cute. While I occasionally do some small uploading tweaks like this,… Read more »

  • Subsite of my subdomain? (is that the right term?) (Lisa Koster, @lkoster)

    So this was a bit different for me. This year I am doing everything within the camp2019.learn4growth.com site, so I had to look at slightly different places for the files and to create the subdirectory. It was a great test to see if I remembered anything from last year. I added a directory called “Subsite”… Read more »

  • Down the Rabbit Hole (Lynn Cartan, @LynnCartan)

    For this activity, I ended up going out to HTML5UP and picking up the Spectral template.  Originally I had just intended to just unpack the site and perhaps change an image or two.  Instead, I found myself looking at how I could change the title by going in and editing code.   From there, I added… Read more »

  • Self Contained Site – Spooky! (Irene Stewart, @IrenequStewart)

    I put the site in a subdomain so I could see it, please let me know if I was supposed to put it somehow off the main site instead. I decided to make some changes in the html view.

  • That was fun!! (Lisa Koster, @lkoster)

    This was a pretty easy task and lots of fun. Instead of downloading the image files, I just renamed them.  When I chose my files to upload, I renamed them first, then uploaded them.   It worked like a charm!!  So exciting!! I modified the index file to add in my own information. I even changed… Read more »

Creative Commons License
This work by Alan Levine is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Trackbacks/Pingbacks

  1.  Eventually? Now… a New WordPress Calling Card Theme – CogDogBlog

Leave a Reply

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