By the end of this chapter, you should be able to:
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.
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:
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).
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.
All relative paths should start with
If you have added a script tag to your page, you may have done it like this:
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
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
href values with
/ if you are referencing a local file. So in this example the script tag would be:
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
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.
When you're ready, move on to Github Pages