Sometimes I want a quick way to build some web pages. A way that does not require installing a lot of servers locally, but is still better than opening the file directly in my web browser.

When I start a new web project I break it up into small steps. These steps form a natural set of milestones, and helps me to reason about the project as a whole. Focusing on each step helps me make progress on the entire project.

After getting a new design I begin to implement it as a static website, not yet adding the HTML to whichever tempting engine I am using. This allows me to focus on the specifics of HTML and not be distracted by the needs and particularities of the templating engine. Only once the HTML is all (or mostly) built-out will I begin to transition the HTML to my templating engine.

Develop locally

The easiest way to develop locally is to open your HTML page in your browser from the File > Open command. This reads the page from the local disk using the file protocol; file://. This is easy, but not ideal. The file protocol has inconsistencies with handling relative and absolute paths to page resources. It requires you to make changes to resource paths before you can use the page on a server, or in a templating engine.

I would prefer to use a local web server. This way I am using the page closely to how it will be used on the production server. One could install MAMP or setup Apache locally on a Mac; there is WAMP or Apache with Cygwin on Windows. The drawback to these methods is that it ends up being a lot of software for just coding some HTML pages.

There is another way.

The built-in web server

Several programming languages include a web server as part of their standard library, and offer a way to easily use it to server content from a local folder.

Choose a folder on your computer and store your HTML files there. Open your terminal and navigate to the folder with your files and then run one of the local web server commands below. Now you can point your web browser to localhost:8080 and you will see your files served up.

PHP

1

php -S localhost:8080

In addition to serving HTML the local PHP web server will process and serve PHP files. This is not ideal for large php applications, but perfect for a small set of HTML files that have a couple of common page elements.

I use this setup even if my final application is in another language like Go, Python or Ruby. It allows me to use include(header.php) directives to include a single page resource into multiple pages with differing layouts. This helps cut down on the amount of work I have to do.

I use includes for global headers and footers. It is useful for any element that would appear on more than one page. This way I am only every editing the structure and CSS once.

Once I am done with my layouts having these separate page components already in separate files helps me migrate my code to my templating engine.

Ruby

1

ruby -run -e httpd -- -p 8080 .

Python

1
2

# Python 2.x
python -m SimpleHTTPServer 8080

1
2

# Python 3.x
python -m http.server

Node

You have to install it first.

1

npm install http-server -g

Then you have to run it

1

http-server .

Focus on the simple

Using a local web server helps me focus on just the HTML and CSS that I am building out. It removes distractions, and can be used without an internet connection. It’s reliable and convenient.

Update 27 February 2016

Todd Rafferty on twitter suggested Caddy as an addition to this list. It is not a language with a built-in web server; rather it is single purpose web server who’s goal “is to streamline an authentic web development, deployment, and hosting workflow”. Which means it is ideal to use for developing local HTML files. It includes some neat features like SSL and HTTP/2 by default. All that and it is super easy to setup with a single file.