How to deploy and host your Static Web Projects on Surge.sh


Surge is a platform where you can publish/host your Static Web Projects online using a Command Prompt Interface. Your project will be live after deployment under a subdomain that surge provides for FREE. Although you can host your project on a custom domain of your choice with some extra settings, this blog post tries to explain how to deploy your static web project on a subdomain Surge.sh offers. 

Here are the 3 simple steps you could follow in order to get your Static Web Project live online in minutes. For this blog post, I've used a sample project called "Incrementer Demo" and the project code is available on github.

Step 1 : Download and Install Nodejs
In order to install Surge, you need a command line interface with an in-built npm package manager through which you can install the Surge package as shown in the Step 2.
To Install the latest Nodejs version from the official website, 
• go to https://nodejs.org/en/ 
• download and install the latest build of Nodejs for your preferred platform.



Step 2 : Open Nodejs Command Prompt
Install Surge using npm by running the following command within your Nodejs command prompt
C:\> npm install --global surge
npm successfully installs Surge on your pc. You can check the location of installed package in the npm folder like shown below

Step 3 : Open Surge and Register your account

Now that you have installed surge in your pc, you can open it and login to your account using the command
C:\> surge
If you haven't already registered an account on Surge, you will have to create one in order to deploy your projects to Surge. For this, you can type in your email id, password, your project path, preferred subdomain name and press enter key like shown in the screenshot below



email : <email id with which you want to create a Surge account>
password : <password of your choice>
project path : <location of your project - including your project folder>
domain : <default name of your choice>.surge.sh


Done. Your project is now live and running on <some_name>.surge.sh domain name generated as a result of the above step (which in my case is, incrementer.surge.sh)


Hope you are excited about how easy it is to publish your frontend web projects online? Please feel free to comment your experience and the project link below in the comments section.


Frequently Asked Questions

Q1. How to remove/delete my published domain from surge?
Ans. You can use 'list' command to view all the domains under your account. Now you can use 'teardown' command to remove/delete your published domain.

C:\> surge list - to list out all your domains
C:\> surge teardown - to delete/remove your published project domain
You can check if your domain is deleted/removed by checking the available domain list using 'surge list' command

Q2. Can I deploy and host my project on surge using a custom domain name?
Ans. Yes, indeed you can. Surge documentation has provided information about how to host your project on surge.sh with a custom domain name of your choice. You can refer the following link for more details : https://surge.sh/help/adding-a-custom-domain.
If you are still not satisfied with the information provided in the official website, I'll consider your request to make a simpler blog post explaining how to do it.
For more help, you can type the below command inside your Node.js command prompt window

C:\> surge -h




Comments

Popular posts from this blog

How to deploy and host your Web Applications on Heroku