Website Design
& Implementation

Most professional websites have a custom 404 error page that displays if you try to go to a page that doesn’t exist on the site. The default 404 error page is set in the server configuration file, which only the server administrator can change. But you can change the way the server handles files in your account, using a file called .htaccess. The instructions in that file will affect how the server processes all of the files in the directory you place it in, as well as all of the files contained in any subdirectories below it. (That's why you're going to put your file in the igme230 directory, not the main www or public_html directory--you don't want it

Start by using FTP to retrieve a local copy of your igme230 directory from the server. Use VS Code or Brackets to open the directory. (Web editors work best if you open a directory rather than starting with an individual file.)

If you haven't yet created an igme230 directory on an RIT web server, you should start with that first--and ask for help if you need it!)

Create a new html document in the igme230 directory to use as your error page. You can call it whatever you want, but this example will use the filename custom404.html. Put whatever you’d like in the page content. (Here's some inspiration.)

Create another new file in the igme230 folder called .htaccess. The period at the beginning of the file name is intentional; it indicates a hidden file in UNIX. The file should NOT have an extension (like .html or .txt) at the end, or it will not work. Note that your computer may not display hidden files properly in the OS, so you may not see it in the igme230 folder. However, both VS Code and Brackets are able to see and edit hidden files, even if the OS isn't displaying them in the file explorer.

In the .htaccess file, put these two lines of text. The first line is a comment, the second line is actual instruction for the server. The file path in the second line is slightly different for people.rit.edu than it is for cad.rit.edu; use the right code for your server!

people.rit.edu

# Add custom 404 error page
ErrorDocument 404 /youruserid/igme230/custom404.html

(As always, remember to replace "youruserid" with your *own* user ID.)

youruserid.cad.rit.edu

# Add custom 404 error page
ErrorDocument 404 /igme230/custom404.html

Note that in both cases, the path to the error document is a full (absolute) path from the server name (people.rit.edu, or youruserid.cad.rit.edu) down to the location of the custom error page--not a relative path from your personal directory.

Try going to a nonexistent page in your igme230 directory–something like this: people.rit.edu/youruserid/igme230/nonsense.html (or youruseridcad.rit.edu/nonsense.html). If you’ve done everything properly, you should still see the URL you typed in the location bar, and the custom error page that you uploaded and specified should be displayed in the browser. If it doesn’t work, ask for help!

RIT’s people.rit.edu web server uses a server module called “Pagespeed” to speed the loading of images--which is helpful when you have high-traffic websites like the main RIT page or departmental pages, but not really necessary for personal pages. The problem with this module is that it has the side effect of adding a lot of code to your pages when they’re returned to the browser, making it harder to debug and validate them.

To see this in action, you need to have an HTML file that includes images on the server. If you don't already have an image on the index.html file in your igme230 directory, you should add that now. Once the file is on the server, load it in a browser and view the source. You should see the pagespeed code injected into your HTML (as shown in lecture).

To disable Pagespeed in your igme230 directory, you're going to edit the .htaccess file you created in part 1. Under the error document instructions, add these two lines:

# Turn off server Pagespeed module
ModPagespeed off

Make sure you don't have any stray characters or typos, because any errors in this file will cause the web server to block access to your whole directory!

Upload your modified .htaccess file to your igme230 directory, and then try reloading your HTML file. (Make sure you force a full reload; Shift-reload on Firefox, Ctrl-reload in Chrome.) The Pagespeed injection code should be gone. (If it's not working, ask for help!)