How to Create a Free KU Website

by Chris McKitterick

This document walks you through the steps to create a free Web host site at KU, make the pages that will become your website, and then securely upload your files to that site so others can see it on the internet. Note that a few screenshots of the KU IT site are a little out of date - sorry! However, the instructions are the same.

Update: I've made some video tutorials to help people through this project, posted them to YouTube, and embedded them in the relevant spots below.

 Create a KU Website

1. Go to the KU Information Technology page by clicking here. Scroll down to "Personal website" and click. After you log in, you should see a page like this:

4. click Personal Web Space on the left. This takes you to this page:

6. Put a checkmark in the Web Service checkbox; in the example above, mine is checked, so it provides the path to my personal website.

7. Click the Save Changes button. You will now see a screen that looks like mine, above.
    Your website address is now listed, named Personal Web Space: people.ku.edu/~your-online-ID

8. Click the Finish button if you are done adding services to your account.

Viola! You now have a host for your website! Except it's empty, or only contains a default page (which is named index.shtml)... time to create some content.

Create Your Website

A website is a lot of things: A collection of content, images, and so forth that users can view from their computers anywhere in the world.

If you don't have an HTML editing program, you can simply use Notepad (or any PC, Linux, Mac, or other program that allows text editing without formatting) to create pages. An excellent - and free - program you can download is Notepad++ (for PCs - click here to go to the download page) or TextWrangler (for Mac- click here to go to the download page). These little programs give you a lot more power in editing Web pages, because they show tags, tag attributes, and content in different colors; check out this screenshot to get an idea of how Notepad++ looks while working on an HTML document (similar to TextWrangler or other programs).

To download the program, click the Download icon or the Notepad++ Installer link on the Download page, and follow the instructions. On the new page, click the Download link as shown in this screenshot:

  1. Create a new blank .htm file using Notepad, Notepad++, or other appropriate program (never use Word or such). On a Windows computer, you can find the basic Notepad app in Start/Programs/Accessories/Notepad; otherwise, open the Run window and type Notepad.exe to start the program.
    • Alternately, open a new file using a program such as Notepad++ that allows text editing without adding formatting.
  2. To save, use Save As..., naming your main page index.shtml or index.htm or whatever you wish to call it. Those are typical default home-page names for KU websites; for people to see your home page by default, use the placeholder page-name that KU IT loads onto your website.
    • Feel free to use any other name; however, you'll need to give people the full path to your main page for them to find it.
    • Be sure to select Save As and choose the type called All Files, not Text Documents. However, only use Save As on the first save; after that, use Save or youll end up having to select file types and locations every time.
    • Leave this Notepad file open.
  3. Also open this file with your Internet browser (Internet Explorer, Netscape, Firefox, and so on) by double-clicking it in the folder where you saved it.
  4. Now you can make changes in Notepad while checking how it looks in your Internet browser.
    • Leave both files open so you can see the source code (text editor) and the result (browser).
    • Be sure to save all the changes you make using Notepad by either clicking File/Save (not Save As), or by hitting Ctrl-S.
      You can see the changes in your Internet browser by hitting F5 to refresh the page.
  5. Viola! You're building a website!

Create image files to add to your website; I recommend keeping them no more than 600 pixels wide or 200 kilobytes for large images. Use the compressed .jpg file type when editing and saving your images, as they're much smaller than types such as .bmp. You can host these on common image-host websites or on your own website; your choice! Just include the proper <img src="where-is-your-image-stored.jpg"> tag. Note: It should never point to your C: drive or anywhere else on your computer.

If it's your image, and you upload it into your website's public folder, all you need is the file name:

For example, <img src="my-image.jpg">

If it's someone else's image, you'll need the full URL:

For example, <img src="http://www.nasa.gov/sites/default/files/styles/946xvariable_height/public/pia17470annotated.jpg">

Having issues working with HTML or just want to work through the process at your own pace? Here's a video to walk you through the basics of creating a simple Web page. So let's get started....

