Serve a Static HTML Page for Development

Instructor: [00:00] Let's start with a blank text file. We'll paste in a basic HTML document. This Web page, we'll call the "Patio11 Bot" because it's going to give out quotes from Patio11's blog posts. We can save that as index.html.

[00:16] If we find that folder on the disk, then we can see the Web page by right-clicking and opening in Chrome. There we go. We can see the content of that page in Chrome. There's no styles yet though. Back in a text editor, let's make a new file called "style.css." We can paste in some styles for that page.

[00:40] Back in index.html, we want to use those styles. If we just link the stylesheet like we normally would think to do, then when we refresh the Chrome browser, those styles aren't applied. If we open the console, we can see that Chrome can't fetch the style files because we're not actually serving the Web page. We're just viewing the local file in Chrome.

[01:04] Let's head over to the terminal. In the folder with the index.html and style.css files, we can start a mini-web server. The first way we'll do that is with Python. We can call Python and then use -m, which lets Python search the Python module namespace.

[01:21] In Python 2.0you can use SimpleHTTPServer and then a port, like 8000. If you have Python 3.0installed, like I do, then instead of SimpleHTTPServer, you can use http.server. Now Python is running a mini-web server in that folder. If we switch back to the browser and go to localhost port 8000, then we get the site.

[01:44] If you want an alternative to Python's simple Web server, then we can go back to the terminal and install the Node version from npm with npm install -g httpserver, which will install the httpserver command globally. Then we can just run httpserver. Back in the Web browser, we can visit port 8080 to see the site running.