(🏠 elijahcaine.me) (🐙 github 🐱) (👔 resume) (📰 feed)

How to develop a site for the web

Fri 25 March 2016

Note

This post does not deal with the basics of HTML, CSS, or Javascript, but rather a simple and often overlooked part of the web-dev toolchain.

If you would like help with the basics of HTML, CSS, and Javascript I suggest Codecademy.

Web Development, especially the front-endy stuff, is a great way to understand how computers think and can be a wonderful foray into computer programming. Anybody that's made a website probably remembers their first time:

  1. Open up a text editor.
  2. Type something like the following in:
<h1>Hello world!</h1>
<p>This is so cool!</h1>
  1. Save As index.html.
  2. Right click and open the file in your browser.
  3. Marvel at what you've created and hack away at it all night long.

And there you go! You've got a website made and ready to roll. It's not on a server, and you can't tell your friends to go to it from their computer -- but those are just technicalities. You can still celebrate doing a thing like a boss.

Unfortunately, when you test your website by viewing local files you're missing out on a lot of advantages and quirks that you get when you host a website on a real server using something like Apache or Nginx.

For instance, when you run check your website by clicking through file///home/username/project/files.html all of your hyperlinks that should point to http://mywebsite.ext/somepage/ will take you to file:////somepage when they should take you to file:///home/username/projects/myawesomesite/somepage/index.html.

Run A Development Server (it's easy!)

The Short Answer

Use Python!

$ python2 -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

The Longer Answer

You can run your own local webserver to serve files locally. This gets you all of the developmental advantages of running a webserver without having to rent or run a server in the cloud. The best part is that it's very easy to run a development web server.

Here's how:

  1. Install Python
  2. Navigate to your-awesome-website directory/folder.
  3. Run python -m SimpleHTTPServer if you installed python2 or run python -m http.server if you installed python3.

Note

These instructions assume you are doing things in a Unix environment (OSX or Linux) thought the commandline. If you are using Windows you should check out this stack overflow post for Windows-specific help.

Then in your web browser go to the address http://localhost:8000 and bam! Your Website.

'High Five' gif