DEV Community

loading...
Cover image for 10 Reasons you should give surge.sh a try for your next frontend project

10 Reasons you should give surge.sh a try for your next frontend project

ogurinkaben profile image Ogurinka Benjamin ・5 min read

In a world where the relevance of building static sites has greatly risen, having a flexible, easy, and fast way to deploy can sometimes be a life-saver.

Sometime in November (2020), I was surfing through the web and I came across a site with the domain surge.sh. Initially wasn't quite sure what it meant and so I decided to find out (out of curiosity) and my first impression was "Amazing!!!". I have used Netlify and Netlify CLI for more than a year now and going through the docs for Surge I found some things that felt different and made me try it for a few projects.

First off, what is surge?

" Surge is a static web publishing platform
for Front-End Developers"
_

In more simple terms, it gives you the ability to publish your HTML, CSS, and Javascript project to the web for free.

Why should you give it a try?

" Surge makes it easy for developers to deploy projects to a production-quality CDN through Grunt, Gulp, npm."

1. It is 100% free, for the most parts!

In the past, having to share your projects (no matter how little) would require you to get a domain name & pay for a hosting service and this can sometimes be a chore, especially if you do not have the funds to play around with. With surge, you get to deploy that cool stuff you have built without having to pay for anything or worry about adding your credit (or debit) card information.

2. Easy Setup and Deployment

Getting to deploy your projects on some platforms can easily become complicated and navigating around can very easily become a chore. Surge provides you with a setup and deployment flow that is as easy as ABC

Installation

Getting up and running with Surge is quite simple. The only prerequisite is having an environment with Nodejs installed. If you have that already, you can simply open a terminal on your Windows, Mac, or Linux OS and run

npm install --global surge

Alt Text

Remember to use

sudo npm install --global surge

if you are a Linux or Mac user

Alt Text

That's pretty much it! Installation takes less than a minute and you are good to go.

Once installed, run the surge command and you will be prompted to log in or register (for new users), complete the registration/login process and you are ready to use Surge!

Deploying a project on Surge

If you have completed a project and you are ready to share with the rest of the world, deploying is easy as well. All you have to do is open your terminal, navigate to your project directory and run the surge command.

Alt Text

Hit enter to proceed with the setup wizard and you will be up and running within seconds!

3. Add custom domains

Surge provides you with the flexibility to add a custom domain name to your project (assuming you have one).
All you have to do is log in to your domain registrar and create a CNAME record for your domain (or subdomain) and set the values of your hostnames @ and www to na-west1.surge.sh.

If your domain registrar for some reason prevents you from creating a CNAME record, you can create an A record and set the IP to 45.55.110.124 instead.

Once completed, open your terminal and run the surge command using the format below

Alt Text

Now your project will be deployed to your custom domain

4. Free SSL

In a world where security is important, it is usually recommended to have your websites deployed using SSL. The catch is that SSL certificates don't always come cheap and most times you will be required to pay for it, but with Surge you do not need to worry about that. Every deployed Surge project comes with free basic SSL by default at no extra cost! Cool, right?

5. Ignore files, deploy only what's necessary!

With Surge, you can leave out files that you do not wish to deploy and only send what you need online.
This is achieved by simply creating a .surgeignore file in the root of your project and specifying files you wish to ignore.
For example, if you wish to ignore the deployment of a node_modules and a .git file, in your .surgeignore file you will have something like
Alt Text
It is important to note that Surge automatically ignores files like node_modules and .git. The above is for illustration purposes alone.

6. Force HTTP to HTTPS

Sometimes users will visit the HTTP version of your site and if your site has SSL enabled, it useful to ensure they always only browse through using a secure connection. Surge gives you the ability to easily achieve this. Simply open your terminal and follow the command format below

Alt Text

7. Clean URLS

These days, no one really likes to load up a website and navigate to a new page only to see something like website.com/about.html. Thankfully, Surge allows you to clean up your URLs and make them look sleek and beautiful. This is a feature that comes by default on Surge and so by deploying your site on website.com/pages/about.html, it is also made available at website.com/pages/about

8. Automatic Gzipping

Building performant websites in this modern day cannot be stressed enough and one major performance recommendation is for static assets (.html, .css, .js, .json, etc) to be Gzipped. Surge takes care of this for you! Once your project is deployed, your static assets are automatically Gzipped for production

9. Custom Redirects

You can decide to redirect a user when they hit a certain route (perhaps one you are still working on) or perhaps perform other forms of redirects. Surge allows you to do this with ease.

Simply create a ROUTER file in the root directory of your project and add your redirects according to the format below

Alt Text

You can also redirect to external sites as well when a specific route is hit on your site

Alt Text

10. Collaboration

There are times you get to work on projects with your friends or as part of a team and at that point, collaboration becomes extremely vital. Surge allows you to add collaborators to your project and give them the ability to deploy to your domain as well.
To add a collaborator, first deploy a project and then follow the command format below

Alt Text

Conclusion

Surge is really flexible and offers some really quick, easy, and fast way to deploy a project online and it's definitely worth trying when you just need to quickly get a site online.

Discussion

pic
Editor guide
Collapse
peoray profile image
Emmanuel Raymond

Great article. I mostly use Netlify but can't wait to try Surge for my next side project :).

Collapse
mahmoudibnsamy profile image
Mahmoud Ibn Samy

great, but is it better than firebase hosting?

Collapse
ogurinkaben profile image
Ogurinka Benjamin Author

I won't say better.
But if your project doesn't leverage more on other features firebase has to offer, I'll say use Surge over Firebase Hosting