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
Remember to use
sudo npm install --global surge
if you are a Linux or Mac user
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.
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
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
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
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
You can also redirect to external sites as well when a specific route is hit on your site
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
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.
Top comments (4)
Great article. I mostly use Netlify but can't wait to try Surge for my next side project :).
great, but is it better than firebase hosting?
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
Can use surge to host SPA that can be used for a production purpose?