Objectives

By the end of this chapter, you should be able to:

• Define what a static site is
• Describe the difference between a file you open on your computer and a deployed site

What's a Static Website?

A static website is a website that uses static files (helpful, right?). When your browser requests a file from a static site, that file is delivered exactly as it is stored on the server. Static sites typically don't display any dynamic content (content that changes depending on the visitor of the page). A static site would most likely not have a login, or a way to save data. Static sites are typically informational in nature, or something that is read only.

As you learn more about web development, you'll see that modern web applications tend to be highly dynamic. Rather than storing static files on the server, we use the server to generate things like HTML files on the fly. For very basic webpages, though, (e.g. personal sites, simple blogs, etc.), static sites are very common.

Deployed Sites vs Local Files

So far, you have probably been testing out your website simply by opening up the file from your computer in your browser. If you look in the address bar, you will something that looks like this:

file:///path/to/your/file

That is a great way to get started, but you may run into a few problems once you deploy your site. We will talk about those problems in a second, but first the best thing to do is to use a server to deploy your site on your computer when you are working. Here are a couple of options:

Python Simple Server

If you are on Mac, you can use python's simple server. Just go to the directory that contains your website (for example /Users/$USER/website/) and type python -m SimpleHTTPServer in the terminal. By default, the server will deploy your website to http://localhost:8000. localhost is a keyword that just means your computer. In other words, this server is delivering files from the directory on your computer that you started the server from. The :8000 is specifying what port your server is running on. You should see in the output of python simple server the url to open (probably http://localhost:8000).

Mongoose Server

Another option, if you are a Windows machine, or if you do not want to mess with the terminal, is the mongoose server (do not confuse the server with the mongoosejs library for mongodb which is a different tool). With mongoose server you can also test your application locally.

Rules for Deploying Your Site

All relative paths should start with /

If you have added a script tag to your page, you may have done it like this:

<script type="text/javascript" src="main.js"></script>

That works fine when you are opening your site from your file system, but it starts to break down when your site gets larger. That is because the attribute src without the initial / is relative to whichever path the html file came from. In other words, if your files look like this:

/home/$USER/website
    main.html
    main.js

Everything will be fine, but if you have multiple html files coming from different directories, it does not work:

/Uers/$USER/website
    main.html
    main.js
    /courses
        courses.html

If courses.html were to also include a script tag with src="main.js", the browser would be looking for a file called main.js inside of the courses directory, but none exists there. You can get around this problem by doing ../main.js but this is not a best practice. The correct way is to always start src or href values with / if you are referencing a local file. So in this example the script tag would be:

<script type="text/javascript" src="/main.js"></script>

So before you deploy your static site, make sure to start relative paths with a / and to use a server on your computer when testing locally.

You should not specify http or https for CDN content

Once you deploy your site, the browser likes to have all of your files come from the same protocol. But what is a protocol? The http:// in front of your url is a protocol. There is also a https:// protocol. The extra 's' stands for secure, so https is the secure version of http. Your browser makes sure that if your site was loaded from https:// then all of the javascript and css files should also come from https://.

So in your app, if you may have added a link tag for bootstrap like this:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

But if you have a server running, the easiest way to load the file is to actually drop the protocol:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Now that we no longer have http: as part of the protocol, the browser will automatically fill the right one in for us. This will only work if you are using a local server like python simple server or mongoose though.