In this next tutorial, we turn the simple Web page we just created in the HTML tutorial into something more interesting that uses a three-column layout. We'll also create a second page, then link them both to a cascading style sheet (CSS) that adds some flair. Hey, that's a real website! So on to part two:

Want to add music, movies, and so forth? Go crazy! YouTube, among other hosts, gladly store your files and provide the <embed> code for you to simply add to your HTML source wherever you want the movies and so forth to appear on your pages. For example, here's a neat tool for deciding on color schemes.

But you're not ready for that yet! In order for other people to view these files as a website, you'll need to upload them to your Web host. Along with text-based instructions and screenshots, you'll also find the final part of the video tutorial below.

Upload Your Files to the Internet

Now you have a bunch of pages and other files ready to upload to the internet. To do so, you will need a secure file-transfer program (FTP) such as WinSCP (for PCs) or Transmit (for Macs). Here's the final part of the video tutorial, after which you'll find a great amount of detail:

To download WinSCP, click here; to download Transmit, click here. For WinSCP, this opens a screen that looks much like this:

Click the Installation package link and follow the instructions to download the program.

After you have downloaded WinSCP or another secure FTP program, you're ready to move files from your computer to the Internet.

1. Start WinSCP in Windows by going to Start/Programs/WinSCP and then selecting the WinSCP icon. You'll see a screen like the one shown in the next screenshot (looks similar in Transmit):

2. Fill in the Host name box with people.ku.edu (only - don't use http or www or anything else), the User name box with your KU Online ID (only - don't use @ku or anything else), and the Password box with your KU Online ID password. If you're using another Web host, fill in the blanks accordingly. This works the same for any type of computer, though the interface might look a little different. Make sure File protocol says SFTP (secure), not plain FTP (less secure).

Don't fill in the Port number or any other box.

3. Click the Login button.

4. If this is your first time logging in to your website via FTP, you'll see a notification that the KU server wants to download an encryption key file. Click Okay (or however it is worded), because you need this file to perform FTP securely.

5. Now you'll see a notification page from KU IT. Read the terms and click I Accept; basically, you are not allowed to share illegal files, host porn, or so on.

6. Now your FTP session begins. You'll see a screen similar to this:

7. For visitors to see your files, you must place all of them in the public_html folder. Open this folder by double-clicking it. In this folder, you'll probably only see a single file called index.shtml or something similar.

8. To move files from your computer to your website, simply drag-and-drop them from your local computer to the WinSCP window that shows the public_html folder and drop them into the right-hand pane.

After you move files to this folder, you'll see something like this:

9. If you want people to be able to see your main page by default when they visit your site (for example, when they type http://people.ku.edu/~cmckit into the browser window), you need to call that page index.shtml - any other name requires the visitor to type in the file name (for example, http://people.ku.edu/~cmckit/HTML-and-CSS-tips.htm).

That's it! Your website has gone live! Now's when it gets fun, as you test it, add movies, and enhance it over time. You'll find all kinds of fun toys online to make your website more interesting and useful, such as YouTube and scripts that people are always sharing for free, such as the image-letter tool I used on my website's main page, created by Erik Kastner.

You'll find all kinds of useful links to HTML tags, CSS code, backgrounds, colors, and much more on the Web Links page and all over the Internet. Google is your friend.

Now share your website with the world by sending them a link to your site (such as http://www.people.ku.edu/~cmckit/). If you didn't use the default index-page name, include that file name as part of your link (such as http://www.people.ku.edu/~cmckit/mckitterick-HTML.htm). See why it's nice to use the default index name instead of including the file name? Do not include public_html in the path; that's just for the server.

I hope you found this walk-through helpful. If you note any errors or confusion in this document, please drop me an email (cmckit@ku.edu) and I'll update it. Thanks!

Best,
Chris McKitterick
University of Kansas Technical Communication Liaison
http://www.ku.edu/~techcomm








Updated 10/30/2013.