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

#webdev #javascript #productivity

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](https://dev-to-uploads.s3.amazonaws.com/i/02orv9v9fdna8bdgl3rw.png)

Remember to use ```sudo

 npm install --global surge

``` if you are a Linux or Mac user

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qtpdzbp1ncbseo3rwrtj.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/ane28iluuddyl9pzugrr.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/dhj0ed5hllprmkq0t0r5.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/rjh9wm1yjp4subz3pf3a.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/yq42psm91zuhzvur5nxm.png)


### 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](https://dev-to-uploads.s3.amazonaws.com/i/dkbn5fm7lnlmjccczsnb.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2is3uuf0kj96yc6oend1.png)


### 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](https://dev-to-uploads.s3.amazonaws.com/i/mm1xosbl9qnxq4im5w0t.png)


## 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.