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.
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.
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:
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:
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.
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 (email@example.com) and I'll update it. Thanks!