Sometimes you will end up with a web directory structure that leaves a bunch of files exposed publicly. You may not want that. This happens when you install the Yourls app for example, visit the demo one we set up or earlier when we created a web directory of “stuff” at

Not very pretty!

This happens in a web server when there is no index.html, index.php, or default.htm file in there, you just see files.

With a simple set of 4 files added to that directory, you can create a guard dog (or whatever image you like) to make as a page to block the file view. It uses a little bit of code called backstretch that scales a background image to fill the window side.

These are the 4 files you will get in this package (download the package now):

  • background.jpg
  • index.html
  • jquery.backstretch.min.js
  • style.css

You can replace the background.jpg file with any other image (rename it!); something at least 1024 x 768px will do well. ANd now if you are feeling brave, open the index.html file in a plain text editor, and edit any of the content inside the <div id="stuff"> section:

<div id="stuff">
<!-- edit ahoy -->

	<!-- the big title -->
		CogDogBlog Lab
	<!-- a clever tagline -->
		Be Careful
	<!-- give credit for the image! -->
	<p class="small">
		cc licensed ( BY ) flickr photo by 
		Perfecto Insecto:
		<a href="">
		http ://</a>
<!-- done editing -->

Upload these files to the directory you are guarding, and enjoy the beauty of your cleverness.

Another example is at

Example for "A Guard Dog For a Web File Directory":

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

1 Response Completed for this Activity

Creative Commons License
This work by Alan Levine 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 *