I sometimes work on static sites and this is how I do it.
Pow is the best way to work on a static site locally. showoff.io is the best way to view it on any device anywhere. And once you're ready to ship, heroku can host it for free with fairly good performance.
Also, I assume you are willing to use the Terminal or command line.
Terminal commands will look like
$ ls
which means to type ls and hit return.
Note: If you are on Windows, then I can't help you. Showoff works on Windows I think, but pow doesn't and I wouldn't know what to use in place of it. Can you run nginx on windows easily? I don't know.
As it says on pow.cx, you just run $ curl get.pow.cx | sh
That will setup pow to take over port 80 and provide apps on the .dev top level domain locally.
Create a folder for your project, we'll call it awesome-project. Mine is located in ~/Documents/awesome-project. Then, create a public folder (it must be named public exactly) in awesome-project. All html, css, and js files go in the public folder. That should end up looking something like this:
- awesome-project/
| - public/
| - index.html
| - css/
| - reset.css
| - style.css
| - js/
| - underscore.js
| - master.js
Pow knows which folders are websites by looking into a special hidden folder at ~/.pow/ for symlinks. A symlink is basically a Unixy version of an Alias or Shortcut or whatever you want to call it.
So, if a symlink named awesome were at ~/.pow/awesome and it pointed to the project at ~/Documents/awesome-project/, then one could visit http://awesome.dev in the browser to see the contents of the awesome-project's public folder (starting with the index.html as usual). That's how pow gets configured, just by the presence of a symlink.
Make a symlink like this:
$ ln -s /Users/nathan/Documents/awesome-project/ ~/.pow/awesome
The first argument to ln is -s, which mean symbolic link (symlink for short). The second argument is where the symlink should point to. The third argument is where the symlink should reside.
Now, if you ran this command:
$ ls -al ~/.pow/
You should see a line similar to this in all the output:
lrwxr-xr-x 1 nathan staff 35 Aug 17 18:08 awesome@ -> /Users/nathan/Documents/awesome-project/
You should check the ~/.pow/ folder with ls -al when you need to know how many sites you have symlinked and where they are.
You should now be able to see your site at http://awesome.dev (or whatever name you chose).
Now, if you want to test your site on your phone, tablet, or even just have a friend look at it, then you can share your local site with showoff.io.
Showoff is a gem, so install it with this command:
$ gem install showoff-io
When that is done, you should be able to run the command $ show with no errors (it will print out the help).
If $ gem install showoff-io gave you permission errors, you may have to run $ sudo gem install showoff-io
If everything is installed correctly, you just tell showoff which local site to share publicly:
$ show awesome.dev
Showoff will generate a random url for you to browse and share. Something like: http://xkcd.showoff.io
As long as showoff is running in the terminal, you can browse you local files publicly. By default, showoff will only stay open for 5 minutes at a time. You can rerun the showoff command after 5 minutes to get another random domain.
If you pay $5 a month, which I do, then you get a permanent url that doesn't change and you can stay connected for hours, which is so worth it.
Deploying with heroku does require you to use git. If you don't use git already, you should learn it.
There are many ways to install git, but if you don't have it already and want it, just use the heroku toolbelt. Installing that gives you git and some other stuff useful for making heroku apps.
If you are more neck-beardy and already have git installed, then just install heroku as a gem with $ gem install heroku
Setup a git repo for your project:
$ cd ~/Documents/awesome-project
$ git init
$ git add .
$ git commit -m "First commit"
If you don't use git a lot, then the following is a decent starter workflow:
Anytime you change files, add all the changes and make a commit. You can do this once per hour or even just once per day. It just depends on how many different historical entries you want to keep.
The flow would look like this:
- Do some work
$ git add -u .
$ git add .
$ git commit -m "I did some work"
- Do some more work
$ git add -u .
$ git add .
$ git commit -m "I did some work"
Note: commit messages do not have to be unique.
Anytime you need, you can view all your list of changes with $ git log
Then, once per project, you just have to tell heroku to create a website for that project.
$ cd ~/Documents/awesome-project
$ heroku create
Like showoff, heroku will create a random site url for you to use. You can later point a regular domain you own at that site url if you want.
Then, anytime you want to update the files on heroku, you run:
$ git push heroku master
You should read that as "hey git, push files to heroku from my master local copy."
Every time you push code to heroku it will replace the site files and restart the server for you.
The default free heroku account is actually pretty powerful for a static site, so I would recommend trying it out before scaling your site up. If, however, you had so many people going to your site that the free 1 process wasn't good enough, you can add a second process by simply running:
$ heroku ps:scale web=2
And, you can always go back to one by replacing the 2 with a 1. And, you can even specify 0 to shut all the web processes down.
Two should be more than enough for any static site's needs, unless you are so popular it's crazy.
This is how I do it. I've deployed simple static sites many different ways on many hosts and with many servers, but this is the only combination of services that I feel is easy, reliable, and understandable.
Have fun.