How to preview a static site?

Question

With Ruby on Rails I can run rails s -p 3000 and preview my site at localhost:3000.

With React I can run npm start and view the site at localhost:8080.

What if I just have html and CSS files, how do I preview that?

Answer 1

On OSX, you can run a simple web server from any directory using this command:

python -m SimpleHTTPServer 8000

Then, you can hit the directory in your browser by going to http://localhost:8000/path/to/file.html

Answer 2

You can try click 2 times in index.html to open the file in browser.

Every time you update the code in sublime text, you need to reload the browser and the updates will be aplied.

Answer 3

This usually depends on your device/OS and what your eventual goals are, but usually you can either use (online) software that renders the HTML and the CSS for you (such as Brackets.io, etc.) whilst you are typing it (to live preview any modifications/additions), or you can put the documents live using a local webserver such as Xampp or OSXs built in simple web server, and check their respective localhost locations every time you save changes using your code editor.

You could also simply use online applications like Codepen, which can also render HTML and CSS, and even JavaScript. Codepen just today launched Codepen Projects which allows you to create entire website projects at their website. It is however, a pro (paid) feature.

Here's a short overview of code playgrounds that offer the functionality you requested (by no means an exhaustive list):

JSFiddle

CSSDeck

CodePen

JSBin

And ofcourse you can insert Snippets here on StackOverflow, which is also able to render HTML and CSS (and JS).

If you really only use HTML and CSS, previewing in a browser is also possible, opening the .html file by double clicking and opening in Internet Explorer, Chrome, etc.