My readers know that I've become somewhat of a proponent of static sites lately. As much as I've made a career out of building dynamic web apps, I love the simplicity of static files. I can push to a CDN and pretty much not worry about it again. Don't get me wrong, I know S3, Google Cloud, and their kind can - and probably will - go down. But I'm probably safe in saying that their engineers can get servers back up much quicker than I can. That's why I was excited to see a new option for hosting static sites launch - Surge.

surge

Surge is a command-line program that handles deploying static sites to a CDN. You install it via npm (npm install -g surge) and then simply go into a directory of static files and type surge. And yeah - that's it. Seriously.

The command line will prompt you for both a directory and domain, but you can accept a randomly selected domain generated by the service. This is a great way to show off a web site in development to a client.

Here's an example. I've already registered and logged in so it skips that. I also had an existing random domain already so I typed that in. (And you can skip that by creating a file called CNAME with the host.)


surge2

About 30 seconds or so later, the deployment is done. If you want, you can enter a "real" domain and simply update your DNS settings to point to the IP address returned in the surge output. (Read more about that here: Make something of your ridiculous domains).

You can even use Surge with Gulp/Grunt to fully automate the deployment.

For fun, I decided to "static-ify" (that's a word, honest) my Node.js site, JavaScriptCookbook.com. I decided to try Jekyll for this conversion and I'll blog about that process tomorrow. (Spoiler - it took a bit more than 30 seconds.) You can see the Surge-hosted version of the site here: http://aloof-zephyr.surge.sh/. Once I've clicked around a bit more to ensure I didn't screw anything up I'll shut down the Node.js version and make this one the production site.

And by the way - the entire thing is free. Which kicks ass. You can see one of the creators demoing the feature in the video below. If you decide to make use of this service, let me know in the comments below. I'd love to see some examples.