Free, Easy Hosting with Surge.sh

Saheel Wagh
Aug 24, 2017 · 5 min read

Step back to the time when you started to learn website designing. After grasping how the content is marked up using HTML you could open the HTML file in a browser and instantly see the glorious markup you had created. Beauty can always be enhanced, so you learned CSS and watched your page turn even prettier, all with a simple cycle of save-reload.

You must have soon felt like sharing your flashy new website to friends and family. I did, so I looked up on how I could get my pages online(this was in 2012). 10 minutes into the exploration, I was convinced I am better off sticking with the learning part and deal with hosting later.Neither was it intuitive enough, nor cheap. The factors that put me off were

  1. I would have needed to buy a domain.
  2. I needed to then buy a hosting plan
  3. I needed to learn to use an FTP application.

Being a GNU/Linux user, I did not have much of a problem with learning FTP, but being a GNU/Linux user also means I care about what I spend my money on. And on that level of skill spending half a thousand Rupees on a domain name did not appeal to me. I presume it won’t appeal to you either if you’re a beginner web developer living in a third world country.

I tried searching for free alternatives but never came across anything that did not look fishy. Hence when I came across Surge.sh I scrounged their website to look for a catch. The conclusion of my private investigation is there isn’t any catch. Surge is a free and hassle-free hosting solution for your front end projects. With respect to the factors that prevented me from hosting my 1st gorgeous website(RIP, wherever you are after the hard disk crash), here are the advantages of Surge.sh:

  1. You don’t have to buy a domain.
  2. If you do buy a domain, you can integrate it for free
  3. Unless you wish to buy their pro plan which has additional features, hosting is free for unlimited projects
  4. Fast loading due to CDN network.
  5. Fast work-flow, just a couple of commands and your site is live.

How to install Surge

Step 0: Install Node and NPM

Surge, like thousands of other useful packages is hosted on npm, a repository where awesome devs share useful javascript software they create for us to use. If you haven’t done already, go to the node js website and install node. Do this not just for trying out surge, but because you will need it as a modern web developer.

Visit https://nodejs.org/en/download/ now.

Step 1: Install Surge globally

Once you’ve installed node you can run the command ‘npm’ on your command line.

install surge globally with the command

npm install --global surge

Here the global flag allows surge to be executed anywhere on your computer post install.

Step 3:

There is no step 3. If you did not come across any error messages , surge is now installed on your computer.

How to Host your Site with Surge:

Step 1: Navigate to your project directory.

Open this directory in the terminal.

Step 2: In the terminal prompt, type surge.

The surge command will now run. On your first time running this command you will be asked to create an account. Enter your email and choose a password. This is a one time requirement. Surge will have auto selected the path to your project.

Step 3: Choose a Subdomain of your choice.

Surge will display an auto generated sub-domain name. Move your cursor to the domain name and type any name that you want.

Step 4. Press Enter

Done. Your website will now be up and running at the URL which surge will display once it’s done uploading your files.

Now some of you might feel a little off put by the hacky looking domain name. If you don’t want your project’s url to have the surge.sh part, you can buy a custom domain and configure your project to use it. My first time was a little scary, I wasn’t sure which part to deal with first, or what my next action would lead to. But in the end it worked fine and after the first time you’ll feel a lot more comfortable (I’m still talking about configuring hosting for a custom domain here 😆).

What about Github Pages ?

Git and Github is something every developer should know about. And github pages allow you to host your projects for free so why would I recommend surge over Github pages for a beginner ? 3 words: ease of use.

I highly recommend learning git and github. And I apologize to reveal this late into the article that as of now I host more projects on github pages than on surge. Like our College’s Tedx website. But as a beginner you want as little friction as possible before getting to the end product. And in this case the end product is a working url that you can share with your friends and family. In my opinion surge offers you a smoother path to obtaining one.

Show off your projects now

The fastest way of improving your craft is by getting feedback from others. With surge.sh under your tool-belt you can now share your work with others without spending a penny or pulling out any hair.


Call to Action:

If you have never deployed any front end project and do it with the help of this article, I would love to take a look at it and provide feedback.Share your surge link in the comments. The first time is always awkward, but once you’ve gone ahead and done it, you will discover how pleasurable it is. And after the first time you can only get better (yep, still talking about websites 😜).

If you found this article helpful please let me know with a 👏. I plan to regularly publish more articles mainly targeted at beginner web developers so do consider following me to stay updated with future articles.

👊👊👊Don’t hide your work, deploy it. 👊 👊👊

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade